jQuery第七节---jquery遍历

什么是遍历？

jQuery遍历，意为"移动"，用于相对于根据其他元素的关系来“查找”(或选取)“html”元素。以某项开始并沿着这个选择移动，直到达到你所期望的元素为止。

遍历DOM:jQuery提供了多种遍历DOM的方式：遍历方法中最大的遍历是树遍历(tree-traversal);

1.jQuery遍历祖先：祖先是父-祖父-曾祖父等

向上遍历DOM树

这些jQuery方法，他们用于向上遍历DOM树

parent()

parents()

parentsUntil()

(1)jQuery parent()方法返回被选元素的直接父元素    ----该方法只会向上一级对DOM树遍历！

(2)jQuery parents()方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素！

(3)jQuery parentsUntil()方法parentsUntil用于返回介于两个给定元素之间的所有祖先元素！

 $("span").parentsUntil("div")返回介于span和div之间的所有祖先元素！

2.jQuery遍历后代：后代是子、孙、曾孙等

向下遍历DOM树

这些jQuery方法，他们用于向下遍历DOM树

children()

find()

(1)jQuery children()方法

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

使用参数来过滤对子元素的搜索：

  $("div").children("p.1");

返回类名为1的所有p元素，并且他们是div的直接子元素

jQuery find()方法

find()方法返回被选元素的后代元素，一路向下直到最后一个后代！

返回div后代的所有span元素

 $("div").find("span");

3.jQuery遍历，同胞：同胞拥有相同的父亲元素

在DOM树中水平遍历

在DOM树进行水平遍历方法：

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

(1)jQuery siblings()方法

siblings返回被选元素的所有同胞元素---不包括他自己

可以使用参数来过滤对同胞元素的搜索：

$("h2").siblings("p");

返回属于h2的同胞元素的所有p元素

(2)jQuery next()方法返回被选元素的下一个同胞元素---该方法只返回一个元素

  $("h2").next();

(3)jQuery nextAll()该方法返回被选元素的所有跟随的同胞元素

 $("h2").nextAll();

返回h2标签下所有同级元素

(4)jQuery nextUntil()方法

nextUntil()方法返回介于两个参数之间得所有跟随得同胞元素!

  $("h2").nextUntil("h6");

返回介于<h2><h6>元素之间的所有同胞元素

(5)jQuery prev()方法，prevAll()方法，prevUntil()方法，效果与前边类似返回的是前面的同胞元素

4.jQuery遍历---过滤

缩写搜索元素的范围

三个最基本的过滤方法是：first(),last()和eq(),他们允许您基于其在一组元素中的位置来寻找特定元素。其他过滤方法，比如filter()和not()

允许您选取匹配或不匹配某项指定标准的元素！

(1)jQuery fast()方法

fast()方法返回被选元素的首个元素！

  $("div p").first();

选取首个div元素内部的第一个P元素

(2)jQuery last()方法

last()方法返回被选元素的最后一个元素

 $("div p").last();

下面的例子返回最后一个div 元素的最后一个p元素

(3)jQuery eq()方法

eq()方法返回被选元素中带有指定索引号的元素。

索引号从0开始，因此首个元素的索引号是0而不是1

  $("p").eq(1);

选取第二个p元素

(4)jQuery filter()方法

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

  $("p").filter(".intro");

下面的例子返回带有类名“intro”的所有“p”元素

(5)jQuery not()方法

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

not()方法与filter()方法相反

  $("p").not(".intro");

下面的例子返回不带有类名"intro"的所有p元素