jQuery遍历DOM

时间:2021-08-08 19:27:56

jQuery提供了多种遍历DOM的方法。遍历方法中最大的种类是树遍历。

  • 向上遍历DOM树

parent():返回被选元素的直接父元素

parents():返回被选元素的所有祖先元素,它一直遍历到根元素(<html>)

parentsUntil():返回介于两个元素之间的所有祖先元素。例$("span").parentsUntil("div"),返回介于<span>与<div>元素之间的所有祖先元素;如果不填写参数,则效果等同于parents方法。

  • 向下遍历DOM树

children():返回被选元素的所有直接子元素。该方法只会向下一级对DOM树进行遍历。

另外,还可以使用参数来过滤对子元素的搜索。例:$("div").children("p.demo"),返回类名为demo的所有<p>元素,并且它们是<div>的直接子元素。

find():返回被选元素的后代元素,一路向下直到最后一个后代。

例:

$("div").find("span");--返回所有属于<div>后代的所有<span>元素
$("div").find("*");--返回所有<div>的后代
  • 在DOM树种水平遍历

同胞拥有相同的父元素

siblings():返回被选元素的所有同胞元素

next():返回被选元素的下一个同胞元素,该方法只返回一个元素

nextAll():返回被选元素的所有跟随的同胞元素

nextUntil():返回介于两个给定参数之间的所有跟随的同胞元素

 

prev()、prevAll()、prevUntil()方法工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素。

  • 在DOM树种过滤

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

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

first()方法返回被选元素的首个元素。例如:$("div p").first();--选取首个<div>元素内部的第一个<p>元素

last()方法返回被选元素的最后一个元素。例如:$("div p").last();--选取最后一个<div>元素中的最后一个<p>元素

equ()方法被选元素中带有指定索引号的元素。索引号从0开始。

filter()方法允许你规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

例如:$("p").filter(".intro");---返回带有类名"intro"的所有<p>元素

not()方法返回不匹配标准的所有元素