jQuery中的pushStack实现原理和应用实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery中的pushStack实现原理和应用实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2135字，纯文字阅读大概需要4分钟。

内容图文

pushStack是jQuery内核中一个非常重要的函数，它是如此重要，以至于许多jQuery内部函数中都频繁用到它。平常情况下，虽然很少用到它, 但是掌握这个函数，不仅有利于理解jQuery的运行原理，还方便我们做更加高级的jQuery操作。

顾名思义，pushStack是入栈, 栈作为一种数据结构，是一种只能在一端进行插入和删除操作的特殊线性表。数据入栈时，类似与我们进电梯，后进而先出, 如下图:

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秒钟之内fadaout。

pushStack属于jQuery的实例方法，通过jQuery对象调用，如通过$().pushStack(document.getElementsByTagName(‘div')).css(‘background','blue')把所有div的背景都设置为蓝色。那么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的实现比较简单，主要涉及到jQuery的静态方法merge, 这个方法用来合并对象, 设计思路是在第一个对象的基础上，把第二个对象的属性(0至n)附加上去, 理解这一点很重要。再回到pushStack这个函数，首先定义一个局部变量ret存储合并对象，然后给这个对象存储prevObject和context属性，最后返回合并之后的ret对象。这里有几点需要注意:
1, this.constructor 就是jQuery的构造函数init，所以this.constructor()返回一个jQuery对象.
2, 由于jQuery merge函数返回的对象是第二个函数附加到第一个上面，所以ret也是一个jQuery对象，这里可以解释为什么pushStack出入的DOM对象也可以用CSS方法进行操作。
3, 返回的对象的prevObject属性指向上一个对象，所以可以通过这个属性找到栈的上一个对象.

内容总结

以上是互联网集市为您收集整理的jQuery中的pushStack实现原理和应用实例全部内容，希望文章能够帮你解决jQuery中的pushStack实现原理和应用实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端