请选择 进入手机版 | 继续访问电脑版

10模板

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 5255|回复: 10

end与addBack

[复制链接]

1327

主题

1842

帖子

4789

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4789
发表于 2017-3-2 11:17:50 | 显示全部楼层 |阅读模式

大多数jQueryDOM遍历方法来操作jQuery对象实例,并创建一个新的对象,匹配一个不同的DOM元素集合。当发生这种情况时,实际上是新的元素集合被压入到对象内部维护的栈中。每次过滤方法都会被压入栈中。当我们需要返回到前一个状态时,我们可以使用end()进行出栈操作,来返回栈中的前一个状态。

假设页面上有几个列表项:右图所示

end()方法主要用于jQuery的链式属性中。当没有使用链式用法时,我们通常只是调用变量名上的前一个对象,所以我们不需要操作栈。

使用end()时,我们可以一次性调用所有需要的方法:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');
链式的原理就是要返回当前操作的上下文。

下面的代码是错误的:

$('ul.first').find('.foo').css('background-color', 'red').find('.bar').css('background-color', 'green');
上面的代码因为上下文被切换了,所以执行find(‘bar’)时就出错了。

下面的代码是正确的写法:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');
首先在链式用法中只在第一个列表中查找样式为 foo 的项目,并将其背景色变成红色。然后end()返回调用find()之前的状态。因此,第二次 find() 将只会查找 <ul class="first"> 中的 '.bar',而不是继续在<li class="foo">中进行查找,结果是将匹配到的元素的背景色变成绿色。上述代码的最终结果是:第一个列表中的第 1 和第 3 个列表项的背景色有颜色,而第二个列表中的任何项目都没有背景色。

总的来说:end方法就是回溯到上一个Dom合集,因此对于链式操作与优化,这个方法还是很有意义的。

源码实现

既然是回溯到上一个DOM合集,那么肯定end方法中返回的就是一个jQuery对象了,所以我们看源码其实就是返回prevObject对象了,如下代码:

end: function() {
     return this.prevObject || this.constructor(null);
}
prevObject在什么情况下会产生?

在构建jQuery对象的时候,通过pushStack方法构建,如下代码:

jQuery.fn.extend({
    find: function(selector) {

        //...........................省略................................

        //通过sizzle选择器,返回结果集
        jQuery.find(selector, self, ret);

        // Needed because $( selector, context ) becomes $( context ).find( selector )
        ret = this.pushStack(len > 1 ? jQuery.unique(ret) : ret);
        ret.selector = this.selector ? this.selector + " " + selector : selector;
        return ret;
    }
}


可以看到通过jQuery.find后得到了结果ret这个就是通过纯的DOM节点,那么如果变成一个jQuery对象呢?

接着我们看pushStack对象,作用就通过新的DOM元素去创建一个新的jQuery对象

pushStack: function( elems ) {
    // Build a new jQuery matched element set
    var ret = jQuery.merge( this.constructor(), elems );

    // Add the old object onto the stack (as a reference)
    ret.prevObject = this;
    ret.context = this.context;

    // Return the newly-formed element set
    return ret;
}
流程解析:

1、首先构建一个新的jQuery对象,因为constructor是指向构造器的,所以这里就等同于调用jQuery()方法了,返回了一个新的jQuery对象;

2、然后用jQuery.merge语句把elems节点合并到新的jQuery对象上;

3、最后给返回的新jQuery对象添加prevObject属性,我们看到prevObject其实还是当前jQuery的一个引用罢了,所以也就是为什么通过prevObject能取到上一个合集的原因了。
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://code.jquery.com/jquery-latest.js"></script>
  6. <title></title>
  7. </head>
  8. <body>
  9.    

  10. <button id="end">点击end处理</button>
  11. <button id="addBack">点击addBack处理</button>

  12. <ul class="first">
  13.    <li class="foo">list item 1</li>
  14.    <li>list item 2</li>
  15.    <li class="bar">list item 3</li>
  16. </ul>
  17. <ul class="second">
  18.    <li class="foo">list item 1</li>
  19.    <li>list item 2</li>
  20.    <li class="bar">list item 3</li>
  21. </ul>

  22. <script type="text/javascript">

  23. //.end()jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。
  24. //当一个DOM遍历方法被调用时,新的元素集合推入到堆栈中。
  25. //如果还需要包含先前的元素集合,.addBack()

  26. $("#end").click(function(){
  27.   $('ul.first').find('.foo').css('background-color', 'red')
  28.     .end().find('.bar').css('background-color', 'green');  
  29. })

  30. //addBack包含了自身的选择器
  31. $("#addBack").click(function(){
  32.   $('.foo').nextAll().addBack()
  33.     .css('background-color', 'red');
  34. })


  35. </script>
  36. </body>
  37. </html>
复制代码
asdsadsa
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|10模板  

GMT+8, 2018-8-14 14:43 , Processed in 0.280143 second(s), 22 queries .

快速回复 返回顶部 返回列表