jQuery中的end()

最新推荐文章于 2022-03-19 11:22:44 发布

chunchun1230

最新推荐文章于 2022-03-19 11:22:44 发布

阅读量415

点赞数

分类专栏： jQuery点滴

本文链接：https://blog.csdn.net/chunchun1230/article/details/104146333

版权

jQuery点滴专栏收录该内容

22 篇文章 0 订阅

订阅专栏

要说end()，我们就不得不说prevObject。

在jQuery中，每个jQuery对象都有一个prevObject属性

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jquery源码分析</title>
        <script src="jquery-2.0.3.js"></script>
        <script>
        
            $(function(){
                var $p = $('p');
                console.log($p);
            });
        </script>
    </head>
    <body>
       <p>111</p>
       <p>222</p>
    </body>
</html>

结果：

这个属性是做什么的呢？

　　jQuery内部维护着一个jQuery对象栈。每个遍历方法都会找到一组新元素（一个jQuery对象），然后jQuery会把这组元素推入到栈中。

可能上面这句话让人读起来有些茫然，不要紧，我们来一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color: antiquewhite;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div></div>
<div></div>
<script src="jquery-3.1.1.js"></script>
<script>
    console.log($('div').eq(0));   // 第二个div元素
    console.log($('div').eq(0).end());  // $('div)
    
</script>
</body>
</html>

看完上面这个例子，我们就大概就能明白end()的作用了。(′div′).eq(0)的pervObject为(′div′).eq(0)的pervObject为('div')。而end()的作用就是返回当前jQuery对象(在本例中就是$('div').eq(0))的prevObject对象。

来看一看end()的源码：

  jQuery.fn.end =  function() {
        return this.prevObject || this.constructor(null);  // 返回当前jQuery对象的prevObject对象，简单直接
    };

为了更深入了了解prevObject的实现原理，我们先来看一看eq()的源码：

 jQuery.eq = function( i ) {
        var len = this.length,
            j = +i + ( i < 0 ? len : 0 );  // 负索引对应的正索引 =  负索引 + 长度
        return this.pushStack( j >= 0 && j < len ? [ this[j] ] : [] );   // 讲对应的DOM元素入栈操作
    }

eq()用了一个pushStack()方法，那么pushStack()是什么鬼？ pushStack会将传入的DOM元素创建为一个新的jQuery对象，并将这个新的jQuery对象的prevObject属性进行修改。

 jQuery.fn.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;
    };

    // 将DOM元素融入到jQuery对象中，并返回融合后的jQuery对象
    jQuery.merge = function( first, second ) {
        // first：jQuery对象  second：DOM元素组成的数组
        var len = +second.length,
            j = 0,
            i = first.length;

        for ( ; j < len; j++ ) {
            first[ i++ ] = second[ j ];
        }

        first.length = i;

        return first;
    };

end()方法的使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq的end方法</title>
        <script src="jquery-2.0.3.js"></script>
        <style>
            div{
            width:100px;
            height:100px;
            background: red;
            margin-bottom: 10px;
        }
        </style>
    </head>
    <body>
        <ul class="first">
            <li class="foo">list item 1</li>
            <li>list item 2</li>
            <li class="bar">list item 3</li>
         </ul>
         <ul class="second">
            <li class="foo">list item 1</li>
            <li>list item 2</li>
            <li class="bar">list item 3</li>
         </ul>
        <script>
          $('ul.first').find('.foo').css('background-color', 'red');
          
 
          
        </script>
    </body>
</html>

效果如图所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jq的end方法</title>
        <script src="jquery-2.0.3.js"></script>
        <style>
            div{
            width:100px;
            height:100px;
            background: red;
            margin-bottom: 10px;
        }
        </style>
    </head>
    <body>
        <ul class="first">
            <li class="foo">list item 1</li>
            <li>list item 2</li>
            <li class="bar">list item 3</li>
         </ul>
         <ul class="second">
            <li class="foo">list item 1</li>
            <li>list item 2</li>
            <li class="bar">list item 3</li>
         </ul>
        <script>
        //   $('ul.first').find('.foo').css('background-color', 'red');
          $('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green');
 
          
        </script>
    </body>
</html>

效果如图所示

chunchun1230

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的end()

要说end()，我们就不得不说prevObject。在jQuery中，每个jQuery对象都有一个prevObject属性<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">...
复制链接

扫一扫

专栏目录