JQuery知識總結之選擇器

時間 2019-12-04

原文原文鏈接

jQuery擁有着強大的選擇器，容許開發者使用從css1-css3幾乎全部的選擇器，以及本身首創的高級而複雜的選擇器，所以對css掌握熟練的開發者能夠很容易的切入到jQuery的學習中來，但個人腦容量實在不容許我記下全部的選擇器，因此本篇文章整理了一下jQuery經常使用的選擇器及其使用方法，以備之後查閱。javascript

jQuery選擇器之id選擇器---根據元素id進行查找

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

<div id="testdemo">
</div>
<script type="text/javascript">
    $("#testdemo").text("id選擇器");</script>複製代碼

jQuery選擇器之類選擇器---根據元素class進行查找

類選擇器，顧名思義，經過class樣式類名來獲取節點，一樣的jQuery在實現上，對於類選擇器，若是瀏覽器支持（IE8及較低的版本，瀏覽器不支持getElementsByClassName）html

，jQuery使用JavaScript的原生getElementsByClassName()函數來實現的。前端

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

並且若是咱們想移除元素的某個class，用原生js與jQuery分別實現jquery

<body>   
    <div class="one two">
    </div>   
    <div class="one two">
    </div>
    <div class="one">
    </div>
    <div class="one two">
    </div>

    <script type="text/javascript">
        //經過原生方法處理
        var divs = document.getElementsByClassName('one');
        for (var i = 0; i < divs.length; i++) {
            divs[i].classList.remove("two");
        }
    </script>

    <script type="text/javascript">
        //經過jQuery
        var a = $(".one")
        a.removeClass("two");
    </script>
</body>複製代碼

能夠看到$(".one").removeClass()方法，其內部實際上是自帶隱式循環的，不須要再進行遍歷，比原生js更加簡單。
css3

jQuery選擇器之元素選擇器---根據元素標籤名進行查找

就是css裏的標籤選擇器，搜索指定元素標籤名的全部節點，返回一個合集。一樣的也有原生方法getElementsByTagName()函數支持。瀏覽器

藉助元素選擇器把上面移除元素的某個class的方法，用原生js與jQuery分別實現一下
bash

<body>   
    <div class="two">
    </div>   
    <div class="two">
    </div>
    <div class="one">
    </div>
    <div class="two">
    </div>

    <script type="text/javascript">
        //經過原生方法處理
        var divs = document.getElementsByTagName('div');
        for (var i = 0; i < divs.length; i++) {
            divs[i].classList.remove("two");
        }
    </script>

    <script type="text/javascript">
        //經過jQuery
        var a = $("div")
        a.removeClass("two");
    </script>
</body>複製代碼

jQuery選擇器之*選擇器

就是css裏的全選擇器了，看到這個猛然就想起了剛開始用css和html寫界面時用函數

*{padding:0;margin:0}清除瀏覽器默認樣式的菜雞兒時代了（固然，如今也仍是撈的一批）。。。。

$( "*" )複製代碼

用法如上，返回頁面全部元素的合集，很少贅述了。

嘿嘿，其實不難發現，id、class、tag均可以經過原生的方法獲取到對應的節點，可是前端須要考慮兼容性問題，如

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

真讓人頭大，還好有jQuery

jQuery選擇器之層級選擇器---根據元素間關係進行查找

文檔中的全部的節點之間都是有這樣或者那樣的關係。若是把節點之間的關係用傳統的家族關係來描述，能夠把文檔樹看成一個家譜，那麼節點與節點就會存在父子，兄弟，祖孫的關係。依據這些關係能夠限定查找範圍，實現精確查找。

1.子元素選擇器 $('parent > child')

顧名思義，父子局，parent是父元素必需要有層級選擇器都必須有參照元素，child是子元素，不寫默認是*，選擇所有子元素,空格是爲了代碼可讀性。

此選擇器會查找給定父元素的下一級元素，也就是兒子輩，孫子輩就不歸他管了

如

<div class="testone">
    <article>
        <p class="demo">div下的article下的p元素</p>
        <p>div下的article下的p元素</p>
    </article>
</div>
<div class="testtwo">
    <p class="demo">div下的第一個p元素</p>
    <p>div下的article下的p元素</p>
</div>
<script type="text/javascript">
    //子選擇器
    //選擇第一個div元素裏面class爲demo的p元素
    console.log($('.testone > .demo'));//只能查到第二個div裏的
    console.log($('.testone > article > .demo'));//這樣能夠查到第一個div裏的了</script>複製代碼

2.後代選擇器 $('ancestor descendant')

與子元素選擇器最大的區別是，後代選擇器不僅查找下一級子元素，而是查找ancestor祖先元素的全部descent後代元素。

<div class="testone">
    <article>
        <p class="demo">div下的article下的p元素</p>
        <p>div下的article下的p元素</p>
    </article>
</div>
<div class="testtwo">
    <p class="demo">div下的第一個p元素</p>
    <p>div下的article下的p元素</p>
</div>
<script type="text/javascript">
    //子選擇器
    //選擇第一個div元素裏面class爲demo的p元素
    console.log($('.testone .demo'));
</script>複製代碼

3.相鄰兄弟選擇器 $(".prev + next")

選擇prev所表明的元素後緊接的相鄰元素，next不寫默認就第一個

<body>    
    <div>
        <span class="prev">選擇器span元素</span>
        <div>span後第一個兄弟節點div</div>
        <div class="test">兄弟節點div
            <div>子元素div</div>
        </div>
        <span>兄弟節點span,不可選</span>
        <div>兄弟節點div</div>
    </div>
    <script type="text/javascript">
        //相鄰兄弟選擇器
        //選取prev後面的第一個的div兄弟節點
       console.log($("span + div"));//會分別選擇span後緊鄰的第一個div，共兩個
       console.log($(".prev + .test"));//選不到，範圍限定是緊鄰的第一個
    </script>
</body>複製代碼

4.通常兄弟選擇器 $(".prev ~ siblings")

選擇prev所表明的元素後指定的相鄰元素，siblings不寫就默認選全部同輩元素

<body>    
    <div>
        <span class="prev">選擇器span元素</span>
        <div>span後第一個兄弟節點div</div>
        <div class="test">兄弟節點div
            <div>子元素div</div>
        </div>
        <span>兄弟節點span,不可選</span>
        <div>兄弟節點div</div>
    </div>
    <script type="text/javascript">
        //相鄰兄弟選擇器
        //選取prev後面的第一個的div兄弟節點
      //會選擇span後的同輩中全部class爲test的div，共兩個
     console.log($("span ~ .test"));      //會選擇span後的全部同輩元素
      //第一個span後的同輩元素包含第二個span,因此因此第二個span也會被選到       console.log($("span ~ "));
    </script>
</body>複製代碼

jQuery選擇器之基本篩選選擇器---根據指定條件進行查找

不少時候咱們不能直接經過基本選擇器與層級選擇器找到咱們想要的元素，爲此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。

篩選選擇器的用法與CSS中的僞元素類似，選擇器用冒號「：」開頭，篩選選擇器不少都不是CSS的規範，而是jQuery本身爲了開發者的便利延展出來的選擇器。

$(".div:first")複製代碼

$(".div:last")複製代碼

$(".div:even")複製代碼

$(".div:odd")複製代碼

$(".aaron:eq(2)")複製代碼

$(".aaron:gt(3)")複製代碼

$(".aaron:lt(2)")複製代碼

$("input:not(:checked) + p")複製代碼

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

jQuery選擇器以內容篩選選擇器---根據元素包含內容進行查找

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

$(".div:contains(':contains')")複製代碼

$(".div:has(span)")複製代碼

$("a:parent")複製代碼

$("a:empty")複製代碼

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

jQuery選擇器之可見性篩選選擇器---根據元素可見性進行查找

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

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

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

CSS display的值是none。
type="hidden"的表單元素。
寬度和高度都顯式設置爲0。
一個祖先元素是隱藏的，該元素是不會在頁面上顯示
CSS visibility的值是hidden
CSS opacity的指是0
設置z-index,或是absolute把元素放在屏幕外等

但實際上只有前三種狀況能被$(":hidden")選中，這說明並非視覺上不可見就能夠被$(":hidden")選擇器認定爲不可見，若是元素佔據文檔中必定的空間,則元素被認爲是可見的。因此元素設置visibility: hidden 、 opacity: 0、z-index或absolute等仍是會被認爲是可見的，由於他們仍然佔用空間佈局。

jQuery選擇器之屬性篩選選擇器---根據元素標籤中的屬性進行查找

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

在這麼多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的 [attr="value"]能定位不一樣類型的元素，特別是表單form元素,如input[type="text"],input[type="checkbox"]等，[attr*="value"]能在網站中幫助咱們匹配不一樣類型的文件。

另外，字符串匹配都是區分大小寫的。

jQuery選擇器之子元素篩選選擇器---查找元素父元素下的子元素

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

<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>
    <script type="text/javascript">
        //查找class="last-div"下的第二個a元素
        $('.first-div a:nth-child(2)').css("color", "#CD00CD");
    </script>

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

</body>複製代碼

注意事項：

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