十一.jQuery源码解析之.pushStack()
pushStack()顾明思意,就是像桟中添加东西呗,现在看看他是如何添加东西的.
创建一个空的jQuery对象,然后把Dom元素集合放入这个jQuery对象中,
并保留对当前jQuery对象的引用.
pushStack是核心方法之一,它为以下方法提供支持:
jQuery对象遍历:.eq(),first(),.last(),.slice(),.map();
Dom查找,过滤:.find(),.not(),.filter(),.closest(),.add(),.andSelf().
Dom遍历:.parent(),.parents(),parentUntil(),.next(),.prev(),.nextAll(),.prevAll(),
.nextUntil(),.prevUntil(),siblings(),.children(),.contents().
Dom插入:$.before(),$.after(),$.replaceWith(),.append(),.prepent(),.brfore(),.after(),.replaceWith().

241行:定义方法pushStack(elems,name,selector).
elems:准备放入新的jQuery对象的元素数组(或类似数组的集合).
name:产生元素数组elems的jQuery方法名,如eq,find,after,filter...
selector:传给jQuery方法的参数,用于修正原型属性.selector.
243行:thisconstructor是执行jQuery构造函数.加上括号.表示执行资格构造函数.
那么ret就是一个jQuery对象.但是这个jQuery对象里面是没有Dom元素引用的,
只有jQuery本身所具有的成员.
245~250行:是把参数elems合并到新的jQuery对象中.
如果elems是数组,借用push插入;否则调用方法jQuery.merge()合并.
253行:给新的jQuery对象添加属性prevObject(),并指向当前jQuery对象,
形成了一个链式桟.因此,pushStack()还可以理解为,构建一个新的jQuery对象并入栈,
新对象位于栈顶.
255行:给这个新的jQuery指定上下文.this.context要么是指定的上级dom节点,要么是默认的rootjQuery,在前面章节中说过了,不在提了.
257~261行主要是给ret指定选择器的.也就是在传入的参数selector的基础上再改造,
改造完成后作为新对象ret的selector.
264行:返回新的jQuery对象.

311行:prevObject是在调用pushStack中添加的引用,也就是说没有经过入栈的操作,这个引用时为空的;
这个时候会通过constructor这个属性构建一个空的jQuery对象并返回.
.end()方法和.pushStack()方法的原理截然相反.
.pushStack()是用于入栈,而end()确用于出桟.
$(".guo").find(".yan").css("color","red") //使用find()入栈(find调用了pushStack())
.end() //将find(".yan")出桟
.find(".si"); //继续寻找$(".guo")..find(".si")
十一.jQuery源码解析之.pushStack()的更多相关文章
- jQuery 源码解析(三) pushStack方法 详解
该函数用于创建一个新的jQuery对象,然后将一个DOM元素集合加入到jQuery栈中,最后返回该jQuery对象,有三个参数,如下: elems Array类型 将要压入 jQuery 栈的数组元素 ...
- jquery源码解析:pushStack,end,ready,eq详解
上一篇主要讲解了jQuery原型中最重要的方法init.接下来再讲一些比较常用的原型方法和属性 core_slice = [].slice, jQuery.fn = jQuery.prototype ...
- JQuery源码解析(一)
写在前面:本<JQuery源码解析>系列是基于一些前辈们的文章进行进一步的分析.细化.修改而写出来的,在这边感谢那些慷慨提供科普文档的技术大拿们. 要查阅JQ的源文件请下载开发版的JQ.j ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jquery源码解析:代码结构分析
本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94) 定义了一些变量和函数, jQuery = function() ...
- jquery 源码解析
静态与实力方法共享设计 遍历方法 $(".a").each() //作为实例方法存在 $.each() //作为静态方法存在 Jquery源码 jQuery.prototype = ...
- jQuery源码解析资源便签
最近开始解读jQuery源码,下面的链接都是搜过来的,当然妙味课堂 有相关的一系列视频,长达100多期,就像一只蜗牛慢慢爬, 至少品读三个框架,以后可以打打怪,自己造造轮子. 完全理解jQuery源代 ...
- 三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...
- jquery源码解析:addClass,toggleClass,hasClass详解
这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2&quo ...
随机推荐
- PrestaShop 1.7 用户付款的时候无法支付错误
用户付款的时候出现错误,错误的信息是没有支付方式. 这个有可能是你后台支付的国家限制没有选择. 请确定你已经选择了支付国家限制已经选择了. 当选择成功后,你应该可以看到下面的选择项.
- 处理XML Publisher导出EXCEL值变为科学计数法的问题
<fo:bidi-override direction="ltr" unicode-bidi="bidi-override"><?PoOrde ...
- CORS请求
一.简介 CORS(跨域资源共享 Cross-origin resource sharing)是实现跨域的一种常用方式.实现CORS通信的关键是服务器.只要服务器实现了CORS接口,就可以跨源通信 二 ...
- oracle增加sequence
(1)删除序列; (2)重新创建: 这个方法比较简单粗暴. drop sequence sequence_name; create sequence sequence_name minvalu ...
- Linux中查看进程和杀掉进程
ps -A查看正在运行的所有进程 kill -9 xxx杀掉某个进程,xxx为进程ID.
- 控制反转(IOC)模式
控制反转(Inversion of Control):提倡实现松耦合层.组件和类的设计原则,颠倒程序的控制流程.IoC使用分离执行特定问题处理代码的概念: IoC意味着将你设计好的对象交给容器控制,而 ...
- EPANET头文件解读系列3——TOOLKIT.H
/******************************************************************** TOOLKIT.H - Prototypes for EPA ...
- hdu 3264 09 宁波 现场 E - Open-air shopping malls 计算几何 二分 圆相交面积 难度:1
Description The city of M is a famous shopping city and its open-air shopping malls are extremely at ...
- Class 'SoapClient' not found 解决方法
Class 'SoapClient' not found ? 在百度上搜了解决办法,可是收效不佳,只知道好像要添加soap扩展模块,但怎么添加却没有说.于是,我上了google.果然,查看一些英文资料 ...
- react中findDOMNode
在使用react过程中,大家有时会那么这里的findDomNode是做什么的呢? import { findDomNode } from 'react-dom'; 简单来说是用来得到实际Dom的,因为 ...