jQuery之end()和pushStack()使用介绍
更新时间：2012年02月07日 00:15:23 作者：
pushStack()方法在jQuery的DOM操作中被频繁的使用, 如在parent(), find(), filter()中, 当然还有其他许多类似的方法, 它们往往需要返回一个jQuery封装过的DOM结果集
但在我们自己写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);
图解:
$.fn.grandparent = function() {
return this.parent().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]*/
在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);
图解:
复制代码 代码如下:
$.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.
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了jQuery实现简单的DIV拖动效果,涉及jQuery针对鼠标事件的响应及页面元素的动态操作技巧,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了jQuery中clearQueue()方法用法,实例分析了clearQueue()方法的功能、定义及进行清空队列操作的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，今天我们就来分享2种使用jquery实现iframe自适应高度的代码2014-06-06
项目里面一直用的都是jquery1.9，不支持browser对象，百度一下，找到了解决方案在此与大家分享下，有遇到此问题的朋友不要错过2013-11-11
将滚动的内容查询出来，放在一个div 或者别的容器里面，具体的实现代码如下2014-06-06
从这一讲开始，我们将直正接触一个JQ类库，学习一下JQ的写法，JQ的一些常用的命令等等，今天主要讲的是JQ里的选择器，这也是JQ的一大特点，这从它的名称jQuery中可以看到，主要功力体现在查询上2013-01-01
这篇文章主要介绍了jQuery延迟执行的实现方法,结合简单实例形式分析了jQuery针对无法同步执行的情况使用延迟执行的操作技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了jq 用each遍历循环的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
css()方法在使用上具有多样性。其中有一种可接受两个输入参数：样式属性和样式值，两者之间用逗号分隔，下面通过实例为大家介绍下2014-08-08
这篇文章主要介绍了jQuery回调函数的定义及用法,以实例形式详细分析了回调函数的原理与实现技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
最新评论