jQuery中的pushStack實現(xiàn)原理和應(yīng)用實例
pushStack是jQuery內(nèi)核中一個非常重要的函數(shù),它是如此重要,以至于許多jQuery內(nèi)部函數(shù)中都頻繁用到它。平常情況下,雖然很少用到它, 但是掌握這個函數(shù),不僅有利于理解jQuery的運行原理,還方便我們做更加高級的jQuery操作。
顧名思義,pushStack是入棧, 棧作為一種數(shù)據(jù)結(jié)構(gòu),是一種只能在一端進行插入和刪除操作的特殊線性表。數(shù)據(jù)入棧時,類似與我們進電梯,后進而先出, 如下圖:

jQuery中的棧其實并不是真正的棧,而是給jQuery對象附加一個屬性,指向當前對象的上一個對象, 通過end方法就能返回上一個元素。如下:
<span>1</span>
<span>2</span>
<span>3</span>
<script>
$('span').eq(0).css('fontSize','20px').end().fadeOut(2000);
</script>
上面的代碼會使第一個span的字體大小為20px,并讓所有span在2秒鐘之內(nèi)fadaout。
pushStack屬于jQuery的實例方法,通過jQuery對象調(diào)用,如通過$().pushStack(document.getElementsByTagName(‘div')).css(‘background','blue')把所有div的背景都設(shè)置為藍色。那么pushStack的原理是什么,為什么傳入的DOM對象可以用css方法操作呢?先來看一下jQuery中pushStack的源碼:
pushStack: function( elems ) {
// Build a new jQuery matched element set
var ret = jQuery.merge( this.constructor(), elems );
// Add the old object onto the stack (as a reference)
ret.prevObject = this;
ret.context = this.context;
// Return the newly-formed element set
return ret;
}
//jQuery.merge
merge: function( first, second ) {
var l = second.length,
i = first.length,
j = 0;
if ( typeof l === "number" ) {
for ( ; j < l; j++ ) {
first[ i++ ] = second[ j ];
}
} else {
while ( second[j] !== undefined ) {
first[ i++ ] = second[ j++ ];
}
}
first.length = i;
return first;
}
pushStack的實現(xiàn)比較簡單,主要涉及到j(luò)Query的靜態(tài)方法merge, 這個方法用來合并對象, 設(shè)計思路是在第一個對象的基礎(chǔ)上,把第二個對象的屬性(0至n)附加上去, 理解這一點很重要。再回到pushStack這個函數(shù),首先定義一個局部變量ret存儲合并對象,然后給這個對象存儲prevObject和context屬性,最后返回合并之后的ret對象。這里有幾點需要注意:
1, this.constructor 就是jQuery的構(gòu)造函數(shù)init,所以this.constructor()返回一個jQuery對象.
2, 由于jQuery merge函數(shù)返回的對象是第二個函數(shù)附加到第一個上面,所以ret也是一個jQuery對象,這里可以解釋為什么pushStack出入的DOM對象也可以用CSS方法進行操作。
3, 返回的對象的prevObject屬性指向上一個對象,所以可以通過這個屬性找到棧的上一個對象.
相關(guān)文章
jQuery實現(xiàn)html表格動態(tài)添加新行的方法
這篇文章主要介紹了jQuery實現(xiàn)html表格動態(tài)添加新行的方法,涉及jQuery鼠標事件及頁面元素的操作技巧,需要的朋友可以參考下2015-05-05
使用基于jquery的gamequery插件做JS乒乓球游戲
現(xiàn)在jquery比較流行,用js做游戲的也越來越多了,雖然現(xiàn)在html5出來了,但實際上要用html5做點啥出來還是得靠javascript,所以學好js是非常重要的2011-07-07
jquery移除button的inline onclick事件(已測試及兼容瀏覽器)
這種方法在Google Chrome下正常工作,但是在IE的兼容模式下會馬上調(diào)用reclick方法,這不是我們想要的效果;為了解決這個問題,我們可以換個思路,就是延遲綁定click事件2013-01-01
ASP.NET MVC中EasyUI的datagrid跨域調(diào)用實現(xiàn)代碼
因為easyUI使用的是JQuery的異步方法加載數(shù)據(jù),應(yīng)該遵循JQuery的跨域訪問規(guī)則2012-03-03
jQuery給div,Span, a ,button, radio 賦值與取值
這篇文章主要介紹了jQuery給div,Span, a ,button, radio 賦值與取值的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06

