建站
咨詢
售后
建站咨詢
新聞中心
為什么我們要進(jìn)一步提煉一系列元素，難道是jQuery選擇語(yǔ)法不夠強(qiáng)大？讓我們從示例開(kāi)始。在下面提到的網(wǎng)頁(yè)中，當(dāng)一個(gè)star被點(diǎn)擊時(shí)，我們需要給它以及左邊的每個(gè)star添加class“on”。首先，讓我們看看下圖所示的簡(jiǎn)單的頁(yè)面，通過(guò)這個(gè)教程我們將選擇這些元素。
成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為金川等服務(wù)建站，金川等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為金川企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
推薦專題：jQuery從入門(mén)到精通
◆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。
與此同時(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è)頁(yè)面中，有很多div.rating。哪一個(gè)是我們想要的？如何獲得“this”左邊所有 的star？可喜的是，jQuery允許我們基于這些基層關(guān)系，在現(xiàn)存集合的基礎(chǔ)上獲得新的元素集合。而這些正是遍歷函數(shù)發(fā)揮作用的地方。
1、children
這個(gè)函數(shù)得到一組元素的直接子級(jí)。
在很多情況下會(huì)很方便，看看下面這張圖：
◆開(kāi)始的時(shí)候容器中的star全部被選擇；
◆給children()傳遞一個(gè)選擇表 達(dá)式將選擇結(jié)果縮小至選中的star；
◆如果chilidren()每接受任何 參數(shù)，將返回所有直接子級(jí)；
◆不返回孫級(jí)元素。
2、filter
這個(gè)函數(shù)通過(guò)傳遞的選擇表達(dá)式從一個(gè)集合中過(guò)濾元素。任何不匹配這個(gè)表達(dá)式的元素將從選擇的集合中移除。
下面的這個(gè)例子直截了當(dāng)。從 5個(gè)star中過(guò)濾出class為“on”的star。
3、not
與filter恰恰相 反，not()從集合中移除匹配的元素?？聪旅孢@個(gè)例子。偶數(shù)列的star從選擇集合中移除，留下的是奇數(shù)行的star。
“ 注意：'Even'和'odd'選擇器是從0開(kāi)始的，從0開(kāi)始計(jì)數(shù)，不是從1?！?/p>
4、add
如果我們想在集合中增加一些元素怎么辦？add()函 數(shù)正是做這件事的。同樣簡(jiǎn)單明了，photo盒 子被添加到集合中。
#p#
5、slice
有時(shí)候，我們需要根據(jù)元素在集合的位置獲取集合的子集。sliece()正是做這個(gè)的。
◆第一個(gè)參數(shù)是從零開(kāi)始的第一個(gè)元素的位置，它包含在返回的片段中；
◆第二個(gè)參數(shù)是從零開(kāi)始的第一個(gè)元素的索引。不包含在返回的片段中。如果省略，將延伸至集合的末尾；
所以，slice(0,2)將選取前兩個(gè)star。
6、parent
parent()函數(shù)選取一系列元素的直接父級(jí)。
正如下圖所示，第一個(gè)star的 直接父級(jí)被選中。非常方便，應(yīng)當(dāng)指出，它僅僅返回直接父級(jí)，為什么很奇特？因?yàn)闆](méi)有祖父元素或祖先元素被選中。
7、parents
這是復(fù)數(shù)形式，parents()選 擇集合的所有祖先元素。我的意思是所有祖先元素包括直接父級(jí)到“body”和“html”元素。所以最好通過(guò)傳遞表達(dá)式縮小選擇結(jié)果。
通過(guò)給parents()傳 遞.container參數(shù)，div.container將被選中，它實(shí)際上第一個(gè)star的祖父。
8、siblings
這個(gè)函數(shù)選擇一組元素的所有兄弟姐妹，傳遞一個(gè)表達(dá)式可以篩選結(jié)果?？纯催@個(gè)例子：
如圖所示，“odd”的節(jié)點(diǎn)被選中。索引是從零開(kāi)始的，看看下面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工作方式相同，不過(guò)它選擇的是下一個(gè)兄弟姐妹。
結(jié)論
最后，讓我們來(lái)看看如何利用這些函數(shù)來(lái)解決現(xiàn)實(shí)世界中令我們頭痛的問(wèn)題。
- $('.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');
- });
這就是這篇文章中早期提到的問(wèn)題，對(duì)嗎？在這幾行代碼中我們使用了這幾個(gè)遍歷函數(shù)。
在第8行和9行，prevAll()和nextAll()。選擇填充的star和空的star?，F(xiàn)在，遍歷函數(shù)是做么的方便。當(dāng)在一起使用時(shí)，它們將更加強(qiáng)大。也就是說(shuō)，一個(gè)函數(shù)的輸出是另一個(gè)函數(shù)的輸 入，它們是鏈?zhǔn)降摹?/p>
【編輯推薦】
- 拋磚引玉 自定義jQuery擴(kuò)展接口
- 改變獲取對(duì)象方式 萬(wàn)能的jQuery選擇器
- 即刻提升jQuery性能的十個(gè)技巧
- 一些應(yīng)該熟記于心的jQuery函數(shù)和技巧
- 你應(yīng)該學(xué)習(xí)jQuery的七大理由
文章題目：jQuery中10個(gè)強(qiáng)大的遍歷函數(shù)
標(biāo)題路徑：http://www.5511xx.com/article/cocoscg.html
