首頁 > web前端 > js教程 > 主體

jquery向上遍歷、向下遍歷、同級遍歷和過濾的用法詳解

伊谢尔伦
發布: 2017-06-19 16:31:18
原創
1717 人瀏覽過

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

① $(selector).parent([filter]):傳回selector匹配元素的直接父元素,方法可以接受一個過濾selector來過濾回傳的父元素。

② $(selector).parents([filter]):傳回所有符合元素的祖先節點,一直向上直到文檔根元素html,方法可以接受一個過濾selector來過濾回傳的祖先節點。

備註:parent與parents的區別,parent返回直接父節點,parents返回所有的祖先節點,另外$("html").parent()返回document節點,而$ ("html").parents()則返回空。

③ $(selector).parentUntil([ancestorSelector][,filter]):傳回所有符合節點與ancestorSelector之間的祖先節點,注意不包含ancestorSelector相符的幾點,方法可以接受一個過濾selector來過濾返回的祖先節點,如果ancestorSelector為空或在其祖先節點中沒有找到匹配ancestorSelector的元素則返回所有祖先節點等同於parents()方法。

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

④ $(selector).offsetParent():傳回符合元素的最近的一個定位的祖先元素,所謂定位祖先元素是指其CSS position屬性設定為relative,absolute, fixed,主要在動畫示範過程中計算元素的偏移及位置具有很大的作用。

⑤ $(selector).closest(ancestorSelector[,context]):取得最近的一個符合ancestorSelector的祖先元素,方法可以接受一個參數context來控制搜尋的範圍。同parents方法有以下區別:

a.closest從來當前元素本身開始向上搜尋
parents則從父節點元素開始。

b.closest沿著DOM樹向上遍歷,直到找到匹配ancestorSelector的一個元素位置
parents沿著DOM樹向上遍歷,直到文檔的根元素為止,將每個祖先元素添加到一個臨時集合;如果應用了選擇器,則會基於該選擇器對這個集合進行篩選

c.closest傳回包含0個或一個元素的jQuery物件
parents傳回包含0個、一個或多個元素的jQuery物件

其它變形用法:

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)
登入後複製

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

① .children([childrenSelector]):傳回元素的直接子元素,方法可以接受一個參數來過濾回傳的子元素。

② .find(descendantSelector):傳回元素的符合decendantSelector的所有後代元素,一直往下知道最後一個後代。

其它變形用法:

.find(jQuery object);
.find(element);
登入後複製

③ .contents():傳回元素的所有子元素,同children的差異在於contents包含text節點及comment節點。

三、同級遍歷--兄弟元素

① .siblings([selector]):傳回目前元素的所有兄弟元素,方法可以接收一個可選參數來過濾回傳的兄弟元素。

② .next([selector]):傳回目前元素的下一個兄弟元素,方法可以接受一個可選參數來過濾傳回的兄弟元素。

③ .nextAll([selector]):傳回目前元素後面的所有兄弟元素,方法可以接受一個可選參數來過濾回傳的兄弟元素。

④ .nextUntil([selector][,filter]):傳回目前元素的所有兄弟元素直到遇到符合selector條件的兄弟元素,方法可以接受一個可選參數filter來過濾回傳的兄弟元素。

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

四、過濾

① .filter(selector):從目前符合的元素集合中篩選中符合selector條件的子集合,用的用來減少匹配的範圍。

.filter(function(index)):根據回呼函數來過濾目前符合的元素集合,回呼函數傳入參數index是指元素在集合中的索引,在函數體內可用this來代表元素,函數傳回true/false,如果傳回true,則保留子元素,否則排除子元素。

其它變形用法:

.filter(element|jQueryObject)
登入後複製

② .first():傳回目前符合元素集合中的第一個元素。

③ .last():傳回目前符合元素集合中的最後一個元素。

④ .eq(index/-index):傳回目前符合元素集合指定位置的元素,索引從0開始,負數表示從尾到頭的順序進行排序。

⑤ .has(selector/element):從目前元素集合中傳回具有特定子元素的元素集合,排除不具備對應子元素的元素。子元素可以用參數selector或元素物件來進行比對。

⑥ .is(selector|function(index)|element|jQueryObject):根據一個選擇器或回呼函數或元素或jQuery物件來檢驗元素集合,如果其中至少包含一個符合給定表達式的元素則傳回true,否則傳回false,另外如果目前元素集合為空或表達式為空,則傳回false。這個方法一般用在回呼函數中例如事件處理handler裡面,來判斷this是否為某個特定元素

⑦ .map(callback(index,domElement)):將目前配對的元素數組透過回呼函數傳回值轉換為另一個物件陣列(不管是否為dom元素),如果想要轉換普通jQueryObject陣列可以使用jQuery.map(array,callback(objectOfArray,indexOfArray))方法來實作。

⑧ .not(selector|elements|function(index)|jQuery object):從目前符合的元素陣列中刪除符合參數調節的元素,參數可以是selector、DOM element、普通的jQuery物件以及一個傳回布林變數的回調函數。

⑨ .slice(start[,end]):從目前符合的元素集合中取得指定範圍的子集,start及end如果為負數則取得元素方向從尾到頭。

以上是jquery向上遍歷、向下遍歷、同級遍歷和過濾的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!