选项卡 jQuery 版本

html 代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <link rel="stylesheet" href="css/reset.min.css">
  7.   <link rel="stylesheet" href="css/index.css">
  8. </head>
  9. <body>
  10. <div class="tabBox" id="tabBox">
  11.   <ul class="header clearfix">
  12.     <li class="active">新闻</li>
  13.     <li>电影</li>
  14.     <li>音乐</li>
  15.   </ul>
  16.   <div class="active">实时新闻</div>
  17.   <div>最新电影</div>
  18.   <div>欧美音乐</div>
  19. </div>
  20. <script src="js/jquery.min.js"></script>
  21. <script src="js2/9-jq选项卡.js"></script>
  22. </body>
  23. </html>

css代码

  1. .tabBox {
  2.   margin: 20px auto;
  3.   width: 602px;
  4. }
  5. .tabBox ul {
  6.   box-sizing: border-box;
  7.   border: 1px solid black;
  8. }
  9. .tabBox ul > li {
  10.   box-sizing: border-box;
  11.   float: left;
  12.   width: 200px;
  13.   border-right: 1px solid black;
  14.   font-size: 16px;
  15.   text-align: center;
  16.   line-height: 40px;
  17.   cursor: pointer;
  18. }
  19. .tabBox ul li:nth-last-child(1) {
  20.   border-right: none;
  21. }
  22. .tabBox ul > li.active {
  23.   background: yellow;
  24. }
  25. .tabBox div {
  26.   display: none;
  27.   font-size: 20px;
  28.   line-height: 200px;
  29.   border: 1px solid black;
  30.   text-align: center;
  31. }
  32. .tabBox div.active {
  33.   display: block;
  34. }
  35. .animate {
  36.   height: 100px;
  37.   text-align: center;
  38.   background: greenyellow;
  39. }

js代码

  1. $(function ($) {
  2.   // 1. 获取元素
  3.   let $tabList = $('.header li'),
  4.     $divList = $('.tabBox div');
  5.   // 2. 绑定点击事件
  6.   $tabList.click(function () {
  7.     let index = $(this).index(); // 获取当前点击的 li 的索引
  8.     // 为点击的li增加类名 active 并且把其兄弟元素的 active 类名移除
  9.     $(this).addClass('active').siblings().removeClass('active');
  10.     // 通过被点击 li 的索引，找到对应的 div，为其增加 active，并且移除其兄弟元素的 active 类名
  11.     $divList.eq(index).addClass('active').siblings().removeClass('active');
  12.   })
  13. });

DOMContenLoaded

  1. $(function ($) {
  2.   // 等效于 DOMContentLoaded 事件，表示文档的 HTML 结构加载完成，然后再执行这里面的代码，同时把 jq 当做参数传递进来。
  3.   // 这里面写我们自己的代码
  4. });

链式调用、原理

jQuery 的链式调用
$(this).addClass(‘active’).siblings().removeClass(‘active’);
jQuery 很多方法可以实现链式调用，原理是因为在其方法内部 return this，而 this 是 jq 的实例，所以可以继续调用 jq 原型上的方法。但是要注意很多方法最后 return 的不是 this，而是一个具体的值，如 width() 方法返回一个数字，就不能继续调用方法。

  1. // 链式调用示例：
  2. let obj = {
  3.   init(num) {
  4.     this.num = num;
  5.     return this
  6.   },
  7.   add(x) {
  8.     this.num += x;
  9.     return this;
  10.   },
  11.   multiple(t) {
  12.     this.num *= t;
  13.     return this;
  14.   },
  15.   div(d) {
  16.     this.num /= d;
  17.     return this
  18.   },
  19.   getVal() {
  20.     return this.num
  21.   }
  22. };
  23. console.log(obj.init(3).add(9).multiple(4).div(4));
  24. console.log(obj.init(3).add(9).multiple(4).getVal().div()); // Uncaught TypeError:  obj.init(...).add(...).multiple(...).getVal(...).div is not a function 【因为getVal返回的是一个数字，不是this了，所以后面不能继续调用div方法】