这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
但在我们自己写 jQuery 代码的时候, 却很少关注或使用过 pushStack(). 如果我们需要写个涉及 DOM 遍历的插件, 它就会显得尤其有用. 在 jQuery 内部, pushStack()方法通过改变一个 jQuery 对象的 prevObject 属性来 "跟踪" 链式调用中前一个方法返回的 DOM 结果集 (被 jQuery 封装过, 也是个 jQuery 对象, 说是" 跟踪 ", 是因为实际存储的是个引用). 当我们再链式调用 end() 方法后, 内部就返回当前 jQuery 对象的 prevObject. 具体更多细节, 直接看源码即可. 这里只做个简单的分析, 直接来个例子: html:
pushStack() 方法在 jQuery 的 DOM 操作中被频繁的使用, 如在 parent(), find(), filter() 中, 当然还有其他许多类似的方法, 它们往往需要返回一个 jQuery 封装过的 DOM 结果集
- <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);
图解:
了解这个之后, 我们来做一个 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.
来源: http://www.phperz.com/article/17/0420/282182.html