jQuery的DOM遍歷模塊對DOM模型的原生屬性parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling進行了封裝和擴展，用于在DOM樹中遍歷父元素、子元素和兄弟元素，
可以通過jQuery的實體來訪問，方法如下:
- parent() ;獲取匹配元素的父元素
- parents(selector) ;獲取匹配元素的所有祖先元素 ;selector用于過濾查找的元素，如果為空則獲取所有的祖先元素
- parentsUntil(until,selector) ;獲得當前匹配元素集合中每個元素的祖先元素,直到遇到until元素
- next() ;獲取匹配元素之后緊挨著的兄弟元素,沒有則回傳undefined
- nextAll(selector) ;獲取匹配元素之后緊挨著的所有兄弟元素
- nextUntil(until,selector) ;獲取匹配元素之后緊挨著的所有兄弟元素，直到遇到until元素
- prev() ;獲取匹配元素之前緊挨著的兄弟元素,沒有則回傳undefined
- prevAll(selector) ;獲取匹配元素之前緊挨著的所有兄弟元素
- prevUntil(until,selector) ;獲取匹配元素之前緊挨著的所有兄弟元素，直到遇到until元素
- siblings(selector) ;獲取匹配元素的所有兄弟元素，如果指定了selector則只獲取該型別的元素
- children(selector) ;獲取匹配元素的子元素，不包括文本節點和注釋節點
- contents() ;獲取匹配元素的子元素，包括文本節點和注釋節點
舉個栗子:
writer by:大沙漠 QQ:22969969
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script></head><body> <div> <h1>Hello World!</h1> <p>123</p> <span>123</span> </div> <script> console.log( $('p').parent() ) //獲取p元素的父元素 console.log( $('p').prev() ) //獲取p元素之前緊挨的兄弟元素 console.log( $('p').next() ) //獲取p元素之后緊挨的兄弟元素 console.log( $('p').siblings() ) //獲取p元素的所有兄弟元素 console.log( $('div').children() ) //獲取div的所有子元素,不包括文本節點和注釋節點 console.log( $('div').contents() ) //獲取div的所有子元素,包括文本節點和注釋節點 </script></body></html>
輸出如下:
對應栗子里的每一個輸出，分別輸出
- p元素的父節點
- p元素的上一個兄弟元素
- p元素的下一個兄弟元素
- p元素的所有兄弟元素
- div元素過濾掉文本節點和空白節點的子節點
- div元素包括文本節點和空白節點的子節點
回傳的都是一個jQuery物件，非常的好用，操作DOM時都會用到這幾個方法
原始碼分析
jQuery對于DOM遍歷模塊的實作是基于三個工具函式實作的
- $.dir(elem, dir, until) ;從elem元素開始，查找dir方向(可以是:parentNode、nextSibling或previousSibling)上的所有元素，如果在查找程序中遇到匹配引數until的元素，則查找終止
- $.nth(cur, result, dir, elem) ;從cur元素出發，查找dir方向(parentNode、nextSibling或previousSibling)上的第result個元素
- $.sibling(n, elem) ;負責查找一個元素之后的所有兄弟元素，包括起始元素，但不包括引數elem，n是查找的起始元素，包含在結果集中，elem是可選的DOM元素，不包含在回傳結果中，
舉個栗子:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script></head><body> <div> <h1>Hello World!</h1> <p>123</p> <span>123</span> </div> <script> var h1 = document.getElementsByTagName('h1')[0], //分別獲取h1、p、span元素的節點參考 p = document.getElementsByTagName('p')[0], span = document.getElementsByTagName('span')[0]; console.log( $.dir(h1,'parentNode') ) //列印h1的所有祖先節點 console.log( $.nth(h1,3,'nextSibling') ) //獲取h1之后的第二個節點 console.log( $.sibling(h1,h1) ) //獲取h1的所有兄弟元素，默認獲取包括自身在內的元素，引數2也傳入h1表示排除h1元素 </script></body></html>
輸出如下:
輸出三行，分別對應h1的所有祖先節點、h1之后的第二個子節點和h1的所有兄弟元素，和DOM樹中也是對應的，
對于$.dir、$.nth和$.sibling來說，它的實作如下:
jQuery.extend({ dir: function( elem, dir, until ) { //從elem元素開始，查找dir方向(可以是:parentNode、nextSibling或previousSibling)上的所有元素，如果在查找程序中遇到匹配引數until的元素，則查找終止， var matched = [], cur = elem[ dir ]; //cur表示下一個元素，根據引數dir不同，可能是父元素、前一個兄弟元素 或者 后一個兄弟元素 while ( cur && cur.nodeType !== 9 && (until === undefined || cur.nodeType !== 1 || !jQuery( cur ).is( until )) ) { //如果下一個元素存在 且 不是document物件(nodeType等于9) 則繼續判斷括號里的陳述句，否則跳出回圈 括號內:如果沒有傳入until引數，或者傳入了until引數并且當前元素不是Element節點(屬性nodeType等于1) 或者 傳入了until引數且當前引數是Element節點且該元素不匹配引數until 則進行回圈 if ( cur.nodeType === 1 ) { //如果cur是元素節點 matched.push( cur ); //存盤到陣列matched中 } cur = cur[dir]; //獲取下一個方向上的元素 } return matched; //回傳找到了的Element節點陣列， }, nth: function( cur, result, dir, elem ) { //從cur元素出發，查找dir方向(parentNode、nextSibling或previousSibling)上的第result個元素 result = result || 1; var num = 0; //當前查找的元素序號 for ( ; cur; cur = cur[dir] ) { //從起始元素cur觸發，沿著方向dir迭代遍歷，只要cur元素存在則一直查找，直到查找該方向上的第result個Element節點 if ( cur.nodeType === 1 && ++num === result ) { //如果cur是一個元素節點，則num+1，此時如果num等于result,則表示查找到該元素了，則跳出回圈 break; } } return cur; //回傳查找到的cur元素， }, sibling: function( n, elem ) { //負責查找一個元素之后的所有兄弟元素，包括起始元素，但不包括引數elem，n是查找的起始元素，包含在結果集中，elem是可選的DOM元素，不包含在回傳結果中， var r = []; for ( ; n; n = n.nextSibling ) { //從起始元素n觸發，迭代遍歷其后的所有兄弟元素 if ( n.nodeType === 1 && n !== elem ) { //如果該兄弟元素是元素節點且不等于引數elem則被放入陣列r中， r.push( n ); } } return r; //回傳存放了找到的Element節點的陣列r }});
也就是對parentNode、childNodes、firstChild、lastChild、previousSibling、nextSibling這些原生DOM操作的一些封裝
我們通過jQuery實體可以訪問的方法的實作如下:
jQuery.each({ parent: function( elem ) { //回傳匹配元素的父元素 var parent = elem.parentNode; return parent && parent.nodeType !== 11 ? parent : null; //如果父元素存在且不是檔案碎片元素，則回傳該父元素，否則回傳null }, parents: function( elem ) { //回傳匹配元素的所有祖先元素 return jQuery.dir( elem, "parentNode" ); }, parentsUntil: function( elem, i, until ) { //獲得當前匹配元素集合中每個元素的祖先元素，直到遇到until元素 return jQuery.dir( elem, "parentNode", until ); }, next: function( elem ) { //獲取匹配元素之后緊挨著的兄弟元素 return jQuery.nth( elem, 2, "nextSibling" ); }, prev: function( elem ) { //獲取匹配元素之前緊挨著的兄弟元素 return jQuery.nth( elem, 2, "previousSibling" ); }, nextAll: function( elem ) { //獲取匹配元素之后緊挨著的所有兄弟元素 return jQuery.dir( elem, "nextSibling" ); }, prevAll: function( elem ) { //獲取匹配元素之前緊挨著的所有兄弟元素 return jQuery.dir( elem, "previousSibling" ); }, nextUntil: function( elem, i, until ) { //獲取匹配元素之后緊挨著的所有兄弟元素 ，直到遇到匹配元素until為止 return jQuery.dir( elem, "nextSibling", until ); }, prevUntil: function( elem, i, until ) { //獲取匹配元素之前緊挨著的所有兄弟元素 ，直到遇到匹配元素until為止 return jQuery.dir( elem, "previousSibling", until ); }, siblings: function( elem ) { //獲取匹配元素的所有兄弟元素 return jQuery.sibling( elem.parentNode.firstChild, elem ); }, children: function( elem ) { //獲取匹配元素的子元素 return jQuery.sibling( elem.firstChild ); }, contents: function( elem ) { //獲取匹配元素的子元素，包括文本節點和注釋節點 return jQuery.nodeName( elem, "iframe" ) ? elem.contentDocument || elem.contentWindow.document : jQuery.makeArray( elem.childNodes ); }}, function( name, fn ) { //模板函式，用于呼叫對應的遍歷函式查找DOM元素，然后執行過濾、排序、和去重操作 name是每個函式名，fn是對應的值(也就是函式) jQuery.fn[ name ] = function( until, selector ) { //定義模版函式,真正是在這里定義的，它接收兩個引數 until:選擇器運算式，用于指示查找停止的位置，selector:選擇器運算式，用于過濾找到的元素 var ret = jQuery.map( this, fn, until ); //呼叫方法jQuery.map()遍歷當前匹配元素集合，對每個元素呼叫遍歷函式fn，并將遍歷函式fn的回傳值放入一個新的陣列ret中， if ( !runtil.test( name ) ) { //如果遍歷函式名不以'Until'結尾的，則最多只有一個引數 selector = until; //修正引數selector為until } if ( selector && typeof selector === "string" ) { //如果設定了引數selector 且selector是一個字串 ret = jQuery.filter( selector, ret ); //則呼叫jQuery.filter()對陣列ret中的DOM元素逐個過濾，最終只保留匹配選擇器運算式selector的元素， } ret = this.length > 1 && !guaranteedUnique[ name ] ? jQuery.unique( ret ) : ret; if ( (this.length > 1 || rmultiselector.test( selector )) && rparentsprev.test( name ) ) { //排序 ret = ret.reverse(); } return this.pushStack( ret, name, slice.call( arguments ).join(",") ); //創建一個jQuery物件并回傳 };});
實作就是通過$.each()遍歷一個物件，依次執行引數2這個函式，該函式會在$.fn上依次掛載每個介面，使用$.map()工具方法它會依次執行fn函式，進行一些過濾去重后最后呼叫$.pushStack()將陣列轉換為一個jQuery物件，這里理解起來有點難度，需要多理一下代碼，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34148.html
標籤：jQuery
上一篇：下拉框一級樹形多選 框