jQuery經常使用方法總結【二】

元素的遍歷

jQuery 遍歷，意爲「移動」，用於根據其相對於其餘元素的關係來「查找」（或選取）HTML 元素。以某項選擇開始，並沿着這個選擇移動，直到抵達您指望的元素爲止。

下圖展現了一個家族樹。經過 jQuery 遍歷，你可以從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱爲對 DOM 進行遍歷。

<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的做用相反，返回全部不匹配標準的元素。

上面的五個方法能夠縮小搜索的範圍，迅速精準的找到元素。