jQuery常用方法总结【二】

2019年9月14日 178次阅读 来源: 楼子

元素的遍历

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

下图展示了一个家族树。通过 jQuery 遍历，你能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
《jQuery常用方法总结【二】》

<div id="div">
    <ul id="ul">
        <li id="li1">
            <b>111</b>
        </li>
        <li id="li2">
            <span id="span1"><b>222<b><span>
            <span id="span2"><b>333<b></span>
        </li>
    </ul>
</div>

1. parent() ： 返回被选元素的直接父元素。

  $("#span1").parent();  -> #li2 //span1的直接父元素就是li2

ps：一个元素只能有一个父元素，就是外面包裹着的那一个元素，但是可以有很多祖先，就是那外面一层层包裹着它的那些元素。一个元素也可以有很多子元素和孙元素。子元素是直接包裹的，子元素里面还有的元素那叫孙。比如，我们只能有一个父亲，可以有很多祖辈，也可以由很多儿子，儿子再生儿子女儿就是孙子。

2. parents() ： 返回被选元素的所有祖先元素。

$("#span1").parents(); -> #li2 #ul #div //返回span1的所有祖先元素，这爸爸当然也属于祖先里的一个啦。

3. parentUtil() ：返回介于被选元素和给定的元素之间的所有祖先元素。

$("#span1").parentUtil("#div1"); -> #li2 #ul //这夹在span1和div1之间的祖先就只有li2和ul了。

上面的三个方法是找父亲找祖先的方法，它们是沿着DOM树往上遍历。

4. children() ：返回被选元素的所有直接子元素。

$("#li2").children(); -> #span1 #span2 //li2的直接子元素只有#span1和#span2,里面的b元素是孙了。

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

$("ul").find("*");
->   返回#li1，#li2，#span1,#span2,<b>111</b>，<b>222</b>，<b>333</b>
这是ul元素下面的所有子孙元素。
$("ul").find("span");
->   返回所有的span子孙元素，#span1，#span2。

上面的两个方法是找子孙元素的方法，它们是沿着DOM树往下遍历。

6. siblings() ：返回被选元素的所有同胞元素。(可带参数)

$("#span1").siblings();  -> span2  #span1的同胞元素只有span2。

7. next() ：返回备选元素的下一个同胞元素。（可带参数）

$("#span1").next();  -> #span2    
#span1的下一个同胞元素是#span2，这个方法仅返回一个元素，同时也可以指定参数，比如$("#span1").next("p");是寻找#span1的下一个P同胞元素。这个例子里面找不到span1的下一个为p的同胞元素。

8. nextAll() ： 返回被选元素后的所有跟随元素。
这个方法只返回被选元素后面的所有同胞元素，并不会返回位于被选元素前的同胞元素，而siblings()就可以返回所有同胞元素。

9. nextUtil() ：返回介于被选元素和给定参数之间的所有同胞元素。
用法：$(“#span1”).nextUtil(“#span3”);
这是寻找span1和span3之间的所有的同胞元素，在上述例子中没有写span3，但是如果在span2后面加个span3的话，那这句话就是返回span2元素。

10. prev(),prevAll(),prevUtil() ：这三个方法与上面的几个方法相同，不过遍历方向相反，是向前遍历，返回前面的同胞元素。

上面七个方法是水平向中遍历DOM树。

11. first() ： 返回与被选元素匹配的首个元素。

$("li").first(); -> #li1
这个方法返回了从html文档找到的第一个li元素，就是li1。

12. last() : 返回与被选元素匹配的最后一个元素。与first()相反。

13. eq() ：返回等于第几个索引号的元素，（索引号从0开始）。

比如： $("li").eq(1); -> #li2
这个例子返回的是文档中的第二个li元素，因为元素的索引从0开始。

14. filter() ：允许规定一个标准，不匹配这个标准的会被从集合中删除，匹配的则返回。

比如：$("li").filter("#li1"); ->#li 返回所有的li元素中id为li1的元素。
     $("li").filter(".intro"); -> 返回所有li元素中类名为“.intro”的元素。

15. not() ：与filter的作用相反，返回所有不匹配标准的元素。

上面的五个方法可以缩小搜索的范围，迅速精准的找到元素。

    原文作者：楼子
    原文地址: https://segmentfault.com/a/1190000013980220
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞