jQuery之end()和pushStack()使用介绍


Posted in Javascript onFebruary 07, 2012

但在我们自己写jQuery代码的时候,却很少关注或使用过pushStack(). 如果我们需要写个涉及DOM遍历的插件,它就会显得尤其有用.

在jQuery内部,pushStack()方法通过改变一个jQuery对象的prevObject属性来"跟踪"链式调用中前一个方法返回的DOM结果集(被jQuery封装过,也是个jQuery对象,说是"跟踪",是因为实际存储的是个引用). 当我们再链式调用end()方法后, 内部就返回当前jQuery对象的prevObject. 具体更多细节, 直接看源码即可. 这里只做个简单的分析, 直接来个例子:

html:

<div id="grandparent"> 
I am grandparent. 
<div id="parent"> 
I am parent. 
<div id="child"> 
I am child. 
</div> 
</div> 
</div>

javascript:
var els = $('#child').parent().parent(); 
console.dir(els);

图解:

jQuery之end()和pushStack()使用介绍

了解这个之后, 我们来做一个grandparent插件,用来替代.parent().parent()这样连续2次的调用,直接用.grandparent().如果"一不小心"没考虑end()的话,代码很可能就是这个样子的:
$.fn.grandparent = function() { 
return this.parent().parent(); 
};

依旧用上面那个例子:
$('#child').grandparent().end(); //jQuery-[div#parent]

很显然, 大多数情况下这不是我们想要的, 事实上我们想通过链式调用end()直接返回到jquery[div#child]. 现在该是pushStack出马的时候了,我们只要加上一行即可:

$.fn.grandparent = function() { 
var els = this.parent().parent(); 
return this.pushStack(els.get()); 
};

在pushStack内部, 把els.get()返回的DOM数组封装成一个新的jQuery对象, 而this(jQuery[div#child])会赋值给之前新构建jQuery的prevObject, 最后返回新生的那个jQuery对象.

所以这次, 当我们再用end()就对了:

var grandparent = $('#child').grandparent()./* jquery-[div#grandparent]*/.end() /*jquery-[div#child]*/

此博文内容的主体思想来自Learning JQuery中的一篇博客, 感谢该作者的分享. 感兴趣的话, 点击jQuery pushStack.

Javascript 相关文章推荐
xtree.js 代码
Mar 13 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 #Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 #Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 #Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 #Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 #Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 #Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 #Javascript
You might like
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
python与pycharm有何区别
2020/07/01 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
python MD5加密的示例
2020/10/19 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
学生会招新策划书
2014/02/14 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书