经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery 源码解析(三) pushStack方法 详解
来源:cnblogs  作者:大沙漠  时间:2019/8/27 9:51:50  对本文有异议

该函数用于创建一个新的jQuery对象,然后将一个DOM元素集合加入到jQuery栈中,最后返回该jQuery对象,有三个参数,如下:

  elems    Array类型 将要压入 jQuery 栈的数组元素,用于生成一个新的 jQuery 对象

  name    可选。 String类型 生成数组元素的 jQuery 方法名

  selector   可选。 Array类型 传递给 Query 方法的参数(用于序列化)

参数2和参数3可选的,用于设置返回的新的jQuery对象的selector属性

调用pushStack后之前的jQuery对象内的DOM引用是不会消失的,还保存到新的对象的prevObject里,我们可以通过end()来获取之前的jQuery对象,例如:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
  7. </head>
  8. <body>
  9. <p id="p1">今天天气很好</p><p id="p2">是吗</p>
  10. <button id="b1">get News</button><button id="b2">get olds</button>
  11. <script>
  12. var a = $('p1');
  13. b1.onclick=function(){
  14. a=a.pushStack([p2],'Test','arg');
  15. console.log(a);
  16. }
  17. b2.onclick=function(){
  18. a=a.prevObject;
  19. console.log(a)
  20. }
  21. console.log(a); //初始化时a.selector="p1"
  22. </script>
  23. </body>
  24. </html>

渲染如下:

初始化时输出如下:

a保存的是p1这个DOM节点,然后点击get News,输出如下:

此时a中保存的p2这个DOM节点了,然后再点击get olds,输出如下:

又回到初始化的状态了

 

 源码分析


 writer by:大沙漠 QQ:22969969

pushStack定义在内部的jQuery.fn上,如下:

  1. jQuery.fn = jQuery.prototype = {
  2. /**/
  3. pushStack: function( elems, name, selector ) { //创建一个新的空jQuery对象,然后把DOM元素集合放入这个jQuery对象中,并保留对当前jQuery对象的引用,该方法它为很多方法提供了支持。
  4. // Build a new jQuery matched element set
  5. var ret = this.constructor(); //构造一个新的空jQuery对象ret
  6.  
  7. if ( jQuery.isArray( elems ) ) { //如果参数elems是数组,则借用数组方法push()插入
  8. push.apply( ret, elems );
  9. } else {
  10. jQuery.merge( ret, elems ); //否则调用方法jQuery.merge( first, second ) 合并。
  11. }
  12. // Add the old object onto the stack (as a reference)
  13. ret.prevObject = this; //在新Query对象ret上设置属性prevObject,指向当前jQuery对象,从而形成一个链式栈
  14. ret.context = this.context;
  15. if ( name === "find" ) {
  16. ret.selector = this.selector + ( this.selector ? " " : "" ) + selector;
  17. } else if ( name ) {
  18. ret.selector = this.selector + "." + name + "(" + selector + ")"; //将name和selector保存到生成的jQuery对象的selector属性里,比如:.appendTo(p)
  19. }
  20. // Return the newly-formed element set
  21. return ret; //最后返回ret这个新的jQuery对象
  22. },
  23. /**/
  24. };

就是内部创建创建一个新的jQuery对象并返回,通过prevObject属性来建立和之前的jQuery对象的链接而已。

原文链接:http://www.cnblogs.com/greatdesert/p/11399230.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号