jQuery 遍歷函式包括了用於篩選、查詢和串聯元素的方法。

向下遍歷方法

• .children() 獲得匹配元素集合中每個元素的所有子元素；
• .find() 獲得當前匹配元素集合中每個元素的後代，由選擇器進行篩選；

style.css 設定樣式

#div1{
    width:500px;
    height:200px;
    border:3px solid fuchsia;
}
#div2{
    width:400px;
    height: 150px;
    margin-top:10px;
    margin-left
 
:10px;
    border:3px solid fuchsia;
}
p{
    margin-left:10px;
    margin-top:10px;
    width:150px;
    height:80px;
    border:3px solid fuchsia;
}

TraversingDown.html

    <div id="div1">div1
        <div id="div2">div2
            <p>
                <a>
                    hello
                </a
 
>
            </p>
        </div>
    </div>

TraversingDown.js

/*
向下遍歷的方法
* children
* find*/
$(document).ready(function () {
   $("#div1").children("p").css({   //#div2是可選引數,只能是下一級，不能越級
       border:"3px solid red"
   });

    // $("#div1").find("a").css({   //p是必選引數，可以是任一層級
    //     border:"3px solid red"
 

    // });
});

向上遍歷方法

• .parent() 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。
• .parents() 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。
• .parentsUntil() 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。

TraversingUp.html

<div id="div1">div1
    <div id="div2">div2
        <p>
            <a>
                hello
            </a>
        </p>
    </div>
</div>

TraversingUp.js

/*
* 向上遍歷的方法
* parent()
* parents()
* parentsUntil()
* */
$(document).ready(function () {
  // $("a").parent().css({border:"3px solid red"})    //只能指向向上一級的父級元素；
 // $("a").parents().css({border:"3px solid red"})    //向上遍歷所有的父級元素，也可設定引數指定；
  $("a").parentsUntil("#div1").css({border:"3px solid red"})    //指定區間；
});

同級遍歷

• siblings() 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。
• next() 獲得匹配元素集合中每個元素緊鄰的同輩元素。

• nextAll() 獲得匹配元素集合中每個元素之後的所有同輩元素，由選擇器進行篩選（可選）。

• nextUntil() 獲得每個元素之後所有的同輩元素，直到遇到匹配選擇器的元素為止。

• prev() 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。
• prevAll()獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。
• prevUntil()獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。

過濾

• first()將匹配元素集合縮減為集合中的第一個元素。
• not()從匹配元素集合中刪除元素。
• last()將匹配元素集合縮減為集合中的最後一個元素。
• filter()將匹配元素集合縮減為匹配選擇器或匹配函式返回值的新元素。
• eq() 將匹配元素集合縮減為位於指定索引的新元素。