jQuery链式操作

2019独角兽企业重金招聘Python工程师标准>>>

首先，什么是链式操作呢？

通俗一点的说法就是：  将所有的操作连接起来，以链条的形式写出来。

$("div").find("h3").eq(2).html("hello");

或者还有另外一种理解：通过对象上的方法最后

return this;

把对象在返回回来，对象也可以继续调用方法，这样就可以链式操作了。

知道链式操作的概念之后，我们来看链式操作的方法/实现：

现在，我们来看这么一个例子：

    这是一个五星的评分：

<ul>
    <li>★</li>
    <li>★</li>
    <li>★</li>
    <li>★</li>
    <li>★</li>
</ul>

ul li{list-style:none;float:left;}

我们按照一般的思维是这样做的：

var ulobj =document.getElementById("list");
    var liobj = ulobj.getElementsByTagName("li");
    for(var i =0;i<liobj.length;i++){
        liobj[i].index = i; //获取i的值，index自定义变量
        liobj[i].onmouseover = function(e){
            console.log(this.index); //this表示e.target
            for(var j =0;j<=this.index;j++){
                liobj[j].style.color= '#cf9';
            }
        };
        liobj[i].onmouseout = function(e){
            console.log(this.index);
            for(var j =0;j<=this.index;j++){
                liobj[j].style.color= '';
            }
        };
        liobj[i].onclick = function(e){
            for(var j =0;j<liobj.length;j++){
                liobj[j].onmouseover = function(){};//如此事件就算是删除了，不会与之前的相冲突
                liobj[j].onmouseout = function(){};
            }
        }
    }

而我们使用链式操作：

$("ul li").hover(
    function(){$(this).css({color:"red"}).preAll().css({color:"red"})},
    function(){$(this).css({color:"red"}).preAll().css({color:"red"})}
    ).click(function(){$(this).parent().children("li").off(); });

看以上两种方法，是不是一眼就可以看出来，链式操作的优势了。所以我们很清楚了：

为什么要使用链式操作呢？

1.  首先，使用链式操作节省了代码量，是代码看起来更加的优雅。

2. 其次，为了更好的异步体验。

转载于:https://my.oschina.net/xiuhong/blog/264457