zoukankan      html  css  js  c++  java
  • jQuery 源码解析(三) pushStack方法 详解

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

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

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

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

    参数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>

    渲染如下:

    初始化时输出如下:

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

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

    又回到初始化的状态了

     源码分析


     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对象的链接而已。

  • 相关阅读:
    Django基础篇
    转 枚举设备栈
    转 Windows串口过滤驱动程序的开发
    VS2010 + WinDDK 搭建驱动开发环境(转)
    cef 下载地址
    electron入门教程
    转:PHP 生成复杂JSON格式 简单快速方法
    CEF General Usage(CEF3预览)
    转:关于使用ImageMagick和Tesseract进行简单数字图像识别
    转 Tesseract-OCR 字符识别---样本训练
  • 原文地址:https://www.cnblogs.com/greatdesert/p/11399230.html
Copyright © 2011-2022 走看看