jQuery樣式篇-第2章jQuery選擇器

時間  2020-01-25
標籤 jquery 樣式 選擇器 欄目 JQuery 简体版
原文   原文鏈接

1. jQuery選擇器之id選擇器

頁面的任何操做都須要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者能夠更少的處理複雜選擇過程與性能優化，更多專一業務邏輯的編寫。javascript

<!--more-->css

jQuery幾乎支持主流的css1~css3選擇器的寫法，咱們從最簡單的也是最經常使用的開始學起html

id選擇器：一個用來查找的ID，即元素的id屬性前端

$( "#id" )

id選擇器也是基本的選擇器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。原生語法的支持老是很是高效的，因此在操做DOM的獲取上，若是能採用id的話盡然考慮用這個選擇器java

值得注意：jquery

id是惟一的，每一個id值在一個頁面中只能使用一次。若是多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行爲不該該發生;有超過一個元素的頁面使用相同的id是無效的css3

2. jQuery選擇器之類選擇器

類選擇器，顧名思義，經過class樣式類名來獲取節點git

描述：github

$( ".class" )

類選擇器，相對id選擇器來講，效率相對會低一點，可是優點就是能夠多選web

一樣的jQuery在實現上，對於類選擇器，若是瀏覽器支持，jQuery使用JavaScript的原生getElementsByClassName()函數來實現的

下邊實現%E2%80%94%E6%A0%B7%E5%BC%8F%E7%AF%87/2.1jQuery%E9%80%89%E6%8B%A9%E5%99%A8%E4%B9%8Bid%E9%80%89%E6%8B%A9%E5%99%A8.html)一個原生getElementsByClassName()函數的實現代碼與jQuery實現代碼的比較

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>   
     <div id="aaron">
        <p>id="aaron"</p>
        <p>選中</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>jQuery選中</p>
    </div>
    <div id="imooc">
        <p>id="imooc"</p>
        <p>jQuery未選中</p>
    </div>

    <script type="text/javascript">
       //經過原生方法處理
        var div = document.getElementById('aaron');
        div.style.border = "3px solid blue";
    </script>
    <script type="text/javascript">
        //經過jQuery直接傳入id
        //id的惟一，只選擇到了第一個匹配的id爲imooc的div節點
        var imooc = $("#imooc");
        $(".imooc").css("border", "3px solid red");
    </script>
</body>
</html>

咱們不難發現：

jQuery除了選擇上的簡單，並且沒有再次使用循環處理

不難想到$(".imooc").css()方法內部確定是帶了一個隱式的循環處理，因此使用jQuery選擇節點，不只僅只是選擇上的簡單，同時還增長不少關聯的便利操做，後續咱們還會慢慢的學到其餘的優點。

3. jQuery選擇器之元素選擇器

元素選擇器：根據給定（html）標記名稱選擇全部的元素

描述：

$( "element" )

搜索指定元素標籤名的全部節點，這個是一個合集的操做。一樣的也有原生方法getElementsByTagName()函數支持

下邊代碼所示—樣式篇/2.3jQuery選擇器之元素選擇器.html)：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>
    <script type="text/javascript">
    //經過原生方法處理
    //獲取到全部的節點標記名爲div的元素
    //給每個div加上藍色的邊框
    var divs = document.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.border = "3px solid blue";
    }
    </script>
    <script type="text/javascript">
    //經過jQuery直接傳入標籤名p
    //標籤是能夠多個的，因此獲得的一樣也是一個合集
    $("div").css("border", "3px solid red");
    </script>
</body>
</html>

第一組：經過getElementsByTagName方法獲得頁面全部的<div>元素

var divs = document.getElementsByTagName('div');

divs是dom合集對象，經過循環給每個合集中的<div>元素賦予新的border樣式

第二組：一樣的效果，$("p")選取全部的<p>元素，經過css方法直接賦予樣式

4. jQuery選擇器之全選擇器（*選擇器）

在CSS中，常常會在第一行寫下這樣一段樣式

* {padding: 0; margin: 0;}

通配符*意味着給全部的元素設置默認的邊距。jQuery中咱們也能夠經過傳遞*選擇器來選中文檔頁面中的元素

描述：

$( "*" )

拋開jQuery，若是要獲取文檔中全部的元素，經過document.getElementsByTagName()中傳遞"*"一樣能夠獲取到

不難發現，id、class、tag均可以經過原生的方法獲取到對應的節點，可是咱們還須要考慮一個兼容性的問題，我這裏順便說起一下，好比:

  1. IE會將註釋節點實現爲元素，因此在IE中調用getElementsByTagName裏面會包含註釋節點，這個一般是不該該的
  2. getElementById的參數在IE8及較低的版本不區分大小寫
  3. IE7及較低的版本中，表單元素中，若是表單A的name屬性名用了另外一個元素B的ID名而且A在B以前，那麼getElementById會選中A
  4. IE8及較低的版本，瀏覽器不支持getElementsByClassName

看到了吧，做爲一名合格的前端不是那麼簡單的，就一個基本的選擇器上面都須要作這麼多兼容，幸虧有jQuery的出現，讓咱們省了不少功夫，若是你們對jQuery的實現感興趣，能夠看我另外一個門課程 《jQuery源碼解析》

源碼以下：—樣式篇/2.4jQuery選擇器之全選擇器（*選擇器）.html)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    div {
        width: 100px;
        height: 90px;
        float: left;
        padding: 5px;
        margin: 5px;
        background-color: #EEEEEE;
    }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>
    <div class="aaron">
        <p>class="aaron"</p>
        <p>選中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery選中</p>
    </div>

    <script type="text/javascript">
        //獲取頁面中全部的元素
        var elements1 = document.getElementsByTagName('*');
    </script>
    <script type="text/javascript">
        //獲取頁面中全部的元素
        var elements2 = $("*")       ;
        //原生與jQuery方法比較
        //===表示數據和類型都相等
        if(elements2.length === elements1.length){
           elements2.css("border","1px solid red");
        }
    </script>
</body>
</html>

5 jQuery選擇器之層級選擇器

文檔中的全部的節點之間都是有這樣或者那樣的關係。咱們能夠把節點之間的關係能夠用傳統的家族關係來描述，能夠把文檔樹看成一個家譜，那麼節點與節點直接就會存在父子，兄弟，祖孫的關係了。

選擇器中的層級選擇器就是用來處理這種關係

子元素 後代元素 兄弟元素 相鄰元素

經過一個列表，對比層級選擇器的區別

<!---->

 仔細觀察層級選擇器之間仍是有不少類似與不一樣點

  1. 層級選擇器都有一個參考節點
  2. 後代選擇器包含子選擇器的選擇的內容
  3. 通常兄弟選擇器包含相鄰兄弟選擇的內容
  4. 相鄰兄弟選擇器和通常兄弟選擇器所選擇到的元素，必須在同一個父元素下

源碼以下：—樣式篇/2.5jQuery選擇器之層級選擇器.html)

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://github.xiaodongxier.com/demo/慕課網/jQuery基礎(一)—樣式篇/2.5jQuery選擇器之層級選擇器/imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子選擇器與後代選擇器</h2>
    <div class="left">
        <div class="aaron">
            <p>div下的第一個p元素</p>
        </div>
        <div class="aaron">
            <p>div下的第一個p元素</p>
        </div>
    </div>
    <div class="right">
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
    </div>

    <script type="text/javascript">
        //子選擇器
        //$('div > p') 選擇全部div元素裏面的子元素P
        $("div p").css("border", "1px groove red");
    </script>

    <script type="text/javascript">
        //後代選擇器
        //$('div  p') 選擇全部div元素裏面的p元素
        $("div p").css("border", "1px groove blue");
    </script>


    <h2>相鄰兄弟選擇器與通常兄弟選擇器</h2>
    <div class="bottom">
        <div>兄弟節點div, +~選擇器不能向前選擇</div>
        <span class="prev">選擇器span元素</span>
        <div>span後第一個兄弟節點div</div>
        <div>兄弟節點div
            <div class="small">子元素div</div>
        </div>
        <span>兄弟節點span,不可選</span>
        <div>兄弟節點div</div>
    </div>

    <script type="text/javascript">
        //相鄰兄弟選擇器
        //選取prev後面的第一個的div兄弟節點
        $(".prev + div").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
        //通常相鄰選擇器
        //選取prev後面的全部的div兄弟節點
        $(".prev ~ div").css("border", "3px groove blue");
    </script>
</body>
</html>

6. 練習題

  1. 假如須要選擇頁面中惟一的一個DOM元素，哪一個是最快，最高效的選擇器？
  • [ ] 層級選擇器
  • [ ] 類選擇器
  • [x] ID選擇器
  • [ ] 元素選擇器
解析：id是惟一的，每一個id值在一個頁面中只能使用一次。若是多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素
  1. 如下哪幾個選擇器能夠同時選擇多個元素？
  • [x] 類選擇器
  • [x] 元素選擇器
  • [ ] ID選擇器
  • [x] 全選擇器(*)
解析：選擇給定樣式類名的全部元素，Class能夠同時支持多個元素 標記名稱選擇全部的元素，元素節點是能夠重複多個的 查找文檔中的每個元素

  1. 如下是一段HTML結構，經過jQuery的基本選擇器，咱們有多少方法能夠獲取？

    <div id="left" class="left"></div>
  • [x] 類選擇器
  • [x] ID選擇器
  • [x] 元素選擇器
  • [x] 全選擇器(*)
解析：&dollar;('.left') &dollar;('#left') &dollar;("div") &dollar;("*")

  1. 經過選擇器方法，判斷選擇器名稱

    $( "parent > child" )
$("prev + next")
$("ancestor descendant")
$("prev ~ siblings")
  • [ ] 後代選擇器、子選擇器、相鄰兄弟選擇器、通常兄弟選擇器
  • [x] 子選擇器、相鄰兄弟選擇器、後代選擇器、通常兄弟選擇器
  • [ ] 通常兄弟選擇器、後代選擇器、子選擇器、相鄰兄弟選擇器
  • [ ] 相鄰兄弟選擇器、後代選擇器、子選擇器、通常兄弟選擇器
解析：
$( "parent > child" )
子選擇器：選擇全部指定「parent」元素中指定的"child"的直接子元素。

$("ancestor descendant")
後代選擇器：選擇給定的祖先元素的全部後代元素, 一個元素的後代多是該元素的一個孩子，孫子，曾孫等

$("prev + next")
相鄰兄弟選擇器：選擇全部緊接在「prev」元素後的「next」元素

$("prev ~ siblings")
通常兄弟選擇器：匹配「prev」元素以後的全部 兄弟元素。具備相同的父元素，並匹配過濾「siblings」選擇器

  1. 如下描述正確的是：
  • [x] 層級選擇器都有一個參考節點
  • [ ] 後代選擇器不包含子選擇器的選擇的內容
  • [ ] 通常兄弟選擇器不包含相鄰兄弟選擇的內容
  • [x] 相鄰兄弟選擇器和通常兄弟選擇器所選擇到的元素，必須在同一個父元素下
解析：
$( "parent > child" ) 子選擇器：選擇全部指定「parent」元素中指定的"child"的直接子元素。

$("ancestor descendant") 後代選擇器：選擇給定的祖先元素的全部後代元素, 一個元素的後代多是該元素的一個孩子，孫子，曾孫等

$("prev + next") 相鄰兄弟選擇器：選擇全部緊接在「prev」元素後的「next」元素

$("prev ~ siblings") 通常兄弟選擇器：匹配「prev」元素以後的全部 兄弟元素。具備相同的父元素，並匹配過濾「siblings」選擇器

7. jQuery選擇器之基本篩選選擇器

不少時候咱們不能直接經過基本選擇器與層級選擇器找到咱們想要的元素，爲此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。篩選選擇器不少都不是CSS的規範，而是jQuery本身爲了開發者的便利延展出來的選擇器

篩選選擇器的用法與CSS中的僞元素類似，選擇器用冒號「：」開頭，經過一個列表，看看基本篩選器的描述：

<!---->

注意事項：

  1. :eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據以前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引
  2. gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始

源碼以下：—樣式篇/2.7jQuery選擇器之基本篩選選擇器.html)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="2.7jQuery選擇器之基本篩選選擇器/imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>基本篩選器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>
    <script type="text/javascript">
    //找到第一個div
    $(".left div:first").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //找到最後一個div
    $(".left div:last").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //:even 選擇所引值爲偶數的元素，從 0 開始計數
    $(".left div:even").css("border", "3px groove red");
    </script>
    
    <script type="text/javascript">
    //:odd 選擇所引值爲奇數的元素，從 0 開始計數
    $(".left div:odd").css("border", "3px groove blue");
    </script>
    <br><br><br>
    <h3>:eq/:gt/:lt</h3>
    <div class="left center">
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>
    <script type="text/javascript">
    //:eq
    //選擇單個
    $(".center div:eq(1)").css("border", "3px groove blue");
    </script>
    
    <script type="text/javascript">
    //:gt 選擇匹配集合中全部索引值大於給定index參數的元素
    $(".center div:gt(3)").css("border", "3px groove blue");
    </script>
    
     <script type="text/javascript">
    //:lt 選擇匹配集合中全部索引值小於給定index參數的元素
    //與:gt相反
    $(".center div:lt(2)").css("background", "#CD00CD");
    </script>
    
    <h3>:not</h3>
    <div class="left right">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕課</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其餘</p>
        </div>
    </div>
    <script type="text/javascript">
        //:not 選擇全部元素去除不匹配給定的選擇器的元素
        //選中全部緊接着沒有checked屬性的input元素後的p元素，賦予顏色
        $(".right input:not(:checked) + p").css("background-color", "#CD00CD");
        // $("input:not(:checked) + p").css("background-color", "#CD00CD");

        $(":header").css("background-color", "#CD00CD");
    </script>
</body>
</html>

8. jQuery選擇器以內容篩選選擇器

基本篩選選擇器針對的都是元素DOM節點，若是咱們要經過內容來過濾，jQuery也提供了一組內容篩選選擇器，固然其規則也會體如今它所包含的子元素或者文本內容上

內容過濾器描述以下表：

<!---->

注意事項：

  1. :contains與:has都有查找的意思，可是contains查找包含「指定文本」的元素，has查找包含「指定元素」的元素
  2. 若是:contains匹配的文本包含在元素的子元素中，一樣認爲是符合條件的。
  3. :parent與:empty是相反的，二者所涉及的子元素，包括文本節點

源碼以下：—樣式篇/2.8jQuery選擇器以內容篩選選擇器.html)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="2.8jQuery選擇器以內容篩選選擇器/imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>內容篩選器</h2>
    <h3>:contains/:has</h3>
    <div class="left">
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>

    <script type="text/javascript">
        //查找全部class='div'中DOM元素中包含"contains"的元素節點
        //而且設置顏色
        $(".left div:contains(contains)").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找全部class='div'中DOM元素中包含"span"的元素節點
        //而且設置顏色
        $(".left .div:has(span)").css("color", "blue");
    </script>
    <h3>:parent/:empty</h3>
    <div class="left">
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a></a>
        </div>
    </div>
    <script type="text/javascript">
       //選擇全部包含子元素或者文本的a元素
       //增長一個藍色的邊框
       $("a:parent").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
       //找到a元素下面的全部空節點(沒有子元素)
       //增長一段文本與邊框
       $("a:empty").text(":empty").css("border", "3px groove red"); 
    </script>
</body>
</html>

舉例 2—樣式篇/2.8jQuery選擇器以內容篩選選擇器1.html)

9. jQuery選擇器之可見性篩選選擇器

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden

描述以下：

<!--
-->

這2個選擇器都是 jQuery 延伸出來的，看起來比較簡單，可是元素可見性依賴於適用的樣式

:hidden選擇器，不只僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等

咱們有幾種方式能夠隱藏一個元素：

  1. CSS display的值是none。
  2. type="hidden"的表單元素。
  3. 寬度和高度都顯式設置爲0。
  4. 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0

**_若是元素中佔據文檔中必定的空間,元素被認爲是可見的。
可見元素的寬度或高度，是大於零。
元素的visibility: hidden 或 opacity: 0被認爲是可見的，由於他們仍然佔用空間佈局。_**

不在文檔中的元素是被認爲是不可見的，若是當他們被插入到文檔中，jQuery沒有辦法知道他們是不是可見的，由於元素可見性依賴於適用的樣式

<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="html,result" data-user="xiaodongxier" data-slug-hash="WNbMbWa" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery選擇器之可見性篩選選擇器">
<span>See the Pen
jQuery選擇器之可見性篩選選擇器 by 小東西兒 (@xiaodongxier)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

源碼以下：—樣式篇/2.9jQuery選擇器之可見性篩選選擇器.html)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="2.9jQuery選擇器之可見性篩選選擇器/imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>可見性篩選選擇器</h2>
    <h3>:visible/:hidden</h3>
    <div class="left">
        <div class="div">
            <a>display</a>
            <p id="div1" style="display:none;">display</p>
        </div>
        <div class="div">
            <a>width</a>
            <a>height</a>
            <p id="div2" style="width:0;height:0">width/height</p>
        </div>
        <div class="div">
            <a>visibility</a>
            <a>opacity</a>
            <p id="div3" style="visibility:hidden;opacity:0">visibility</p>
        </div>
    </div>

    <p id="show"></p>
    <script type="text/javascript">
        function show (ele) {
            // instanceof運算符用來判斷一個構造函數的prototype屬性所指向的對象是否存在另一個要檢測對象的原型鏈上
            if (ele instanceof jQuery) {
                $("#show").html('元素的長度的 = ' + ele.length)
            } else {
                alert(ele+' 不是jQuery對象')
            }
        }
    </script>
    <script type="text/javascript">
        //查找id = div1的DOM元素,是否可見
        show( $("#div1:visible") );
    </script>

    <script type="text/javascript">
        //查找id = div2的DOM元素,是否可見
        show( $("#div2:visible") );
    </script>

    <script type="text/javascript">
        //查找id = div3的DOM元素,是否可見
        show( $("#div3:visible") );
    </script>

    <script type="text/javascript">
        //查找id = div1的DOM元素,是否隱藏
        show( $("#div1:hidden") );
    </script>

    <script type="text/javascript">
        //查找id = div2的DOM元素,是否隱藏
        show( $("#div2:hidden") );
    </script>

    <script type="text/javascript">
        //查找id = div3的DOM元素,是否隱藏
        show( $("#div3:hidden") );
    </script>
</body>
</html>

10. jQuery選擇器之屬性篩選選擇器

屬性選擇器讓你能夠基於屬性來定位一個元素。能夠只指定該元素的某個屬性，這樣全部使用該屬性而無論它的值，這個元素都將被定位，也能夠更加明確並定位在這些屬性上使用特定值的元素，這就是屬性選擇器展現它們的威力的地方。

描述以下：

<!--
-->

瀏覽器支持：

  • [att=val]、[att]、[att|=val]、[att~=val]  屬於CSS 2.1規範
  • [ns|attr]、[att^=val]、[att*=val]、[att$=val] 屬於CSS3規範
  • [name!="value"]  屬於jQuery 擴展的選擇器

CSS選擇器不管CSS2.1版本仍是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6如下瀏覽器纔不支持

在這麼多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的

[attr="value"]能幫咱們定位不一樣類型的元素，特別是表單form元素的操做，好比說input[type="text"],input[type="checkbox"]等
[attr*="value"]能在網站中幫助咱們匹配不一樣類型的文件

源碼以下：—樣式篇/2.10jQuery選擇器之屬性篩選選擇器 .html)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="jQuery選擇器之屬性篩選選擇器/imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>屬性篩選選擇器</h2>
    <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
        </div>
        <div class="div" testattr="true" p2>
            <a>[att]</a>
        </div>
        <div class="div" testattr="true" name="-">
            <a>[att|=val]</a>
        </div>
        <div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
        </div>
    </div>

    <script type="text/javascript">
         //查找全部div中，屬性name=p1的div元素
         $("div[name=p1").css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性p2的div元素
        $("div[p2]").css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性name中的值只包含一個連字符「-」的div元素
        $("div[name|=-]").css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性name中的值包含一個連字符「空」和「a」的div元素
        $("div[name~='b']").css("border", "3px groove #668B8B"); 
    </script>


    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true"  name='imooc-aaorn'>
            <a>[att^=val]</a>
        </div>
        <div class="div" testattr="true"  name='aaorn-imooc'>
            <a>[att$=val]</a>
        </div>
        <div class="div" testattr="true"  name="attr-test-selector">
            <a>[att*=val]</a>
        </div>
        <div class="div" name="a b">
            <a>[att!=val]</a>
        </div>
    </div>

    <script type="text/javascript">
         //查找全部div中，屬性name的值是用imooc開頭的
         $("div[name^=imooc]").css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
         //查找全部div中，屬性name的值是用imooc結尾的
         $("div[name$=imooc]").css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性name中的值包含一個test字符串的div元素
        $("div[name*=test]").css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找全部div中，有屬性testattr中的值沒有包含"true"的div
        $("div[testattr!=true]").css("border", "3px groove #668B8B"); 
    </script>
</body>
</html>

<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="html,result" data-user="xiaodongxier" data-slug-hash="abzqdqo" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery選擇器之屬性篩選選擇器 ">
<span>See the Pen
jQuery選擇器之屬性篩選選擇器 by 小東西兒 (@xiaodongxier)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

11. jQuery選擇器之子元素篩選選擇器

子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要複雜點

子元素篩選選擇器描述表：

<!--
-->

注意事項：

  1. :first只匹配一個單獨的元素，可是:first-child選擇器能夠匹配多個：即爲每一個父級元素匹配第一個子元素。這至關於:nth-child(1)
  2. :last 只匹配一個單獨的元素， :last-child 選擇器能夠匹配多個元素：即，爲每一個父級元素匹配最後一個子元素
  3. 若是子元素只有一個的話，:first-child與:last-child是同一個
  4.  :only-child匹配某個元素是父元素中惟一的子元素，就是說當前子元素是父元素中惟一的元素，則匹配
  5. jQuery實現:nth-child(n)是嚴格來自CSS規範，因此n值是「索引」，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的
  6. nth-child(n) 與 :nth-last-child(n) 的區別前者是從前日後計算，後者從後往前計算

源碼以下：—樣式篇/2.11jQuery選擇器之子元素篩選選擇器.html)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>jQuery選擇器之子元素篩選選擇器</title>
    <link rel="stylesheet" href="2.11jQuery選擇器之子元素篩選選擇器/imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>子元素篩選選擇器</h2>
    <h3>:first-child、:last-child、:only-child</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <script type="text/javascript">
        //查找class="first-div"下的第一個a元素
        //針對全部父級下的第一個
        $(".first-div a:first-child").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的最後一個a元素
        //針對全部父級下的最後一個
        //若是隻有一個元素的話，last也是第一個元素
        $(".first-div a:last-child").css("color", "red");
    </script>

    <script type="text/javascript">
        //查找class="first-div"下的只有一個子元素的a元素
        $(".first-div a:only-child").css("color", "blue");
    </script>


    <h3>:nth-child、:nth-last-child</h3>
    <div class="left last-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>第三個元素</a>
            <a>:last-child</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
        </div>
        <div class="div">
            <a>:first-child</a>
            <a>第二個元素</a>
            <a>第三個元素</a>
            <a>:last-child</a>
        </div>
    </div>
    <script type="text/javascript">
        //查找class="last-div"下的第二個a元素
        $(".last-div a:nth-child(2)").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找class="last-div"下的倒數第二個a元素
        $(".last-div a:nth-last-child(2)").css("color", "red");
    </script>
</body>
</html>

<p class="codepen" data-height="500" data-theme-id="dark" data-default-tab="html,result" data-user="xiaodongxier" data-slug-hash="xxbYMRO" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="jQuery選擇器之子元素篩選選擇器">
<span>See the Pen
jQuery選擇器之子元素篩選選擇器 by 小東西兒 (@xiaodongxier)
on CodePen.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

12. jQuery選擇器之表單元素選擇器

不管是提交仍是傳遞數據，表單元素在動態交互頁面的做用是很是重要的。jQuery中專門加入了表單選擇器，從而可以極其方便地獲取到某個類型的表單元素

表單選擇器的具體方法描述：

<!---->

注意事項：

除了input篩選選擇器，幾乎每一個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可使用屬性篩選器替換。好比 $(':password') == $('[type=password]')

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程