jQuery之end()和pushStack()使用介绍

但在我们自己写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);

图解:

了解这个之后, 我们来做一个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.

(0)

相关推荐

  • jquery中push()的用法(数组添加元素)

    push定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) 参数 描述 newelement1 必需.要添加到数组的第一个元素. newelement2 可选.要添加到数组的第二个元素. newelementX 可选.可添加多个元素. 返回值 把指定的值添加到数组后的新长度. 说明 push() 方法可把它的参数顺序添加到 arrayObjec

  • jQuery之end()和pushStack()使用介绍

    但在我们自己写jQuery代码的时候,却很少关注或使用过pushStack(). 如果我们需要写个涉及DOM遍历的插件,它就会显得尤其有用. 在jQuery内部,pushStack()方法通过改变一个jQuery对象的prevObject属性来"跟踪"链式调用中前一个方法返回的DOM结果集(被jQuery封装过,也是个jQuery对象,说是"跟踪",是因为实际存储的是个引用). 当我们再链式调用end()方法后, 内部就返回当前jQuery对象的prevObject

  • jQuery常见的选择器及用法介绍

    选择器的意义就是将众多html代码中准确的找出我们想找的单元. 接下来将常见的选择器以及作用列举出来. 基本选择器 $('#test1').css('background' , 'gray'); 可以找到id = test1的单元. $('p').css('background' , 'blue'); 所有的P标签都会被选中. $('.test2').css('background' , 'green'); Class = test2的单元全部被选中. $('*').css('backgroun

  • jQuery中 bind的用法简单介绍

    bind介绍 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 语法 $(selector).bind(event,data,function) event 必须.添加到元素的一个或多个事件如:click,mouseover,mouseup,change,select data 可不填.传递到函数的额外数据,如:$(selector).bind("click","input",function(){}); function(){}

  • JQuery入门—JQuery程序的代码风格详细介绍

    <jQuery权威指南>第1章jQuery开发入门,本章通过循续渐进的方式,先从jQuery的基础概念入手,介绍jQuery库的下载,引入简单应用方法:后部分侧重于jQuery控制DOM对象和页面CSS样式的介绍,通过一些简单的小示例,使读者对jQuery在页面中的功能应用有一个大致的了解,为下一章节进一步学习jQuery库的详细对象和方法奠定基础.本节为大家介绍jQuery程序的代码风格. 1.1.5 jQuery程序的代码风格 1."$"美元符的使用 在jQuery程序

  • jQuery拖拽 & 弹出层 介绍与示例

    iDrag & iDialog 介绍特点:iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画.提供了两个方法: •1.拖拽函数 iDrag() 或 $.drag();•2.对话框函数 iDialog() 或 $.dialog(); 跨平台兼容:兼容:IE6+.Firefox.Chrome等主流浏览器(其它暂时没条件测试).并且IE6下也能支持现代浏览器的静止定位(fixed).覆盖下拉控件. 渐进增强的体验:确保IE家族功能完善的前提下

  • Jquery 数据选择插件Pickerbox使用介绍

    该插件就是为此而生,所以就写了一个. 不过目前并不支持IE6浏览器. 希望大家能多多指教. :) pickerbox 1.0 介绍 pickerbox简称采摘盒子,是基于Jquery的插件,同时也依赖了Ztree3.2,Easyui1.26,及AsyncBox1.4.5.主要为了解决选择多条件的数据. -封装主要插件复杂的使用,关心主要的常用使用. -支持树,导航导向呈现数据. -支持跨iframe获取数据. -灵活支持记录数据. -提供重要事件回调. -兼容IE8以上浏览器. 由于多个插件集成

  • jquery JSON的解析方式示例介绍

    这里考虑都考虑的是服务器返回的是JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先给出JSON字符串集,字符串集如下: var data=" { root: [ {name:'1',value:'0'}, {name:'6101',value:'西安市'}, {name:'6102',value:'铜川市'}, {name:'6103',value:'宝鸡市'}, {name:'6104',value:'咸阳市'}, {

  • jQuery过滤选择器:not()方法使用介绍

    jQuery(':not(selector)') 在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) 复制代码 代码如下: <p >"a">sdfsdfs</p> <p >"b">sdfsdfs</p> <p >"c">sdf

  • jquery.ajax之beforeSend方法使用介绍

    常见的一种效果,在用ajax请求时,没有返回前会出现前出现一个转动的loading小图标或者"内容加载中..",用来告知用户正在请求数据.这个就可以用beforeSend方法来实现. 下载demo:ajax loading 代码如下: 复制代码 代码如下: function test_ajax(){    $.ajax(    {       type:"GET",//通常会用到两种:GET,POST.默认是:GET       url:"a.php&qu

  • jQuery.Validate验证库的使用介绍

    jQuery.Validate验证库1.下载jquery.validate,这里我提供jquery-validation-1.9.0,点击下载 默认校验规则 复制代码 代码如下: (1)required:true               必输字段(2)remote:"check.php"          使用ajax方法调用check.php验证输入值(3)email:true                  必须输入正确格式的电子邮件(4)url:true          

随机推荐