咱就是说，发现了一个更好的方法每次把效果图制作成了一个gif，另外推荐个免费软件GIFcam很方便制作gif图，毕竟js是一门动态交互的语言对吧，没有动态的图那就是没有灵魂的所以以后就用这种方式来上传一些页面的效果交互，今天是对jQuery的复习，虽然说现在用jq的少了但是学一学还是可以的，学了不吃亏，还别说这里面还是有难得案例的逻辑性很强，就比如jq那个表单插件validate主要还是里面的属性方法这些要搞清楚。

1.

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

霍，不错不错，终于实现了动态交互，我的博客完成了一大进展，人类进入了一个新社会，然后还是一样html对应部分➕js的代码呈现，这个案例有个新鲜的点

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>demo - 微博登录</title>
  7.     <link rel="stylesheet" href="./css/style.css" />
  8.   </head>
  9.   <body>
  10.     <div class="login">
  11.       <div class="wrap-box">
  12.         <!-- 切换登录场景 -->
  13.         <div class="multi-type">
  14.           <a href="javascript:;" data-label="#account" class="label active">
  15.             账号登录
  16.           </a>
  17.           <a href="javascript:;" data-label="#secure" class="label">安全登录</a>
  18.           <a href="javascript:;" data-label="#phone" class="icon"></a>
  19.         </div>
  20.         <div class="login-type">
  21.           <!-- 账号登录 -->
  22.           <div class="account" id="account">
  23.             <div class="input-box username">
  24.               <input type="text" />
  25.             </div>
  26.             <div class="input-box password">
  27.               <input type="text" />
  28.             </div>
  29.             <div class="extra-box">
  30.               <label for="login_status">
  31.                 <input id="login_status" type="checkbox" />
  32.                 <span>记住我</span>
  33.               </label>
  34.               <a href="javascript:;">忘记密码</a>
  35.             </div>
  36.             <div class="button-box">
  37.               <button>登录</button>
  38.             </div>
  39.             <p class="text-box">
  40.               还没有微博? <a href="javascript:;">立即注册!</a>
  41.             </p>
  42.             <p class="social-box">
  43.               <span>基它登录：</span>
  44.               <a href="javascript:;" class="taobao"></a>
  45.               <a href="javascript:;" class="qq"></a>
  46.               <a href="javascript:;" class="yidong"></a>
  47.               <a href="javascript:;" class="tianyi"></a>
  48.               <a href="javascript:;" class="qihu"></a>
  49.             </p>
  50.           </div>
  51.           <!-- 安全登录 -->
  52.           <div class="secure" id="secure">
  53.             <div class="qrcode">
  54.               <img src="./images/weibo.png" alt="" />
  55.               <span>请用最新版微博客户端扫码</span>
  56.             </div>
  57.             <p>还没有微博？<a href="javascript:;">立即注册!</a></p>
  58.           </div>
  59.           <!-- 手机号登录 -->
  60.           <div class="phone" id="phone">
  61.             <div class="input-box phone-number">
  62.               <input type="text" />
  63.             </div>
  64.             <div class="verify-box">
  65.               <button>获取短信验证码</button>
  66.               <input class="code" type="text" />
  67.             </div>
  68.             <div class="extra-box">
  69.               <label for="login_status">
  70.                 <input id="login_status" type="checkbox" />
  71.                 <span>记住我</span>
  72.               </label>
  73.               <a href="javascript:;">忘记密码</a>
  74.             </div>
  75.             <div class="button-box">
  76.               <button>登录</button>
  77.             </div>
  78.             <p class="text-box">
  79.               还没有微博? <a href="javascript:;">立即注册!</a>
  80.             </p>
  81.             <p class="social-box">
  82.               <span>基它登录：</span>
  83.               <a href="javascript:;" class="taobao"></a>
  84.               <a href="javascript:;" class="qq"></a>
  85.               <a href="javascript:;" class="yidong"></a>
  86.               <a href="javascript:;" class="tianyi"></a>
  87.               <a href="javascript:;" class="qihu"></a>
  88.             </p>
  89.           </div>
  90.         </div>
  91.       </div>
  92.     </div>
  93.     <!-- 引入 jQuery -->
  94.     <script src="./assets/jquery/jquery-3.5.1.min.js"></script>
  95.    <script>
  96.     //  1.先完成点击切换的功能
  97.       var flag = true
  98.        $('.multi-type').children('a').click(function() {
  99.          var label = $(this).attr('data-label').substr(1)
  100.          $('.multi-type').children('.active').removeClass('active')
  101.          $(this).addClass('active')
  102.          // 3.小图标的切换应该有一个开关阀 控制再次点击切换到安全登录
  103.          // 2.对应的内容面板切换
  104.          $('.login-type').children('div').css('display', 'none')
  105.          $('.login-type').children('.'+label+'').css('display', 'block')
  106.          // 3.1这里我用jq对象来相等好像不太行的样子不知道为什么 
  107.         //  这个案例新鲜点在这里 一个是怎么来控制点了第三个图标两次 一个是这段代码的摆放位置也有作用 放在前面就会执行不了
  108.          if (this === document.querySelector('.icon')) {
  109.            // console.log(11);
  110.            if (flag) {
  111.              console.log(11);
  112.              this.click()
  113.              flag = false
  114.            } else {
  115.              flag = true
  116.              console.log(11);
  117.              document.querySelector('.multi-type').children[1].click()
  118.            }
  119.          }
  120.        })
  121.    </script>
  122.   </body>
  123. </html>

2.

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

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

这图片大小居然还有限制，以后还要卡在十m以内，这是对应的轮播图html部分

  1. <div class="weibo">
  2.           <div class="title">
  3.             <h3>悟语</h3>
  4.             <span>
  5.               <a href="#">更多>></a>
  6.             </span>
  7.           </div>
  8.           <div class="outer">
  9.             <div class="wbdesc">
  10.               <div class="wblist">
  11.                 <div class="userinfo">
  12.                   <img src="./uploads/photos/use1.jpg" />
  13.                   <h4>作响_</h4>
  14.                   <p>1分钟前</p>
  15.                 </div>
  16.                 <div class="cont">
  17.                   <p>
  18.                     青春，一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！
  19.                   </p>
  20.                   <img src="./uploads/weibo1.jpg" />
  21.                 </div>
  22.               </div>
  23.               <div class="wblist">
  24.                 <div class="userinfo">
  25.                   <img src="./uploads/photos/use2.jpg" />
  26.                   <h4>大媚子</h4>
  27.                   <p>13分钟前</p>
  28.                 </div>
  29.                 <div class="cont">
  30.                   <p>
  31.                     人生最好的旅行，就是你在一个陌生的地方，发现一种久违的感动。独自旅行，不受羁绊。有一天，背上包，带上自己，有多远，走多远。
  32.                   </p>
  33.                   <img src="./uploads/weibo2.jpg" />
  34.                 </div>
  35.               </div>
  36.               <div class="wblist">
  37.                 <div class="userinfo">
  38.                   <img src="./uploads/photos/use3.jpg" />
  39.                   <h4>Honey米儿</h4>
  40.                   <p>6分钟前</p>
  41.                 </div>
  42.                 <div class="cont">
  43.                   <p>
  44.                     任何一场旅行，都似对生活的拯救；每一个沉思的瞬间，都成就了旅行的意义。
  45.                   </p>
  46.                   <img src="./uploads/weibo3.jpg" />
  47.                 </div>
  48.               </div>
  49.               <div class="wblist">
  50.                 <div class="userinfo">
  51.                   <img src="./uploads/photos/use4.jpg" />
  52.                   <h4>如茅挽君</h4>
  53.                   <p>16分钟前</p>
  54.                 </div>
  55.                 <div class="cont">
  56.                   <p>
  57.                     我想要一次旅行，到处留下足迹，和你一起。我在别人眼里，你在我心里。我想要一次旅行，不留任何足迹，独自一起。我在你的记忆，却不在你心里。我们一起走过过去和现在。
  58.                   </p>
  59.                   <img src="./uploads/weibo4.jpg" />
  60.                 </div>
  61.               </div>
  62.             </div>
  63.           </div>
  64.         </div>

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

  1. <div class="tools">
  2.       <div class="gotop">
  3.         <a href="javascript:;"> <i></i>返回顶部 </a>
  4.       </div>
  5.       <div class="suggest">
  6.         <a href="javascript:;"> <i></i>意见反馈 </a>
  7.       </div>
  8.     </div>
  9.     <div class="sugform">
  10.       <div class="sugtitle">
  11.         <p>您对<span class="curpage">"当前页面"</span>满意吗?</p>
  12.         <a href="javascript:;" class="close">&nbsp;</a>
  13.       </div>
  14.       <div class="check"></div>
  15.     </div>

然后这是js部分

  1. // 1.返回顶部淡入淡出
  2. $('.gotop').css('display', 'none')
  3. $(window).scroll(function() {
  4.     if($(this).scrollTop() >= $('.view h3').offset().top){
  5.         $('.gotop').stop().fadeIn(500)
  6.     } else {
  7.         $('.gotop').stop().fadeOut(500)
  8.     }
  9. })
  10. // 1.1利用自动以动画做带有缓冲效果的返回顶部
  11. $('.gotop').click(function() {
  12.     $('html').animate({scrollTop : 0}, 500)
  13. })
  14. // 2.意见反馈
  15. $('.suggest').click(function() {
  16.     $('.sugform').show(500)
  17. })
  18. $('.close').click(function() {
  19.     $('.sugform').hide(500)
  20. })
  21. // 3.最案例最重要内容 上下轮播
  22. function autoPlay() {
  23.     $('.wbdesc').prepend($('.wblist').last())
  24.     var move = $('.wblist').first().height()
  25.     $('.wbdesc').css('top',-move)
  26.     $('.wbdesc').delay(1000).animate({
  27.         top : 0
  28.     }, 1000,function() {
  29.         autoPlay()
  30.     })
  31. }
  32. autoPlay()

3.

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

html

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>notebook</title>
  7.     <link rel="stylesheet" href="./css/base.css" />
  8.     <link rel="stylesheet" href="./css/index.css" />
  9.   </head>
  10.   <body>
  11.     <section class="todoapp">
  12.       <header class="header">
  13.         <h1>记事本</h1>
  14.         <!-- 输入框 -->
  15.         <input
  16.           id="addTodo"
  17.           class="new-todo"
  18.           placeholder="请输入内容"
  19.           autofocus
  20.         />
  21.       </header>
  22.       <section class="main">
  23.         <!-- 容器 -->
  24.         <ul class="todo-list" id="todoList">
  25.           <!-- 模板 -->
  26.           <!-- <li>
  27.             <div class="view">
  28.               <label>模板</label>
  29.               <button class="destroy"></button>
  30.             </div>
  31.           </li> -->
  32.         </ul>
  33.       </section>
  34.       <footer class="footer">
  35.         <!-- 计数区域 -->
  36.         <span class="todo-count">
  37.           合计:
  38.           <strong>0</strong>
  39.         </span>
  40.       </footer>
  41.     </section>
  42.  
  43.     <script src="./libs/jquery-3.5.1.min.js"></script>
  44.     <script src="./js/index.js"></script>
  45.   </body>
  46. </html>

js部分

  1. // 1.新增功能
  2. $('.new-todo').keyup(function(e) {
  3.   if (e.keyCode == 13) {
  4.     var val = $(this).val()
  5.     // console.log(val);
  6.     if ($(this).val() != '') {
  7.       $('.todo-list').prepend('<li><div class="view"><label>'+val+'</label><button class="destroy"></button></div></li>')
  8.       $('.todo-list li').first().css('display', 'none').slideDown()
  9.     }
  10.     $(this).val('')
  11.   }
  12.   $('strong').text($('.todo-list').children().length)
  13. })
  14. // 2.删除功能
  15. $('.todo-list').on('click','.destroy', function() {
  16.   $(this).parent().parent().fadeOut(function() {
  17.     $(this).remove()
  18.     $('strong').text($('.todo-list').children().length)
  19.   })
  20. })

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

 

版权声明：本文为Heymar-10原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/heymar/p/16075888.html