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对象的链接而已。
jQuery 源码解析(三) pushStack方法 详解的更多相关文章
- vuex 源码解析(三) getter属性详解
有时候我们需要从store中的state中派生出一些状态,例如: <div id="app"> <p>{{reverseMessage}}</p> ...
- jQuery 源码解析(三十) 动画模块 $.animate()详解
jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...
- jquery源码解析：pushStack，end，ready，eq详解
上一篇主要讲解了jQuery原型中最重要的方法init.接下来再讲一些比较常用的原型方法和属性 core_slice = [].slice, jQuery.fn = jQuery.prototype ...
- 十一.jQuery源码解析之.pushStack()
pushStack()顾明思意,就是像桟中添加东西呗,现在看看他是如何添加东西的. 创建一个空的jQuery对象,然后把Dom元素集合放入这个jQuery对象中, 并保留对当前jQuery对象的引用. ...
- guava-retrying 源码解析（停止策略详解）
一.停止策略相关类 1.停止策略接口:StopStrategy接口,只有一个抽象方法 // 是否应该停止重试.不同的停止策略有不同的实现.boolean shouldStop(Attempt fail ...
- guava-retrying 源码解析（等待策略详解）
一.等待策略相关类: 1.等待策略接口:WaitStrategy接口 该接口只有一个方法,就是返回尝试失败之后,下一次尝试之前的等待时间.long computeSleepTime(Attempt f ...
- guava-retrying 源码解析（阻塞策略详解）
这是一种策略,用于决定重试者应如何在重试尝试之间进行阻止.通常这只是一个thread.sleep(),但是如果需要的话,实现可能更复杂. 一.阻塞策略相关的类或接口 1.阻塞策略接口:BlockStr ...
- jQuery 源码解析(三十一) 动画模块 便捷动画详解
jquery在$.animate()这个接口上又封装了几个API,用于进行匹配元素的便捷动画,如下: $(selector).show(speed,easing,callback) ;如 ...
- 十七.jQuery源码解析之入口方法Sizzle(1)
函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口. 函数Sizzle执行的6个关键步骤如下: ...
随机推荐
- jQuery 源码分析(十七) 事件系统模块 实例方法和便捷方法 详解
实例方法和便捷方法是指jQuery可以直接通过链接操作的方法,是通过调用$.event上的方法(上一节介绍的底层方法)来实现的,常用的如下: on(types,selector,data,fn,one ...
- hive引擎的选择：tez和spark
背景 mr引擎在hive 2中将被弃用.官方推荐使用tez或spark等引擎. 选择 tez 使用有向无环图.内存式计算. spark 可以同时作为批式和流式的处理引擎,减少学习成本. 问题& ...
- 【广州.NET社区推荐】.NET Core Q&A - ORM
Object/Relational Mapping(ORM) 作为开发工作中非常重要的组件,重量级.轻量级.简单的.复杂的 各种各样有很多种适应不同的业务场景,但这些组件分散在网络世界的各个角落,寻找 ...
- ElasticStack的入门学习
Beats,Logstash负责数据收集与处理.相当于ETL(Extract Transform Load).Elasticsearch负责数据存储.查询.分析.Kibana负责数据探索与可视化分析. ...
- Python爬虫使用selenium爬取qq群的成员信息（全自动实现自动登陆）
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: python小爬虫 PS:如有需要Python学习资料的小伙伴可以 ...
- 计科菜鸟玩生信（一）——Windows10下用docker安装GATK
1.官网下载GATK. (学校网速实在是太慢了,下载几个小时到自闭) 下载地址:https://software.broadinstitute.org/gatk/download/ 下载完成后文件夹中 ...
- JavaWeb之动态代理解决request请求编码问题
动态代理解决编码问题 1.设计模式 出现原因:软件开发过程中,遇到相似问题,将问题的解决方法抽取模型(套路) 常见设计模式:单例,工厂,适配器,装饰者,动态代理. 2.装饰者模式简单介绍 谷歌汽车开发 ...
- ES6入门系列 ----- 使用Proxy 实现观察者模式
观察者模式是指函数自动观察数据对象的变化, 一旦对象有变化,函数就会自动执行. 它定义了一种一对多的依赖关系,我们用Proxy来实现一个简单的观察者模式(PS: 初学我们认为 观察者模式 == 发布订 ...
- django支付宝支付集成
概要 本文是关于django集成支付宝[电脑网站支付]功能的过程记录. 功能逻辑主要分为两块: 用户下单跳转至支付宝支付界面 支付成功的回调验证 本文用到的alipay-sdk是基于阿里开发文档htt ...
- MySQL事务。
相关资料:https://zhuanlan.zhihu.com/p/70701037 https://zhuanlan.zhihu.com/p/59061106 一.事务. 1.概念.事 ...