欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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è)簡(jiǎn)單的分析, 直接來個(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.

相關(guān)文章

最新評(píng)論