乐趣区

关于javascript:复习jQuery

jiezi

咱就是说，发现了一个更好的办法每次把效果图制作成了一个 gif，另外举荐个免费软件 GIFcam 很不便制作 gif 图，毕竟 js 是一门动静交互的语言对吧，没有动静的图那就是没有灵魂的所以当前就用这种形式来上传一些页面的成果交互，明天是对 jQuery 的温习，尽管说当初用 jq 的少了然而学一学还是能够的，学了不吃亏，还别说这外面还是有难得案例的逻辑性很强，就比方 jq 那个表单插件 validate 次要还是外面的属性办法这些要搞清楚。

1.

第一个案例是一个登录切换的案例，用到了 jq 的自触发事件，而后都在代码里了，看图吧

霍，不错不错，终于实现了动静交互，我的博客实现了一大停顿，人类进入了一个新社会，而后还是一样 html 对应局部➕js 的代码出现，这个案例有个陈腐的点 

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo - 微博登录 </title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="login">
      <div class="wrap-box">
        <!-- 切换登录场景 -->
        <div class="multi-type">
          <a href="javascript:;" data-label="#account" class="label active">
            账号登录
          </a>
          <a href="javascript:;" data-label="#secure" class="label"> 平安登录 </a>
          <a href="javascript:;" data-label="#phone" class="icon"></a>
        </div>
        <div class="login-type">
          <!-- 账号登录 -->
          <div class="account" id="account">
            <div class="input-box username">
              <input type="text" />
            </div>
            <div class="input-box password">
              <input type="text" />
            </div>
            <div class="extra-box">
              <label for="login_status">
                <input id="login_status" type="checkbox" />
                <span> 记住我 </span>
              </label>
              <a href="javascript:;"> 遗记明码 </a>
            </div>
            <div class="button-box">
              <button> 登录 </button>
            </div>
            <p class="text-box">
              还没有微博? <a href="javascript:;"> 立刻注册!</a>
            </p>
            <p class="social-box">
              <span> 基它登录：</span>
              <a href="javascript:;" class="taobao"></a>
              <a href="javascript:;" class="qq"></a>
              <a href="javascript:;" class="yidong"></a>
              <a href="javascript:;" class="tianyi"></a>
              <a href="javascript:;" class="qihu"></a>
            </p>
          </div>
          <!-- 平安登录 -->
          <div class="secure" id="secure">
            <div class="qrcode">
              <img src="./images/weibo.png" alt="" />
              <span> 请用最新版微博客户端扫码 </span>
            </div>
            <p> 还没有微博？<a href="javascript:;"> 立刻注册!</a></p>
          </div>
          <!-- 手机号登录 -->
          <div class="phone" id="phone">
            <div class="input-box phone-number">
              <input type="text" />
            </div>
            <div class="verify-box">
              <button> 获取短信验证码 </button>
              <input class="code" type="text" />
            </div>
            <div class="extra-box">
              <label for="login_status">
                <input id="login_status" type="checkbox" />
                <span> 记住我 </span>
              </label>
              <a href="javascript:;"> 遗记明码 </a>
            </div>
            <div class="button-box">
              <button> 登录 </button>
            </div>
            <p class="text-box">
              还没有微博? <a href="javascript:;"> 立刻注册!</a>
            </p>
            <p class="social-box">
              <span> 基它登录：</span>
              <a href="javascript:;" class="taobao"></a>
              <a href="javascript:;" class="qq"></a>
              <a href="javascript:;" class="yidong"></a>
              <a href="javascript:;" class="tianyi"></a>
              <a href="javascript:;" class="qihu"></a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 引入 jQuery -->
    <script src="./assets/jquery/jquery-3.5.1.min.js"></script>
   <script>
    //  1. 先实现点击切换的性能
      var flag = true
       $('.multi-type').children('a').click(function() {var label = $(this).attr('data-label').substr(1)
         $('.multi-type').children('.active').removeClass('active')
         $(this).addClass('active')
         // 3. 小图标的切换应该有一个开关阀 管制再次点击切换到平安登录
         // 2. 对应的内容面板切换
         $('.login-type').children('div').css('display', 'none')
         $('.login-type').children('.'+label+'').css('display','block')
         // 3.1 这里我用 jq 对象来相等如同不太行的样子不晓得为什么 
        //  这个案例陈腐点在这里 一个是怎么来控制点了第三个图标两次 一个是这段代码的摆放地位也有作用 放在后面就会执行不了
         if (this === document.querySelector('.icon')) {// console.log(11);
           if (flag) {console.log(11);
             this.click()
             flag = false
           } else {
             flag = true
             console.log(11);
             document.querySelector('.multi-type').children[1].click()}
         }
       })
   </script>
  </body>
</html>

2.

这一个案例，是一个多方面的案例次要使用到的技术还是 jq 的动画，以及它的增加节点之类的，先来两个成果展现一个是返回顶部的淡入淡出以及带有缓冲成果的返回顶部，一个是模仿客服反馈页面的显示暗藏成果

而后还有一个比较复杂一点是一个轮播版块的轮播，然而用的是节点和递归的操作去达到的

这图片大小竟然还有限度，当前还要卡在十 m 以内，这是对应的轮播图 html 局部 

<div class="weibo">
          <div class="title">
            <h3> 悟语 </h3>
            <span>
              <a href="#"> 更多 >></a>
            </span>
          </div>
          <div class="outer">
            <div class="wbdesc">
              <div class="wblist">
                <div class="userinfo">
                  <img src="./uploads/photos/use1.jpg" />
                  <h4> 作响_</h4>
                  <p>1 分钟前 </p>
                </div>
                <div class="cont">
                  <p>
                    青春，一场盛世的热闹，愿不倾城，不倾国，只倾我所有。只为过简略安稳的生存，单纯不平庸。一支素笔，一杯花茶，一段时光，微笑又坦然。早安！</p>
                  <img src="./uploads/weibo1.jpg" />
                </div>
              </div>
              <div class="wblist">
                <div class="userinfo">
                  <img src="./uploads/photos/use2.jpg" />
                  <h4> 大媚子 </h4>
                  <p>13 分钟前 </p>
                </div>
                <div class="cont">
                  <p>
                    人生最好的旅行，就是你在一个生疏的中央，发现一种久违的打动。单独旅行，不受羁绊。有一天，背上包，带上本人，有多远，走多远。</p>
                  <img src="./uploads/weibo2.jpg" />
                </div>
              </div>
              <div class="wblist">
                <div class="userinfo">
                  <img src="./uploads/photos/use3.jpg" />
                  <h4>Honey 米儿 </h4>
                  <p>6 分钟前 </p>
                </div>
                <div class="cont">
                  <p>
                    任何一场旅行，都似对生存的援救；每一个深思的霎时，都成就了旅行的意义。</p>
                  <img src="./uploads/weibo3.jpg" />
                </div>
              </div>
              <div class="wblist">
                <div class="userinfo">
                  <img src="./uploads/photos/use4.jpg" />
                  <h4> 如茅挽君 </h4>
                  <p>16 分钟前 </p>
                </div>
                <div class="cont">
                  <p>
                    我想要一次旅行，到处留下脚印，和你一起。我在他人眼里，你在我心里。我想要一次旅行，不留任何脚印，单独一起。我在你的记忆，却不在你心里。咱们一起走过过来和当初。</p>
                  <img src="./uploads/weibo4.jpg" />
                </div>
              </div>
            </div>
          </div>
        </div>

这是返回顶部和客服反馈界面 

<div class="tools">
      <div class="gotop">
        <a href="javascript:;"> <i></i> 返回顶部 </a>
      </div>
      <div class="suggest">
        <a href="javascript:;"> <i></i> 意见反馈 </a>
      </div>
    </div>
    <div class="sugform">
      <div class="sugtitle">
        <p> 您对 <span class="curpage">"以后页面"</span> 称心吗?</p>
        <a href="javascript:;" class="close">&nbsp;</a>
      </div>
      <div class="check"></div>
    </div>

而后这是 js 局部 

// 1. 返回顶部淡入淡出
$('.gotop').css('display', 'none')
$(window).scroll(function() {if($(this).scrollTop() >= $('.view h3').offset().top){$('.gotop').stop().fadeIn(500)
    } else {$('.gotop').stop().fadeOut(500)
    }
})
// 1.1 利用主动以动画做带有缓冲成果的返回顶部
$('.gotop').click(function() {$('html').animate({scrollTop : 0}, 500)
})
// 2. 意见反馈
$('.suggest').click(function() {$('.sugform').show(500)
})
$('.close').click(function() {$('.sugform').hide(500)
})
// 3. 最案例最重要内容 高低轮播
function autoPlay() {$('.wbdesc').prepend($('.wblist').last())
    var move = $('.wblist').first().height()
    $('.wbdesc').css('top',-move)
    $('.wbdesc').delay(1000).animate({top : 0}, 1000,function() {autoPlay()
    })
}
autoPlay()

3.

而后是一个记事本的案例，这个的难点在哪，在一个动画的增加，不论是新增还是删除都会有一个 jq 动画的成果再在动画的回调函数外面去删除

html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>notebook</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <section class="todoapp">
      <header class="header">
        <h1> 记事本 </h1>
        <!-- 输入框 -->
        <input
          id="addTodo"
          class="new-todo"
          placeholder="请输出内容"
          autofocus
        />
      </header>
      <section class="main">
        <!-- 容器 -->
        <ul class="todo-list" id="todoList">
          <!-- 模板 -->
          <!-- <li>
            <div class="view">
              <label> 模板 </label>
              <button class="destroy"></button>
            </div>
          </li> -->
        </ul>
      </section>
      <footer class="footer">
        <!-- 计数区域 -->
        <span class="todo-count">
          共计:
          <strong>0</strong>
        </span>
      </footer>
    </section>

    <script src="./libs/jquery-3.5.1.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>

js 局部 

// 1. 新增性能
$('.new-todo').keyup(function(e) {if (e.keyCode == 13) {var val = $(this).val()
    // console.log(val);
    if ($(this).val() != '') {$('.todo-list').prepend('<li><div class="view"><label>'+val+'</label><button class="destroy"></button></div></li>')
      $('.todo-list li').first().css('display', 'none').slideDown()}
    $(this).val('')
  }
  $('strong').text($('.todo-list').children().length)
})
// 2. 删除性能
$('.todo-list').on('click','.destroy', function() {$(this).parent().parent().fadeOut(function() {$(this).remove()
    $('strong').text($('.todo-list').children().length)
  })
})

ok 差不多 jQuery 就这些内容了，你如果感觉还没完，那就是前面还有一些 jq 的插件的应用问题了，这个按着他的 api 来就完事了

前端爱好者，望大佬给个内推机会！！！

退出移动版