狼翔天地

以下拉布幕的效果顯示出來：

$("div").hide();

$("div").css("color", "blue");

$("div").slideDown();

這樣的三行程式碼可以用以下一行的程式碼取代，結果會是完全相同的：

$("div").hide().css("color", "blue").slideDown();

是否感到很神奇呢？在 jQuery 的架構設計上，大部分的函數都會在處理完該做的事情後，再將原本傳入的元素給回傳回去，因此函數都可以連續這樣一個接著一個的使用。還記得一開始所說的 jQuery 可以讓你的程式碼更精簡嗎？看了上面的一些範例後，現在應該有點感覺了吧。



講到 jQuery 的函數連續使用，有兩個很重要的函數必須在此介紹一下。第一個是 end()，這個函數執行後，會回傳「前一組找到的元素」。另一個是 find()，這個函數的用法如同使用 $() 找文件內的元素一樣是帶入 CSS 選擇器，執行後回傳找到的元素，不同的是 $() 是找整個文件，而 find() 是根據先前找到的元素再找其底下的元素，像是一個再過濾的功能。

$("ul.open")                // [ ul, ul, ul ]

  .children("li")           // [ li, li, li ]

  .addClass("open")         // [ li, li, li]

  .end()                    // [ ul, ul, ul ]

  .find("a")                // [ a, a, a ]

  .click(function(){

    $(this).next().toggle();

    return false;

  })                        // [ a, a, a ]

  .end();                   // [ ul, ul, ul ]

上面這一段程式碼連續使用多個函數，且透過 end() 和 find() 來分別對不同的元素進行操作，詳細的步驟解釋如下：

• 找出文件內所有 class 為 open 的
  
  
  • 過濾出下一層的所有
  
  
  • 對這些
  • 新增一個 class
  
  
  • 回前一次搜尋的結果，也就是所有的
    
    
    • 再找出底下所有的
    
    
    • 對 新增事件處理
    
    
    • 回前一次搜尋的結果