eq(): 表示选中元素大队列的排名 , 选中元素不同, 序号也是不同
index(): 亲兄弟的排名 . 无视亲兄弟的类型 , 值非常稳定`
each() : 表示”每一个” , 会遍历 . 循环区配到的每一个元素 , 接受一个参数就是匿名函数
函数中有一个参数i , 辨识遍历到该对象的序号

1.1 eq()

  1. <div class="box">
  2.   <p></p>
  3.   <p></p>
  4.   <p></p>
  5.   <p></p>
  6. </div>
  7. <script src="js/jquery-1.9.1.js"></script>
  8. <script type="text/javascript">
  9.   //点击div 让它的第一个儿子变色
  10.   $("div").click(function(){
  11.     $(this).children().eq(0).css("backgroundColor","red")
  12.   });
  13. </script>

eq() : 选中元素大队列的排名 , 与亲兄弟的排名没有直接关系
Eq() : 选中元素不同,序号也是不相同的

  1. <div class="box">
  2.   <p></p>
  3.   <p></p>
  4.   <p></p>
  5.   <p></p>
  6. </div>
  7. <div class="box">
  8.   <p></p>
  9.   <p class="teshu">teshu</p>
  10.   <p class="teshu">teshu</p>
  11.   <p></p>
  12.   <p></p>
  13.   <p></p>
  14. </div>
  15. <script>
  16.   //所有在div内所有p的元素进行一个排序
  17.   $("div").click(function(){
  18.     $("p").eq(4).css("backgroundColor","red");
  19.   })
  21.   //所有在div内所有p的元素进行一个排序
  22.   $("div").click(function(){
  23.     $(".teshu").eq(1).css("backgroundColor","red");
  24.   })
  25.   //Eq() : 选中元素不同,序号也是不相同的
  26.   $(".teshu").eq(0).css("backgroundColor","red");
  27. </script>

1.2 index()亲兄弟的排名

Index() : 表示亲兄弟的排名 , 无视清闲哦那工地的类型, 只要是同一个父亲节点就是亲兄弟.

Dom结构:

  1. <div class="box">
  2.   <ul>
  3.     <li></li>
  4.   </ul>
  5.   <h3></h3>
  6.   <p></p>
  7.   <p></p>
  8.   <p id="teshu" class="teshu">输出亲兄弟的排名</p>
  9.   <p></p>
  10. </div>

执行代码:

  1. //点击teshu输出亲兄弟的排名序号
  2. $("#teshu").click(function(){
  3.   console.log($(this).index());
  4. })

输出结果:

image.png

Index() 的值非常稳定 , 无视选择器的各种选择

Dom结果:

  1. <div class="box">
  2.   <p></p>
  3.   <p id="teshu" class="teshu"></p>
  4.   <p id="teshu" class="teshu"></p>
  5.   <p></p>
  6.   <p></p>
  7. </div>
  8. <div class="box1" id="box1">
  9.   <p></p>
  10.   <p id="teshu" class="teshu"></p>
  11.   <p id="teshu" class="teshu">弹出亲兄弟的排名</p>
  12.   <p></p>
  13.   <p></p>
  14. </div>

执行代码:

  1. //弹出亲兄弟的排名
  2. $(".box1 p").click(function () {
  3.   console.log($(this).index());
  4. })
  5. $(".teshu").click(function(){
  6.   console.log($(this).index());
  7. })

输出结果:

image.png

对应思想: 编程中比较常用的一种就是对应思想

Dom结构:

  1. <div class="box" id="hezi1">
  2.   <p></p>
  3.   <p ></p>
  4.   <p></p>
  5.   <p></p>
  6. </div>
  7. <div class="box " id="hezi2" >
  8.   <p></p>
  9.   <p ></p>
  10.   <p></p>
  11.   <p></p>
  12. </div>

执行代码:

  1. //点击box中的p 对应的box1中的p改变颜色
  2. $("#hezi1 p").click(function () {
  3.   console.log($(this).index());
  4.   $("#hezi2 p").eq($(this).index()).css("backgroundColor","red")
  5. })

结果:

image.png

实列选项卡

  1. <head>
  2.   <style>
  3.     * {
  4.       padding: 0;
  5.       margin: 0;
  6.     }
  8.     .box {
  9.       width: 300px;
  10.       height: 300px;
  11.       border: 1px solid #000;
  12.       margin: 50px auto;
  13.     }
  15.     .box .hd {
  16.       height: 40px;
  17.     }
  19.     .box .hd span {
  20.       float: left;
  21.       width: 99px;
  22.       height: 39px;
  23.       border-right: 1px solid #000;
  24.       border-bottom: 1px solid #000;
  25.       line-height: 39px;
  26.       text-align: center;
  27.       background-color: #eee;
  28.     }
  30.     .box .hd span:last-child {
  31.       border-right: none;
  32.     }
  34.     .box .hd span.cur {
  35.       background-color: #fff;
  36.       border-bottom: none;
  37.       font-weight: bold;
  38.     }
  40.     .box .bd {
  41.       height: 260px;
  42.     }
  44.     .box .hd div {
  45.       display: none;
  46.     }
  48.     .box .hd div.active {
  49.       display: block;
  50.     }
  51.   </style>
  52. </head>
  54. <body id="body">
  55.   <div class="box">
  56.     <div class="hd" id="hd">
  57.       <span class="cur">新闻</span>
  58.       <span>体育</span>
  59.       <span>时尚</span>
  60.     </div>
  61.     <div class="bd" id="bd">
  62.       <div class="active">新闻</div>
  63.       <div>体育</div>
  64.       <div>时尚</div>
  65.     </div>
  66.   </div>
  67.   <div class="box">
  68.     <div class="hd" id="hd">
  69.       <span class="cur">新闻</span>
  70.       <span>体育</span>
  71.       <span>时尚</span>
  72.     </div>
  73.     <div class="bd" id="bd">
  74.       <div class="active">新闻</div>
  75.       <div>体育</div>
  76.       <div>时尚</div>
  77.     </div>
  78.   </div>
  79.   <script src="js/jquery-1.9.1.js"></script>
  80.   <script type="text/javascript">
  81.     //当鼠标移入hd 里的span   当前span加cur,  让bd中div 加active
  82.     //绑定鼠标移入事件
  83.     //写法1                   
  84.     /*  $("#hd span").mouseenter(function () {
  85.              //当前span 加cur
  86.              $(this).addClass("cur");
  87.              //排他
  88.              $(this).siblings().removeClass("cur");
  90.              //bd中对应div 加active
  91.              $("#bd div").eq($(this).index()).addClass("active").siblings().removeClass("active")
  93.              //一般我们习惯使用节点操作
  94.              $(this).parent(".bd").siblings(".bd").children("div").eq($(this).index()).addClass("active").siblings().removeClass("active");
  95.          }) */
  96.     //简化代码写法2   节点操作 父节点 兄弟节点         
  97.     $("#hd span").mouseenter(function () {
  98.       $(this).addClass("cur").siblings().removeClass("cur").parent().siblings().children().eq($(this).index()).addClass("active").siblings().removeClass("active");
  99.     })
  100.   </script>
  101. </body>

输出结果: 有交互效果
image.png

1.3 each()用于循环遍历所区配的单词

each() : 表示 “每一个” . 用于循环. 遍历所区配到的每一个元素 , 接受一个参数就是: 匿名函数 , 函数当中也有一个 this , 表示遍历到的该对象.

Dom结构:

  1. <div class="box">
  2.   <p></p>
  3.   <p></p>
  4.   <p></p>
  5.   <p></p>
  6. </div>
  7. <div class="box">
  8.   <p></p>
  9.   <p></p>
  10.   <p></p>
  11.   <p></p>
  12. </div>
  13. <div class="box">
  14.   <p></p>
  15.   <p></p>
  16.   <p></p>
  17.   <p></p>
  18. </div>
  19. <div class="box">
  20.   <p></p>
  21.   <p></p>
  22.   <p></p>
  23.   <p></p>
  24. </div>

执行代码

  1. $('div').each(function(){
  2.   // console.log(this);
  3.   // console.log($(this));
  4.   // $(this).children().eq(0).css('backgruondColor',"red")
  5.   $(this).children().eq(1).css('backgroundColor',"red");
  6. })

结果:
image.png image.png

小案列: 隔列变色

Dom结构:
(table>tr.teshu>td4)4
执行代码:

  1. //要求 隔列变色
  2. $('tr').each(function(){
  3.   console.log(this);
  4.   $(this).children("td:odd").css("backgroundColor","red")
  5.   $(this).children("td:even").css("backgroundColor","blue")
  6. })

结果:
image.png

each() 的参数是一个函数, 函数中有一个参数i 标识遍历到该对象的序号

小案列2 隔行变色

  1. //遍历特殊元素
  2. $('.teshu').each(function(i){
  3.   console.log(i)
  4. })

image.png image.png