该函数用于创建一个新的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对象的链接而已。

jQuery 源码解析(三) pushStack方法 详解的更多相关文章

  1. vuex 源码解析(三) getter属性详解

    有时候我们需要从store中的state中派生出一些状态,例如: <div id="app"> <p>{{reverseMessage}}</p> ...

  2. jQuery 源码解析(三十) 动画模块 $.animate()详解

    jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...

  3. jquery源码解析：pushStack，end，ready，eq详解

    上一篇主要讲解了jQuery原型中最重要的方法init.接下来再讲一些比较常用的原型方法和属性 core_slice = [].slice, jQuery.fn = jQuery.prototype ...

  4. 十一.jQuery源码解析之.pushStack()

    pushStack()顾明思意,就是像桟中添加东西呗,现在看看他是如何添加东西的. 创建一个空的jQuery对象,然后把Dom元素集合放入这个jQuery对象中, 并保留对当前jQuery对象的引用. ...

  5. guava-retrying 源码解析（停止策略详解）

    一.停止策略相关类 1.停止策略接口:StopStrategy接口,只有一个抽象方法 // 是否应该停止重试.不同的停止策略有不同的实现.boolean shouldStop(Attempt fail ...

  6. guava-retrying 源码解析（等待策略详解）

    一.等待策略相关类: 1.等待策略接口:WaitStrategy接口 该接口只有一个方法,就是返回尝试失败之后,下一次尝试之前的等待时间.long computeSleepTime(Attempt f ...

  7. guava-retrying 源码解析（阻塞策略详解）

    这是一种策略,用于决定重试者应如何在重试尝试之间进行阻止.通常这只是一个thread.sleep(),但是如果需要的话,实现可能更复杂. 一.阻塞策略相关的类或接口 1.阻塞策略接口:BlockStr ...

  8. jQuery 源码解析(三十一) 动画模块 便捷动画详解

    jquery在$.animate()这个接口上又封装了几个API,用于进行匹配元素的便捷动画,如下: $(selector).show(speed,easing,callback)        ;如 ...

  9. 十七.jQuery源码解析之入口方法Sizzle(1)

    函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口. 函数Sizzle执行的6个关键步骤如下: ...

随机推荐

  1. C++入门到理解阶段二基础篇(2)——C++注释、变量、常量、关键字、标识符

    目录 1.注释 注释作用 注释的方式 2.变量 变量基本知识 定义变量 3.常量 常量基本知识 整数常量 浮点常量 布尔常量 字符常量 字符串常量 常量定义 使用 #define 预处理器. 使用 c ...

  2. Delphi - 创建SuperDll 持续更新

    Delphi SuperDll 作为一名5年的Delpher,一直认为Delphi是桌面应用的王者,我相信其他的Delpher也这么认为. 但是,慢慢的我发现普通方式的Delphi开发会造成代码的严重 ...

  3. Java生鲜电商平台-电商订单系统全解析

    Java生鲜电商平台-电商订单系统全解析 说明:Java生鲜电商平台-电商订单系统全解析主要讲解OMS的内容,设计,开发,架构等知识. 今天分享将会分为以下三个环节来阐述: 1.订单系统的介绍 2.订 ...

  4. 采坑 - LODOP，打印预览

    结合 layui.弹出框内容样式如下: 红框表示,左右的内边距. 图一 打印预览的样式如下:红框表示,左右的内边距. 图二 要根据图二的左右内边距,去修改图一的左右内边距.不然会影响正文内容高度的判断 ...

  5. 程序员的自我修养系列(一)：优雅的代码管理工具之GitHub

    1.导言 代码管理是程序员经常遇到一个问题,很多童鞋将代码保存到本地硬盘,此种方法管理混乱,也存在代码丢失的风险,且版本无法控制,因此养成良好的代码管理习惯是程序员的必修课.在众多代码管理工具中笔者在 ...

  6. UITableView总结

    .协议介绍 UITableViewDataSource() UITableViewDelegate(常用) .刷新 下拉刷新: 上拉刷新 .搜索 .重用 自定义cell 不使用重用方法 注册Cell ...

  7. JavaScript—图片与base64编码互相转换

    图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...

  8. 如何在VIM中保存编辑的只读文件

    我们经常碰到这样的情景:在VIM中编辑了一个系统配置文件,当需要保存时才发现当前的用户对该文件没有写入的权限, 这时候怎么办呢? 当需要保存时,输入以下的命令: :w !sudo tee %

  9. fiddler---Fiddler弱网测试

    无论是做web端还是app端的测试,我们都需要对弱网进行测试,对于弱网方法有很多种,如:Fiddler模拟弱网,控制电脑的网速等,今天介绍下Fiddler如何进行测试弱网 什么是弱网 弱网看字面意思就 ...

  10. 开源敏捷测试管理& 开源BUG跟踪管理软件itest(爱测试) V3.3.1小改紧急发布及正实现功能预告

    v3.3.1 下载地址 :itest下载 码云源码地址 https://gitee.com/itestwork/itest 开源中国  itest项目地址   https://www.oschina. ...