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是經過事件來驅動，異步來完成一些本須要阻塞進程的操做。