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 相关文章推荐
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
JS随机排序数组实现方法分析
Oct 11 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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抓即时股票信息
2006/10/09 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
学习php笔记 字符串处理
2010/10/19 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
js实现防止被iframe的方法
2015/07/03 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
python中如何进行连乘计算
2020/05/28 Python
快速了解Python开发环境Spyder
2020/06/29 Python
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
青年教师培训方案
2014/02/06 职场文书
面试必备的求职信
2014/05/25 职场文书
邓小平理论心得体会
2014/09/09 职场文书
公司门卫岗位职责
2015/04/13 职场文书
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL