jquery链式操作初体验

首先，我们要了解什么是jquery链式操作。

          链式操作就是通过对象上的方法，最后return this把对象再返回回来，对象的继续调用。我们做一个小的JS效果（模仿taobao的评分）：

<ul id="list">
    <li>★</li>
    <li>★</li>
    <li>★</li>
    <li>★</li>
    <li>★</li>
</ul>

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

/*链式操作*/
$("ul li").hover(
            function(){$(this).css("color","#f9c").prevAll().css("color","#f9c");}
            ,function(){$(this).css("color","").prevAll().css("color","");}
    ).click(function(){$("#list").children("li").off();});

最直观的好处就是代码量减少了，看着也美观大方。

如果没有链式操作，完成这个效果需要写onmouseover（），onmouseout（），onclick（）三个事件来实现。代码会多很多，这就是链式操作减少代码的最直观感受，但是所有对象的方法返回的都是对象本身，也就是说没有返回值，这不一定在任何环境下都适合。

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

为了更好的异步体验，Javascript是无阻塞语言，不是Javascript没阻塞，而是因为Javascript是通过事件来驱动，异步来完成一些本需要阻塞进程的操作。