jQuery 關於偽類選擇符的使用說明_jquery
- WBOY原創
- 2016-05-16 17:35:431427瀏覽
jQuery選擇器的強大不僅在於選擇器支援基本的css選擇符，還支援許多CSS的偽類選擇符，甚至可以自訂選擇符，以下讓我們來看看一些偽類選擇符
:nth-child的用法
nth-child是css3偽類選擇符,在jQuery實現了，在Jquery API中對nth-child的定義是：」符合其父元素下的第N個子或奇偶元素」。讀著感覺有點繞口，下面讓我們用例子來說明:
- one
- two
- three four
- five
- six
- seven
- eight
- nine
- 1
- 4
- 5
- 6
- 7
- 6
- 8
- 9
li>3
>
$("li:nth-child(2)").css("background-color", "blue");
運作效果如下:
API定義中的符合其父輩指的是所選元素的父元素不同，則分開選擇。在上面例子中雖然一共選擇18個
- ,所以會選擇兩個.如果將其放入同一個
- 中，如果放入同一個
- 執行上面程式碼，則：
- 理解了上面匹配父輩元素，下面來說說這個選擇符參數的用法.
向上面那樣直接給出選擇的位置，但是這裡注意，這個位置是以1為開始的，而不是0 n個倍數選擇法，比如可以使3n 1,-3n 1，4n,等，匹配所有頁面上存在的n的倍數
li>five
>
效果:
可見相對應的元素都被符合
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偽類選擇符不只是匹配標籤，還會匹配
可以看到，不光被選擇，
偽類選擇子可以巢狀
通常情況下，我們可以透過巢狀偽類選擇符來達到我們需要的效果,偽類選擇符，如下：
- 1
- 2
- 4
- 5
- 6
- 7
效果:
可見，除了第一個和最後一個li,其它都被選擇.當然，嵌套是有層數限制的，具體的次數我就不太清了(各位高手記得麻煩告訴我下),反正夠你進行不是變態的使用:-)
自訂偽類選擇子
jquery也提供給我們擴充原有選擇符的方式，可以讓我們根據自己的需求自訂選擇符，以下透過一個有實際意義的例子看如何做到：
在我們使用jquery的serialize方法將目前表單中的元素提交到伺服器時，總是會選上asp.net的ViewState()這無疑浪費了很多資源，我們透過一個擴充的偽類選擇符看如何不選擇它:
透過$.expr的方式對偽類選擇子進行擴展，可以看出，上面的選擇符使用:noViewState後,viewStateState沒有被選擇.
小結:
jQuery的偽類選擇符是很強大的一項功能,它內置了很多種方便我們選擇的選擇符，我們可以嵌套甚至擴展這些偽類選擇符.這讓我們的js編程更加愉悅了許多.