jQuery之end()和pushStack()使用介绍_jquery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery之end()和pushStack()使用介绍_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1583字，纯文字阅读大概需要3分钟。
内容图文
但在我们自己写jQuery代码的时候,却很少关注或使用过pushStack(). 如果我们需要写个涉及DOM遍历的插件,它就会显得尤其有用. 在jQuery内部,pushStack()方法通过改变一个jQuery对象的prevObject属性来"跟踪"链式调用中前一个方法返回的DOM结果集(被jQuery封装过,也是个jQuery对象,说是"跟踪",是因为实际存储的是个引用). 当我们再链式调用end()方法后, 内部就返回当前jQuery对象的prevObject. 具体更多细节, 直接看源码即可. 这里只做个简单的分析, 直接来个例子:
html:
代码如下:
I am grandparent.
I am parent.
I am child.
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之end()和pushStack()使用介绍_jquery全部内容，希望文章能够帮你解决jQuery之end()和pushStack()使用介绍_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】