thinkPHP5.0框架安裝教程
776
2024-01-14
本文實例講述了jQuery遍歷DOM元素與節點方法。分享給大家供大家參考，具體如下：
一、向上遍歷--祖先元素
① $(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相關內容感興趣的讀者可查看本站專題：《jQuery遍歷算法與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
