jQuery 遍历函数

jQuery 遍历函数

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年4月27日

什么是遍历：jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML
元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

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

遍历—过滤

三个最基本的过滤方法是：first(),
last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter()
和 not() 允许您选取匹配或不匹配某项指定标准的元素。

eq(index|-index):获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，

.eq() 获取指定索引位置的元素 0为第一个元素，1为第二个元素，-1为倒数第一个元素

var sEq = $(“ul li”).eq(0);
第一个元素

var sEq1 = $(“ul li”).eq(1);
第二个元素

var sEq2 = $(“ul li”).eq(-1);
倒数第一个元素

类似的有get(index),不过get(index)返回的是DOM对象。

参数说明：index 一个整数，指示元素基于0的位置,这个元素的位置是从0算起。

-index 一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(-1算起)

.first() 将匹配元素集合缩减为集合中的第一个元素。

var sFirst = $(“ul li”).first(); //第一个元素

.last() 将匹配元素集合缩减为集合中的最后一个元素。

var sLast = $(“ul li”).last();
//最后一个元素

来看一下jQuery 遍历函数中几种方法制作的小案例，代码截图如下：

每个方法的使用都会呈现出不同的效果，下面看其他函数方法的描述：

…not() 删除与指定表达式匹配的元素

.filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。（这个方法用于缩小匹配的范围。用逗号分隔多个表达式）

…has() 保留包含特定后代的元素，去掉不含有指定后代的元素

.hasClass() 检查当前的元素是否含有某个特定的类，若有，则返回true

.is() 据选择器、DOM元素或jaQuery对象来检测匹配元素集合，若其中至少有一个元素符合这个给定的表达式就返回true

.map() 将一组元素转换成其他数组（不论是否是元素数组）

.slice() 选取一个匹配的子集 参数：start 、end

start–开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。

end—结束选取自己的位置，如果不指定，则就是本身的结尾。

遍历—查找

.children() 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

.find() 搜索所有与指定表达式匹配的后代元素。

.closest() 从元素本身开始，逐级向上级元素匹配，并返回先匹配的元素。。

.offsetParent() 返回第一个匹配元素用于定位的父节点。

.parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合。

.parents() 取得一个包含着所有匹配元素的祖先元素的元素集合。可以通过一个 可选的表达式进行筛选。

.parentsUntil() 查找当前元素的所有的父级元素，直到遇到匹配的那个元素为止。(不 包含匹配元素。无参情况下和parents()无参情况相同)

.next() 匹配元素集中每个元素的下一个同级元素。

.nextall() 查找当前元素之后所有的同级元素。

.nextUntil() 查找当前元素之后所有的同级元素，直到遇到匹配的那个元素为止。 (不包含匹配元素)

.prev() 匹配元素集中每个元素的上一个同级。

.prevall() 查找当前元素之前所有的同级元素

.prevUntil() 查找当前元素之前所有的同级元素，直到遇到匹配的那个元素为止。 (不包含匹配元素)，与 next() nextAll()
nextUntil()用法一致，只是查找方法相反

.siblings() 匹配元素集中每个元素的同级元素, 可选择由选择器进行筛选。

遍历—串联

.add() 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接 分别与两个表达式匹配的元素结果集。

.andSelf()
加入先前所选的加入当前元素中

.addBack() 加入先前所选的加入当前元素中

.contents()
查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个 iframe，则查找文档内容（和JavaScript中childNodes的效果一致）

.end() 一般配合操作使用。

最后是代码实现的效果图，第二个li标签设置的背景颜色为蓝色，当点击蓝色部分时，颜色变为绿色。点击其他的变为红色。根据first(), last() 和 eq() 三个基本的过滤方法分别给元素设置了字体大小、字体颜色。

见效果图截图如下（从左到右）：