什么是遍历?
jQuery遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML元素。以某项选择开始,并沿着这个选择移动,直到抵达期望的元素为止。
通过jQuery遍历,能够从被选(当前)元素开始,在家族树向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对DOM进行遍历。
家族树:
祖先
向上遍历DOM树
parent()-方法返回被选元素的直接父元素。只向上一级对DOM树进行遍历。
parents()-方法返回被选元素的所有祖先元素,一路向上直到文档的根元素(<html>
)。也可以使用可选参数来过滤对祖先元素的搜索。
例如:$("span").parents("ul");
解释:返回所有<span>
元素的所有祖先,并且它是<ul>
元素。
parentsUntil()-方法返回介于两个给定元素之间的所有祖先元素。
例如:$("span").parentsUntil("div");
解释:返回介于<span>
与<div>
元素之间的<span>
的所有祖先元素。
后代
向下遍历DOM树
children()-方法返回被选元素的所有直接子元素。只向下一级DOM树进行遍历。
例如:$("div").children();
解释:返回每个<div>
元素的所有直接子元素。
也可以使用可选参数来过滤对子元素的搜索。
例如:$("div").children("p.1");
解释:返回类名为“1”的所有<p>
元素,并且他们是<div>
的直接子元素。
find()-方法返回被选元素的后代元素,一路向下直到最后一个后代。
例子:$("div").find("span");//返回属于<div>后代的所有<span>元素
例子:$("div").find("*");//返回<div>的所有后代
同胞
在DOM树中水平遍历
siblings()-方法返回被选元素的所有同胞元素。
例子:$("h2").siblings();//返回<h2>所有同胞元素
可以使用可选参数来过滤对同胞元素的搜索。
例子:$("h2").siblings("p");//返回属于<h2>的同胞元素的所有<p>元素
next()-方法返回被选元素的下一个同胞元素。只返回一个元素。
例子:$("h2").next();
nextAll()-方法返回被选元素的所有跟随的同胞元素。
nextUntil()-方法返回介于两个给定参数之间的所有跟随的同胞元素(不包含)
prev()、prevAll()和prevUntil()方法与上边的方法和工作方式相似,向前。
过滤
最基本的三个过滤方法:first(),last()和eq(),允许基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法:filter()和not()允许选取匹配或不匹配某项指定标准的元素。
first()-方法返回被选元素的首个元素。
例子:$("div p").first();//选取首个<div>元素内部的第一个<p>元素
last()-方法返回被选元素的最后一个元素。
例子:$("div p").last();//选择最后一个<div>元素中的最后一个<p>元素
eq()-方法返回被选元素中带有指定索引号的元素。
例子:$("p").qe(1);//选取第二个<p>元素(索引号1)
filter()-方法允许规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
例子:$("p").filter(".intro");//返回带有类名"intro"的所有<p>元素
not()-方法返回不匹配标准的所有元素。与filter()方法相反。
例子:$("p").not(".intro");//返回不带有类名"intro"的所有<p>元素