4.7-jQuery中的each方法

each方法

each: jQuery 中的 each 方法时用来进行遍历的，和数组的 forEach 方法类似
可遍历内容

1. 数组

$.each([12, 23, 34], (index, item) => {
  // => 这个小函数叫做回调函数，回调函数的参数和数组的 forEach 方法相反
  console.log(index, item);
});

2. 对象

$.each({name: '珠峰', age: '11', 1: 100}, (key, value) => {
  // => 原理其实就是 for in 循环
  console.log(key, value);
});

3. 类数组集合（jq对象）

$('.tabBox li').each(function (index, item) {
  // 非箭头函数，this === item 当前遍历的这一项（原生 js 元素对象）
  // $(this) 把当前遍历的这一项转换为 jq 对象；
  $(this).click(function () {
    // 给每一个遍历的 li 都绑定一个点击事件
    // this 这个函数中的 this 是当前点击的 li（原生 js 元素对象）
    $(this).css({
      color: 'red'
    })
  })
});

隐式调用

$('.tabBox li').click(function (index, item) {
  // 获取的 jq 集合中有三个，jq 会判断，如果是一个元素对象就处理这个元素对象，如果是一个集合例如我们此处相当于给三个 li，会默认把集合进行 each 遍历，把每一项都绑定了 click 事件，在这个回调函数中 this 仍然指向点击的元素（原生对象），如果想调用 jq 上的方法，需要用$(this)才行
  $(this).css({
    background: 'red'
  })
})