jQuery之end()和pushStack()使用介紹

更新時(shí)間：2012年02月07日 00:15:23 作者：

pushStack()方法在jQuery的DOM操作中被頻繁的使用, 如在parent(), find(), filter()中, 當(dāng)然還有其他許多類似的方法, 它們往往需要返回一個(gè)jQuery封裝過的DOM結(jié)果集

但在我們自己寫jQuery代碼的時(shí)候,卻很少關(guān)注或使用過pushStack(). 如果我們需要寫個(gè)涉及DOM遍歷的插件,它就會(huì)顯得尤其有用.

在jQuery內(nèi)部,pushStack()方法通過改變一個(gè)jQuery對(duì)象的prevObject屬性來"跟蹤"鏈?zhǔn)秸{(diào)用中前一個(gè)方法返回的DOM結(jié)果集(被jQuery封裝過,也是個(gè)jQuery對(duì)象,說是"跟蹤",是因?yàn)閷?shí)際存儲(chǔ)的是個(gè)引用). 當(dāng)我們?cè)冁準(zhǔn)秸{(diào)用end()方法后, 內(nèi)部就返回當(dāng)前jQuery對(duì)象的prevObject. 具體更多細(xì)節(jié), 直接看源碼即可. 這里只做個(gè)簡單的分析, 直接來個(gè)例子:

html:

復(fù)制代碼代碼如下:

 
<div id="grandparent"> 
I am grandparent. 
<div id="parent"> 
I am parent. 
<div id="child"> 
I am child. 
</div> 
</div> 
</div> 

javascript:

復(fù)制代碼代碼如下:

 
var els = $('#child').parent().parent(); 
console.dir(els); 

圖解:

了解這個(gè)之后, 我們來做一個(gè)grandparent插件,用來替代.parent().parent()這樣連續(xù)2次的調(diào)用,直接用.grandparent().如果"一不小心"沒考慮end()的話,代碼很可能就是這個(gè)樣子的:

復(fù)制代碼代碼如下:

 
$.fn.grandparent = function() { 
return this.parent().parent(); 
}; 

依舊用上面那個(gè)例子:

復(fù)制代碼代碼如下:

$('#child').grandparent().end(); //jQuery-[div#parent]

很顯然, 大多數(shù)情況下這不是我們想要的, 事實(shí)上我們想通過鏈?zhǔn)秸{(diào)用end()直接返回到j(luò)query[div#child]. 現(xiàn)在該是pushStack出馬的時(shí)候了,我們只要加上一行即可:

復(fù)制代碼代碼如下:

 
$.fn.grandparent = function() { 
var els = this.parent().parent(); 
return this.pushStack(els.get()); 
}; 

在pushStack內(nèi)部, 把els.get()返回的DOM數(shù)組封裝成一個(gè)新的jQuery對(duì)象, 而this(jQuery[div#child])會(huì)賦值給之前新構(gòu)建jQuery的prevObject, 最后返回新生的那個(gè)jQuery對(duì)象.

所以這次, 當(dāng)我們?cè)儆胑nd()就對(duì)了:

復(fù)制代碼代碼如下:

 
var grandparent = $('#child').grandparent()./* jquery-[div#grandparent]*/.end() /*jquery-[div#child]*/ 

此博文內(nèi)容的主體思想來自Learning JQuery中的一篇博客, 感謝該作者的分享. 感興趣的話, 點(diǎn)擊jQuery pushStack.

您可能感興趣的文章:

jquery中push()的用法(數(shù)組添加元素)

相關(guān)文章

jQuery實(shí)現(xiàn)簡單的DIV拖動(dòng)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的DIV拖動(dòng)效果,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2016-02-02
jQuery中clearQueue()方法用法實(shí)例
這篇文章主要介紹了jQuery中clearQueue()方法用法,實(shí)例分析了clearQueue()方法的功能、定義及進(jìn)行清空隊(duì)列操作的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
教你用jquery實(shí)現(xiàn)iframe自適應(yīng)高度
iframe因?yàn)槟芎途W(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分?jǐn)?shù)據(jù)成為可能，可是 iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩，給iframe設(shè)置高度的時(shí)候多了也不好，少了更是不行，今天我們就來分享2種使用jquery實(shí)現(xiàn)iframe自適應(yīng)高度的代碼
2014-06-06
解決jquery1.9不支持browser對(duì)象的問題
項(xiàng)目里面一直用的都是jquery1.9，不支持browser對(duì)象，百度一下，找到了解決方案在此與大家分享下，有遇到此問題的朋友不要錯(cuò)過
2013-11-11
jquery 頁眉單行信息滾動(dòng)顯示實(shí)現(xiàn)思路及代碼
將滾動(dòng)的內(nèi)容查詢出來，放在一個(gè)div 或者別的容器里面，具體的實(shí)現(xiàn)代碼如下
2014-06-06
jquery選擇器的選擇使用及性能介紹
從這一講開始，我們將直正接觸一個(gè)JQ類庫，學(xué)習(xí)一下JQ的寫法，JQ的一些常用的命令等等，今天主要講的是JQ里的選擇器，這也是JQ的一大特點(diǎn)，這從它的名稱jQuery中可以看到，主要功力體現(xiàn)在查詢上
2013-01-01
jQuery延遲執(zhí)行的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery延遲執(zhí)行的實(shí)現(xiàn)方法,結(jié)合簡單實(shí)例形式分析了jQuery針對(duì)無法同步執(zhí)行的情況使用延遲執(zhí)行的操作技巧,需要的朋友可以參考下
2016-12-12
jQuery使用each遍歷循環(huán)的方法
這篇文章主要介紹了jq 用each遍歷循環(huán)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-09-09
jQuery CSS()方法改變現(xiàn)有的CSS樣式
css()方法在使用上具有多樣性。其中有一種可接受兩個(gè)輸入?yún)?shù)：樣式屬性和樣式值，兩者之間用逗號(hào)分隔，下面通過實(shí)例為大家介紹下
2014-08-08
jQuery回調(diào)函數(shù)的定義及用法實(shí)例
這篇文章主要介紹了jQuery回調(diào)函數(shù)的定義及用法,以實(shí)例形式詳細(xì)分析了回調(diào)函數(shù)的原理與實(shí)現(xiàn)技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12