麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 22:46:52
字體:
來源:轉載
供稿:網友

   jQuery選擇器的強大不僅在于選擇器支持基本的css選擇符,還支持很多CSS的偽類選擇符,甚至可以自定義選擇符,下面讓我們來看看一些偽類選擇符

  :nth-child的用法
         nth-child是一個css3偽類選擇符,在jQuery中被實現了,在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>

運行效果如下:

  1    

API定義中的匹配其父輩指的是所選元素的父元素不同,則分開選擇。在上面例子中雖然一共選擇18個<li>但是這18<li>分屬于2個不同的<ul>,所以會選擇兩個.如果將其放入同一個<ul>中,如果放入同一個<ul>執行上面代碼,則:

2

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

    向上面那樣直接給出選擇的位置,但是這里注意,這個位置是以1為開始的,而不是0 n個倍數選擇法,比如可以使3n+1,-3n+1,4n,等,匹配所有頁面上存在的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>
    </div>
    <script type="text/javascript">
        $("li:nth-child(3n-1)").css("background-color", "blue");
    </script>

效果:

3

可見相對應的元素都被匹配

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

復制代碼 代碼如下:

   <script type="text/javascript">
        $("li:nth-child(odd)").css("background-color", "blue");
    </script>

效果:

4

 

:first-child&last-child

   從上面的nth-child可以看到”匹配父類下的“含義,first-child和last-child也同樣是這樣.它們可以看做nth-child的封裝:

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

而first-child目前我還找不到等價的nth-child表達式,匹配父類下的最后一個子元素:
效果:

5

:input并不只是匹配input

   個選擇符我想大家都比較熟悉,但是要注意,input偽類選擇符不只是匹配<input>標簽,還會匹配<select>和<textarea>:

復制代碼 代碼如下:

第一個:<input type="input" />
第二個:<select id="select">

</select>
第三個:<textarea></textarea>
<script type="text/javascript">
    alert($(":input").length);//alert 3
</script>   


 可以看到,不光<input>被選擇,<select>和<textarea>也被選擇了

偽類選擇符可以嵌套

   通常情況下,我們可以通過嵌套偽類選擇符來達到我們需要的效果,偽類選擇符,如下:

復制代碼 代碼如下:

<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>


效果:

   z11111111111111111111111

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

自定義偽類選擇符

   jquery還提供給我們擴展原有選擇符的方式,可以讓我們根據自己的需要自定義選擇符,下面通過一個有實際意義的例子看如何做到:

   在我們使用jquery的serialize方法將當前表單中的元素提交到服務器時,總是會選上asp.net的ViewState(<input type=”hidden” />)這無疑浪費了好多資源,我們通過一個擴展的偽類選擇符看如何不選擇它:

復制代碼 代碼如下:

<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的方式對偽類選擇符進行擴展,可以看出,上面的選擇符使用:noViewState后,viewState沒有被選擇. 

小結:

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 精品亚洲视频在线 | 国产精品久久久久久久久久久久久久久久 | 黄色av网站免费看 | 99国产精成人午夜视频一区二区 | 玩偶姐姐在线观看免费 | 国产精品欧美久久久久一区二区 | 国产一区精品在线观看 | 中文字幕在线观看91 | 激情网站免费观看 | 春光影院理论片 | 91精品国产综合久久久动漫日韩 | 国产日韩大片 | 成人在线视频免费观看 | 黄网站在线免费 | 看全色黄大色黄大片女图片 | va免费视频 | 国产精品免费一区二区 | 成年人免费高清视频 | 久久亚洲美女视频 | 可以看逼的视频 | 午夜爱爱福利 | 日本一区二区久久久 | 91久久九色 | 国产91九色 | 日本黄色一级视频 | 奶子吧naiziba.cc免费午夜片在线观看 | 91精品国产成人 | 依依成人综合 | 亚洲综合网站 | 色综合久久久久久 | 最新毛片在线观看 | 国产精品一区二区三区99 | 久久精品23 | 国产1区2区3区在线观看 | 精品免费国产一区二区三区 | 日日草夜夜 | 成人 日韩| 国产一区二区三区在线观看视频 | 毛片视频网站在线观看 | 美女羞羞视频在线观看 | 草碰人人 |