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 相关文章推荐
简单的JS多重继承示例
Mar 13 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
Vue实现简单的跑马灯
May 25 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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为php增加openssl模块的方法
2011/06/14 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
JS 统计时间
2021/03/09 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
python 回调函数和回调方法的实现分析
2016/03/23 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python求最大值最小值方法总结
2019/06/25 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
python中Mako库实例用法
2020/12/31 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
公司JAVA开发面试题
2015/04/02 面试题
新大陆软件面试题
2016/11/24 面试题
房地产项目策划书
2014/02/05 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
运动会新闻稿
2015/07/17 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫