jQuery 源码解析(三) pushStack方法详解

时间 2020-05-29

标签 jquery 源码解析 pushstack 方法详解栏目 JQuery 繁體版

原文原文链接

该函数用于建立一个新的jQuery对象，而后将一个DOM元素集合加入到jQuery栈中，最后返回该jQuery对象，有三个参数，以下:html

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

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

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

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

调用pushStack后以前的jQuery对象内的DOM引用是不会消失的，还保存到新的对象的prevObject里，咱们能够经过end()来获取以前的jQuery对象，例如:源码分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p id="p1">今每天气很好</p><p id="p2">是吗</p>
    <button id="b1">get News</button><button id="b2">get olds</button>
    <script>
        var a = $('p1'); b1.onclick=function(){ a=a.pushStack([p2],'Test','arg'); console.log(a); 
 } b2.onclick=function(){ a=a.prevObject; 
 console.log(a) 
 } console.log(a); //初始化时a.selector="p1"
    </script>
</body>
</html>

渲染以下:ui

初始化时输出以下:this

a保存的是p1这个DOM节点，而后点击get News,输出以下:spa

此时a中保存的p2这个DOM节点了，而后再点击get olds，输出以下:prototype

又回到初始化的状态了

源码分析

writer by:大沙漠 QQ:22969969

pushStack定义在内部的jQuery.fn上，以下:

jQuery.fn = jQuery.prototype = { /**/ pushStack: function( elems, name, selector ) {    //建立一个新的空jQuery对象，而后把DOM元素集合放入这个jQuery对象中，并保留对当前jQuery对象的引用，该方法它为不少方法提供了支持。
    // Build a new jQuery matched element set
    var ret = this.constructor();                       //构造一个新的空jQuery对象ret

    if ( jQuery.isArray( elems ) ) {                    //若是参数elems是数组，则借用数组方法push()插入
 push.apply( ret, elems ); } else { jQuery.merge( ret, elems ); //不然调用方法jQuery.merge( first, second ) 合并。
 } // Add the old object onto the stack (as a reference)
    ret.prevObject = this;                              //在新Query对象ret上设置属性prevObject，指向当前jQuery对象，从而造成一个链式栈
 ret.context = this.context; if ( name === "find" ) { ret.selector = this.selector + ( this.selector ? " " : "" ) + selector; } else if ( name ) { ret.selector = this.selector + "." + name + "(" + selector + ")";     //将name和selector保存到生成的jQuery对象的selector属性里，好比:.appendTo(p)
 } // Return the newly-formed element set
    return ret;                                         //最后返回ret这个新的jQuery对象
 }, /**/ };

就是内部建立建立一个新的jQuery对象并返回，经过prevObject属性来创建和以前的jQuery对象的连接而已。

1. jquery 源码解析
2. jQuery源码解析
3. jQuery 源码解析(三十) 动画模块 $.animate()详解
4. jQuery 源码分析(四) each函数 $.each和$.fn.each方法详解
5. jquery方法详解
6. jQuery源码解析总结版本2.0.3
7. jquery源码解析平常
8. jQuery源码解析之Data
9. JQuery源码解析目录
10. jQuery源码解析之width()
更多相关文章...
• XML DOM 解析器 - XML DOM 教程
• 免费ARP详解 - TCP/IP教程
• Scala 中文乱码解决
• Flink 数据传输及反压详解

jQuery 源码解析(三) pushStack方法 详解

jQuery 源码解析(三) pushStack方法详解