使用jQuery，可以 很容易的選擇HTML元素。但有些時(shí)候，在HTML結(jié)構(gòu)較為復(fù)雜時(shí)，提煉我們選擇的元素就是一件麻煩的事情。在這篇教程中，我們將探討十種方 法去精煉和擴(kuò)展我們將要操作的集合。
HTML
首先，讓我們看看下圖所示的簡(jiǎn)單的頁面，通過這個(gè)教程我們將選擇這些元素。
div.container是包裹元素；
div.photo、div.title、div.rating是div.container的直接子級(jí)；
每個(gè)div.star是div.rating的子級(jí)；
當(dāng)div.satr的class為“on”時(shí)， 它是一個(gè)完整的star。
為什么要遍歷？
“為什么我們要進(jìn)一步提煉一系 列元素，難道是jQuery選擇語法不夠 強(qiáng)大？”
好，讓我們從示例開始。在上面提到的網(wǎng)頁中，當(dāng)一個(gè)star被 點(diǎn)擊時(shí)，我們需要給它以及左邊的每個(gè)star添加class“on”。與此同時(shí)，我們要改變所有star父元素的背景顏色，因此，我們的代碼如下：
$('.star').click(function(){
$(this).addClass('on');
// 如何選取當(dāng)前對(duì)象的 父元素?
// 如何獲得當(dāng)前star左側(cè)所有的star?
});
在第二行，我們得到了我們點(diǎn)擊的當(dāng)前對(duì)象。但是，如 何得到stars的父級(jí)？即div.rating。但是，在一個(gè)頁面中，有很多div.rating。哪一個(gè)是我們想要的？如何獲得“this”左邊所有的star？
可喜的是，jQuery允 許我們基于這些基層關(guān)系，在現(xiàn)存集合的基礎(chǔ)上獲得新的元素集合。而這些正是遍歷函數(shù)發(fā)揮作用的地方。
1、children
這個(gè)函數(shù)得到一組元素的直接子級(jí)。
在很多情況下會(huì)很方便，看看下面這張圖：
開始的時(shí)候容器中的star全部被選擇；
給children()傳遞一個(gè)選擇表 達(dá)式將選擇結(jié)果縮小至選中的star；
如果chilidren()每接受任何 參數(shù)，將返回所有直接子級(jí)；
不返回孫級(jí)元素。
2、filter
這個(gè)函數(shù)通過傳遞的選擇表達(dá)式從一個(gè)集合中過濾元素。任何不匹配這個(gè)表達(dá)式的元素將從選擇的集合中移除。
下面的這個(gè)例子直截了當(dāng)。從 5個(gè)star中過濾出class為“on”的star。
3、not
與filter恰恰相 反，not()從集合中移除匹配的元素。
看下面這個(gè)例子。偶數(shù)列的star從 選擇集合中移除，留下的是奇數(shù)行的star。
“ 注意：'Even'和'odd'選擇器是從0開始的，從0開 始計(jì)數(shù)，不是從1。”
4、add
如果我們想在集合中增加一些元素怎么辦？add()函 數(shù)正是做這件事的。
同樣簡(jiǎn)單明了，photo盒 子被添加到集合中。
5、slice
有時(shí)候，我們需要根據(jù)元素在集合的位置獲取集合的子集。sliece()正是做這個(gè)的。
第一個(gè)參數(shù)是從零開始的第一個(gè)元素的位置，它包含在返回的片段中；
第二個(gè)參數(shù)是從零開始的第一個(gè)元素的索引。不包含在返回的片段中。如果省略，將延伸至集合的末尾；
所以，slice(0,2)將選取前兩 個(gè)star。
6、parent
parent()函數(shù)選取一系列元素的直接父級(jí)。
正如下圖所示，第一個(gè)star的 直接父級(jí)被選中。非常方便，應(yīng)當(dāng)指出，它僅僅返回直接父級(jí)，為什么很奇特？因?yàn)闆]有祖父元素或祖先元素被選中。
7、parents
這是復(fù)數(shù)形式，parents()選 擇集合的所有祖先元素。我的意思是所有祖先元素包括直接父級(jí)到“body”和“html”元素。所以最好通過傳遞表達(dá)式縮小選擇結(jié)果。
通過給parents()傳 遞.container參數(shù)，div.container將被選中，它實(shí)際上第一個(gè)star的祖父。
8、siblings
這個(gè)函數(shù)選擇一組元素的所有兄弟姐妹，傳遞一個(gè)表達(dá)式可以篩選結(jié)果。
看看這個(gè)例子：
誰是第一個(gè)star的兄弟節(jié)點(diǎn)？其它的四個(gè)，對(duì) 不？
如圖所示，“odd”的節(jié)點(diǎn)被選中。索 引是從零開始的，看看下面star的紅色數(shù)字。
9、prev & prevAll
prev()函數(shù)選擇前一個(gè)兄弟節(jié)點(diǎn)。prevAll()選擇一個(gè)元素集合前面所有的兄弟節(jié)點(diǎn)。
如 果你正在構(gòu)建一個(gè)星級(jí)部件，這將相當(dāng)方便。第三個(gè)star前面的兄弟節(jié) 點(diǎn)被選中。
10、next & nextAll
這些函數(shù)與prev和prevAll工作方式相同，不過它選擇的是下一個(gè)兄弟姐妹。
結(jié)論
最后，讓我們來看看如何利用這些函數(shù)來解決現(xiàn)實(shí)世界中令我們頭痛的問題。
$('.star').click(function(){
$(this).addClass('on');
// 如何取得當(dāng)前對(duì)象的 父級(jí)?
$(this).parent().addClass('rated');
// 如何獲得當(dāng)前對(duì)象左 側(cè)的star?
$(this).prevAll().addClass('on');
$(this).nextAll().removeClass('on');
});
這就是這篇教程中早期提到的問題，對(duì)嗎？在這幾行代碼中我們使用了這幾個(gè)遍歷函數(shù)。
在第5行，看看parent()函數(shù)，啊哈，真簡(jiǎn)單。
在第8行和9行，prevAll()和nextAll().選擇填充的star和 空的star。
現(xiàn)在，遍歷函數(shù)是做么的方便。當(dāng)在一起使用時(shí)，它們將更加強(qiáng)大。也就是說，一個(gè)函數(shù)的輸出是另一個(gè)函數(shù)的輸 入，它們是鏈?zhǔn)降摹?/P>