jQuery 關(guān)于偽類選擇符的使用說明
jQuery選擇器的強(qiáng)大不僅在于選擇器支持基本的css選擇符，還支持很多CSS的偽類選擇符，甚至可以自定義選擇符，下面讓我們來看看一些偽類選擇符
:nth-child的用法
nth-child是一個css3偽類選擇符,在jQuery中被實現(xiàn)了，在Jquery API中對nth-child的定義是：”匹配其父元素下的第N個子或奇偶元素“。讀著感覺有點繞口，下面讓我們通過例子來說明:
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<script type="text/javascript">
$("li:nth-child(2)").css("background-color", "blue");
</script>
運(yùn)行效果如下:
API定義中的匹配其父輩指的是所選元素的父元素不同，則分開選擇。在上面例子中雖然一共選擇18個<li>但是這18<li>分屬于2個不同的<ul>,所以會選擇兩個.如果將其放入同一個<ul>中，如果放入同一個<ul>執(zhí)行上面代碼，則：
理解了上面匹配父輩元素，下面來說說這個選擇符參數(shù)的用法.
- 向上面那樣直接給出選擇的位置，但是這里注意，這個位置是以1為開始的，而不是0 n個倍數(shù)選擇法，比如可以使3n+1,-3n+1，4n,等，匹配所有頁面上存在的n的倍數(shù)
例子:
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
</ul>
</div>
<script type="text/javascript">
$("li:nth-child(3n-1)").css("background-color", "blue");
</script>
效果:
可見相對應(yīng)的元素都被匹配
3.還有一種用法是我們熟知的odd和even,就是奇數(shù)和偶數(shù)，如下：
<script type="text/javascript">
$("li:nth-child(odd)").css("background-color", "blue");
</script>
效果:
:first-child&last-child
從上面的nth-child可以看到”匹配父類下的“含義，first-child和last-child也同樣是這樣.它們可以看做nth-child的封裝：
first-child和nth-child(1)等價，這里就不多說了.
而first-child目前我還找不到等價的nth-child表達(dá)式，匹配父類下的最后一個子元素:
效果:
:input并不只是匹配input
個選擇符我想大家都比較熟悉，但是要注意，input偽類選擇符不只是匹配<input>標(biāo)簽，還會匹配<select>和<textarea>:
第一個：<input type="input" />
第二個：<select id="select">
</select>
第三個：<textarea></textarea>
<script type="text/javascript">
alert($(":input").length);//alert 3
</script>
可以看到，不光<input>被選擇，<select>和<textarea>也被選擇了
偽類選擇符可以嵌套
通常情況下，我們可以通過嵌套偽類選擇符來達(dá)到我們需要的效果,偽類選擇符，如下：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<script type="text/javascript">
$("li:not(:first):not(:last)").css("background-color", "blue");
</script>
效果:
自定義偽類選擇符
jquery還提供給我們擴(kuò)展原有選擇符的方式，可以讓我們根據(jù)自己的需要自定義選擇符，下面通過一個有實際意義的例子看如何做到：
在我們使用jquery的serialize方法將當(dāng)前表單中的元素提交到服務(wù)器時，總是會選上asp.net的ViewState(<input type=”hidden” />)這無疑浪費了好多資源，我們通過一個擴(kuò)展的偽類選擇符看如何不選擇它:
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRWxo4mg/noF3+7k/L7nyw13HVnLQ==" />
</div>
<script type="text/javascript">
$.expr[":"].noViewState = function(element) {
return !$(element).attr("id") === "_VIEWSTATE";
}
alert($(":input:noViewState").size());//alert 0 ViewState has not been choosen
</script>
</form>
通過$.expr的方式對偽類選擇符進(jìn)行擴(kuò)展，可以看出，上面的選擇符使用:noViewState后,viewState沒有被選擇.
小結(jié):
jQuery的偽類選擇符是很強(qiáng)大的一項功能,它內(nèi)置了很多種方便我們選擇的選擇符，我們可以嵌套甚至擴(kuò)展這些偽類選擇符.這讓我們的js編程更加愉悅了許多.
相關(guān)文章
jQuery基于事件控制實現(xiàn)點擊顯示內(nèi)容下拉效果
這篇文章主要介紹了jQuery基于事件控制實現(xiàn)點擊顯示內(nèi)容下拉效果,涉及jQuery事件響應(yīng)及元素屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
本文著重介紹：JavaScript訪問DOM對象方法/JQuery訪問DOM對象方法,通過JQuery庫中的方法訪問或控制頁面中的元素，比使用JavaScript代碼要簡潔得多，而且兼容各瀏覽器，感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了jquery html5 視頻播放控制代碼,需要的朋友可以參考下2016-11-11
jquery ajax 局部無刷新更新數(shù)據(jù)的實現(xiàn)案例
這篇文章主要對jquery ajax 局部無刷新更新數(shù)據(jù)的實現(xiàn)案例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
JQuery1.6 使用方法三，想要學(xué)習(xí)jquery的朋友可以參考下。2011-11-11
jQuery Validate 數(shù)組 全部驗證問題
這篇文章主要介紹了jquery validate 數(shù)組 全部驗證問題及解決辦法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)彈幕APP的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
探討JQUERY JSON的反序列化類 using問題的解決方法
本篇文章是對JQUERY JSON的反序列化類 using問題的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對象的方法
下面小編就為大家?guī)硪黄獪\談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對象的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jQuery實現(xiàn)的導(dǎo)航條點擊后高亮顯示功能示例
這篇文章主要介紹了jQuery實現(xiàn)的導(dǎo)航條點擊后高亮顯示功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-03-03