jQuery - 遍历

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法

| 函数 | 描述 | | :--- | :--- | | .add() | 将元素添加到匹配元素的集合中。 | | .andSelf() | 把堆栈中之前的元素集添加到当前集合中。 | | .children() | 获得匹配元素集合中每个元素的所有子元素。 | | .closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。 | | .contents() | 获得匹配元素集合中每个元素的子元素，包括文本和注释节点。 | | .each() | 对 jQuery 对象进行迭代，为每个匹配元素执行函数。 | | .end() | 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。 | | .eq() | 将匹配元素集合缩减为位于指定索引的新元素。 | | .filter() | 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 | | .find() | 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。 | | .first() | 将匹配元素集合缩减为集合中的第一个元素。 | | .has() | 将匹配元素集合缩减为包含特定元素的后代的集合。 | | .is() | 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。 | | .last() | 将匹配元素集合缩减为集合中的最后一个元素。 | | .map() | 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。 | | .next() | 获得匹配元素集合中每个元素紧邻的同辈元素。 | | .nextAll() | 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选(可选)。 | | .nextUntil() | 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。 | | .not() | 从匹配元素集合中删除元素。 | | .offsetParent() | 获得用于定位的第一个父元素。 | | .parent() | 获得当前匹配元素集合中每个元素的父元素，由选择器筛选(可选)。 | | .parents() | 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选(可选)。 | | .parentsUntil() | 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。 | | .prev() | 获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选(可选)。 | | .prevAll() | 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选(可选)。 | | .prevUntil() | 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。 | | .siblings() | 获得匹配元素集合中所有元素的同辈元素，由选择器筛选(可选)。 | | .slice() | 将匹配元素集合缩减为指定范围的子集。 |

获得兄弟元素的几种方法

```js // 获取某个li的前一个兄弟元素 $(this).prev("li").css("backgroundColor", "greenyellow");

// 获取某个li的前面的所有的兄弟元素 $(this).prevAll("li").css("backgroundColor", "red");

// 获取某个li的下一个兄弟元素 $(this).next("li").css("backgroundColor", "yellowgreen"); // 获取某个li的后面的所有的兄弟元素 $(this).nextAll("li").css("backgroundColor", "red");

// 获取当前的li的所有的兄弟元素 $(this).siblings("li").css("backgroundColor", "gray");

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

```

获得子元素的写法

js $(this).children("ul").show(500)

遍历

jquery对象.each(function(index,element){})

• index: 就是元素在集合中的索引
• element: 就是集合中的每一个元素对象
• $(this): 集合中的每一个元素对象
• 回调函数返回值
  • true: 如果function返回为true，则结束本次循环，继续下次循环(continue)
  • false: 如果function返回为false，则结束循环(break)

$("ul>li").click() 不用遍历每个li都能触发点击事件，这是为什么呢？
因为 隐式迭代 -- 内部帮助我们循环遍历做操作 ```js

• 1
• 2
• 3
• 4
• 5
• 6

```

```js

• 1
• 2
• 3
• 4
• 5
• 6

⚠️**注意:** each方法就是用来遍历jQuery对象的,但是,里面的每个对象最开始都是DOM对象,如果想要使用jQuery的方法,需要把DOM对象转jQuery对象 js $(element) $(this) ```

for...of

• jquery 3.0 版本之后提供的方式
• for(元素对象 of 容器对象)