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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
vue实现点击选中,其他的不选中方法
Sep 05 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 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面向对象编程self和static的区别
2016/05/08 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
2014/12/31 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
在Django中使用Sitemap的方法讲解
2015/07/22 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
我的画教学反思
2014/04/28 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
关于颐和园的导游词
2015/01/30 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
2015年统战工作总结
2015/05/19 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers