jQuery 關於偽類選擇符的使用說明_jquery

   jQuery選擇器的強大不僅在於選擇器支援基本的css選擇符，還支援許多CSS的偽類選擇符，甚至可以自訂選擇符，以下讓我們來看看一些偽類選擇符

  :nth-child的用法
         nth-child是css3偽類選擇符,在jQuery實現了，在Jquery API中對nth-child的定義是：」符合其父元素下的第N個子或奇偶元素」。讀著感覺有點繞口，下面讓我們用例子來說明:

複製程式碼 程式碼如下:

   

   
• one

   
• two

   
• three
four
   
• five

   
• six

   
• seven

   
• eight

   
• nine

   

   

   
• 1

  li>3
   
• 4

   
• 5

   
• 6

   
• 7
 
• 6

   >
   
• 8

   
• 9

   

   

  
        $("li:nth-child(2)").css("background-color", "blue");
   

   

運作效果如下:  

    

API定義中的符合其父輩指的是所選元素的父元素不同，則分開選擇。在上面例子中雖然一共選擇18個

但是這18

分屬於2個不同的

,所以會選擇兩個.如果將其放入同一個
中，如果放入同一個
執行上面程式碼，則：

理解了上面匹配父輩元素，下面來說說這個選擇符參數的用法.

向上面那樣直接給出選擇的位置，但是這裡注意，這個位置是以1為開始的，而不是0 n個倍數選擇法，比如可以使3n 1,-3n 1，4n,等，匹配所有頁面上存在的n的倍數

範例:複製程式碼

程式碼如下:

   

one

   

two

   

three

   

four

li>five
   

six

   

seven

   

eight

 >

   
   

   


效果:

可見相對應的元素都被符合

   3.還有一種用法是我們熟知的odd和even,就是奇數和偶數，如下：

複製代碼程式碼如下:

  

效果:

 

:first-child&last-child

   從上面的nth-child可以看到」符合父類別下的「意義，first-child和last-child也同樣是這樣.它們可以看做nth-child的封裝：

first-child和nth-child(1)等價，這裡就不多說了.

而first-child目前我還找不到等價的nth-child表達式，符合父類別下的最後一個子元素:
效果:

:input不只是匹配input

   個選擇符我想大家都比較熟悉，但是要注意，input偽類選擇符不只是匹配標籤，還會匹配和:<br><div class="codetitle"> <span> <a style="CURSOR: pointer" data="39390" class="copybut" id="copybut39390" onclick="doCopy('code39390')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code39390"> <br>第一個：<input type="input"><br>第二個： <p><br>第三個：<textarea>
   

 可以看到，不光被選擇，和也選擇了

偽類選擇子可以巢狀

   通常情況下，我們可以透過巢狀偽類選擇符來達到我們需要的效果,偽類選擇符，如下：

複製程式碼 代碼如下:

   
• 1

   
• 2
  
   
• 4

   
• 5

   
• 6

   
• 7

   

   


效果:

  

   可見，除了第一個和最後一個li,其它都被選擇.當然，嵌套是有層數限制的，具體的次數我就不太清了(各位高手記得麻煩告訴我下),反正夠你進行不是變態的使用:-)

自訂偽類選擇子

   jquery也提供給我們擴充原有選擇符的方式，可以讓我們根據自己的需求自訂選擇符，以下透過一個有實際意義的例子看如何做到：

   在我們使用jquery的serialize方法將目前表單中的元素提交到伺服器時，總是會選上asp.net的ViewState()這無疑浪費了很多資源，我們透過一個擴充的偽類選擇符看如何不選擇它:

複製程式碼 程式碼如下:

   

   


透過$.expr的方式對偽類選擇子進行擴展，可以看出，上面的選擇符使用:noViewState後,viewStateState沒有被選擇. 

小結:

    jQuery的偽類選擇符是很強大的一項功能,它內置了很多種方便我們選擇的選擇符，我們可以嵌套甚至擴展這些偽類選擇符.這讓我們的js編程更加愉悅了許多.