遥远的jQuery（五） | 一起学系列

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情 

本期开始我们继续复盘jQuery语法

• eq（）方法
  • JQuery中获得的对象，内部包含选择的一组原生JS对象，在jQuery对象中会进行一个大的排序，这个排序与原来的HTML结构没有关系
  • eq（）方法在jQuery对象中通过下标获取某个对象，下标是JQuery对象中的大的排序的下标
• index（）方法
  • jQuery对象调用index（）方法时，得到的是它自己在HTML结构中的兄弟中的下标位置。与jQuery大排序没有关系，它依赖于自身元素在父级总同级元素之间的位置
• 小案例：Tab栏特效中的排他
  • 自己的级别的排他：给自己this添加current类名，让其他的兄弟删除current类
  • 对应的部分的排他：给对应位置的元素添加current，其他的兄弟删除current类
  • 找对应关系，使用的是自己的index（）下标，让另一组中下标相同的项作为对应项
  • 通过选中另一组的对应项利用eq（）方法选择下标项
  • 问题：以上方式在一个tab栏效果中没有问题
    • 在一个网页中，可能会出现多个相同tab栏结构，只有第一个tab栏中的列表项会进行切换
    • 解决方法：span和ul的查找全部使用链式调用，通过节点关系查找
• each（）遍历
  • 参数是一个函数
  • 作用：对jQuery对象中的每一个都执行函数内部的操作
  • each（）方法的基本原理就是for循环，从对象的下标为0的项一直遍历到最后一项，然后对每一项进行操作
  • 优点1：
    • each的函数内部，也有一个this，指向的是进来遍历的每一次的元素
    • 案例：让每一个div内部的第二个元素变红
  • 优点2：
    • each的函数可以传一个参数i，i表示的是这一次的遍历对象在整体的jQuery对象大排队中的下标位置
• 小案例：表格隔行变色