本文實(shí)例講述了jQuery遍歷DOM元素與節(jié)點(diǎn)方法。分享給大家供大家參考，具體如下：

一、向上遍歷--祖先元素

① $(selector).parent([filter]):返回selector匹配元素的直接父元素，方法可以接受一個(gè)過(guò)濾selector來(lái)過(guò)濾返回的父元素。

② $(selector).parents([filter]):返回匹配元素的所有祖先節(jié)點(diǎn)，一直向上直到文檔根元素html，方法可以接受一個(gè)過(guò)濾selector來(lái)過(guò)濾返回的祖先節(jié)點(diǎn)。

備注：parent與parents的區(qū)別，parent返回直接父節(jié)點(diǎn)，parents返回所有的祖先節(jié)點(diǎn)，另外$("html").parent()返回document節(jié)點(diǎn)，而$("html").parents()則返回空。

③ $(selector).parentUntil([ancestorSelector][,filter])：返回匹配節(jié)點(diǎn)與ancestorSelector之間的所有祖先節(jié)點(diǎn)，注意不包括ancestorSelector匹配的幾點(diǎn)，方法可以接受一個(gè)過(guò)濾selector來(lái)過(guò)濾返回的祖先節(jié)點(diǎn)，如果ancestorSelector為空或者在其祖先節(jié)點(diǎn)中沒(méi)有找到匹配ancestorSelector的元素則返回所有祖先節(jié)點(diǎn)等同于parents()方法。

$(selector).parentUtil(element[,ancestorSelector]):用法及含義同上。

④ $(selector).offsetParent():返回匹配元素的最近的一個(gè)定位的祖先元素，所謂定位祖先元素是指其CSS position屬性設(shè)置為relative,absolute,fixed，主要在動(dòng)畫(huà)演示過(guò)程中計(jì)算元素的偏移及位置具有很大的作用。

⑤ $(selector).closest(ancestorSelector[,context]):獲取最近的一個(gè)匹配ancestorSelector的祖先元素，方法可以接受一個(gè)參數(shù)context來(lái)控制搜索的范圍。同parents方法有如下區(qū)別：

a.closest從來(lái)當(dāng)前元素本身開(kāi)始向上搜索
parents則從父節(jié)點(diǎn)元素開(kāi)始。

b.closest沿DOM樹(shù)向上遍歷，直到找到匹配ancestorSelector的一個(gè)元素位置
parents沿DOM樹(shù)向上遍歷，直到文檔的根元素為止，將每個(gè)祖先元素添加到一個(gè)臨時(shí)集合；如果應(yīng)用了選擇器，則會(huì)基于該選擇器對(duì)這個(gè)集合進(jìn)行篩選

c.closest返回包含0個(gè)或者一個(gè)元素的jQuery對(duì)象
parents返回包含0個(gè)、一個(gè)或多個(gè)元素的jQuery對(duì)象

其它變形用法：

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

二、向下遍歷--子孫元素

① .children([childrenSelector]):返回元素的直接子元素，方法可以接受一個(gè)參數(shù)來(lái)過(guò)濾返回的子元素。

② .find(descendantSelector):返回元素的匹配decendantSelector的所有后代元素，一直向下知道最后一個(gè)后代。

其它變形用法：

.find(jQuery object);
.find(element);

③ .contents():返回元素的所有子元素，同children的區(qū)別是contents包含text節(jié)點(diǎn)及comment節(jié)點(diǎn)。

三、同級(jí)遍歷--兄弟元素

① .siblings([selector])：返回當(dāng)前元素的所有兄弟元素，方法可以接收一個(gè)可選參數(shù)來(lái)過(guò)濾返回的兄弟元素。

② .next([selector]):返回當(dāng)前元素的下一個(gè)兄弟元素，方法可以接受一個(gè)可選參數(shù)來(lái)過(guò)濾返回的兄弟元素。

③ .nextAll([selector]):返回當(dāng)前元素后面的所有兄弟元素，方法可以接受一個(gè)可選參數(shù)來(lái)過(guò)濾返回的兄弟元素。

④ .nextUntil([selector][,filter]):返回當(dāng)前元素的所有兄弟元素直到遇到匹配selector條件的兄弟元素，方法可以接受一個(gè)可選參數(shù)filter來(lái)過(guò)濾返回的兄弟元素。

⑤ .prev/prevAll/prevUntil與next/nextAll/nextUntil用法相同，作用相近，只是搜索的方向相反。

四、過(guò)濾

① .filter(selector):從當(dāng)前匹配的元素集合中篩選中符合selector條件的子集合，用的用來(lái)減少匹配的范圍。

.filter(function(index)):根據(jù)回調(diào)函數(shù)來(lái)過(guò)濾當(dāng)前匹配的元素集合，回調(diào)函數(shù)傳入?yún)?shù)index是指元素在集合中的索引，在函數(shù)體內(nèi)可用this來(lái)代表元素，函數(shù)返回true/false,如果返回true，則保留子元素，否則排除子元素。

其它變形用法：

.filter(element|jQueryObject)

② .first():返回當(dāng)前匹配元素集合中的第一個(gè)元素。

③ .last():返回當(dāng)前匹配元素集合中的最后一個(gè)元素。

④ .eq(index/-index):返回當(dāng)前匹配元素集合指定位置的元素，索引從0開(kāi)始，負(fù)數(shù)表示從尾到頭的順序進(jìn)行排序。

⑤ .has(selector/element):從當(dāng)前元素集合中返回具有特定子元素的元素集合，排除不具備對(duì)應(yīng)子元素的元素。子元素可以用參數(shù)selector或者元素對(duì)象來(lái)進(jìn)行匹配。

⑥ .is(selector|function(index)|element|jQueryObject):根據(jù)一個(gè)選擇器或者回調(diào)函數(shù)或者元素或者jQuery對(duì)象來(lái)檢驗(yàn)元素集合,如果其中至少包含一個(gè)符合給定表達(dá)式的元素則返回true,否則返回false,另外如果當(dāng)前元素集合為空或者表達(dá)式為空，則返回false。這個(gè)方法一般用在回調(diào)函數(shù)中例如事件處理handler里面，來(lái)判斷this是否為某個(gè)特定元素

⑦ .map(callback(index,domElement)):將當(dāng)前匹配的元素?cái)?shù)組通過(guò)回調(diào)函數(shù)返回值轉(zhuǎn)化為另外一個(gè)對(duì)象數(shù)組（不管是否為dom元素），如果想轉(zhuǎn)化普通jQueryObject數(shù)組可以使用jQuery.map(array,callback(objectOfArray,indexOfArray))方法來(lái)實(shí)現(xiàn)。

⑧ .not(selector|elements|function(index)|jQuery object):從當(dāng)前匹配的元素?cái)?shù)組中刪除符合參數(shù)調(diào)節(jié)的元素，參數(shù)可以是selector、DOM element、普通的jQuery對(duì)象以及一個(gè)返回布爾變量的回調(diào)函數(shù)。

⑨ .slice(start[,end]):從當(dāng)前匹配的元素集合中獲取指定范圍的一個(gè)子集，start及end如果為負(fù)數(shù)則獲取元素方向從尾到頭。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery遍歷算法與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

最新評(píng)論