[連續使用函數]



jQuery 很重要的一個特性是可以連續地使用函數(Chaining),當你選取了一個或一組的元素後,可以連續對這些元素進行多個處理。以下範例會將所有的
隱藏,修改文字顏色為藍色,再將
以下拉布幕的效果顯示出來:

 


  1. $("div").hide();   

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

  3. $("div").slideDown();  




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

 


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




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



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

 


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

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

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

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

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

  6.   .click(function(){   

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

  8.     return false;   

  9.   })                        // [ a, a, a ]   

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




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

狼翔月影 發表在 痞客邦 PIXNET 留言(0) 人氣()