JQuery知識總結之選擇器

楊耿直小兄弟發表於2019-03-21
jQuery

       jQuery擁有著強大的選擇器，允許開發者使用從css1-css3幾乎所有的選擇器，以及自己獨創的高階而複雜的選擇器，因此對css掌握熟練的開發者可以很容易的切入到jQuery的學習中來，但我的腦容量實在不允許我記下所有的選擇器，所以本篇文章整理了一下jQuery常用的選擇器及其使用方法，以備以後查閱。

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

id選擇器是基本的選擇器，jQuery內部使用JavaScript函式document.getElementById()來處理ID的獲取。原生語法的支援總是非常高效的，所以在操作DOM的獲取上，如果能採用id的話首選這個選擇器。

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

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

類選擇器，顧名思義，通過class樣式類名來獲取節點，同樣的jQuery在實現上，對於類選擇器，如果瀏覽器支援（IE8及較低的版本，瀏覽器不支援getElementsByClassName）

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

類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選。

而且如果我們想移除元素的某個class，用原生js與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更加簡單。

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

就是css裡的標籤選擇器，搜尋指定元素標籤名的所有節點，返回一個合集。同樣的也有原生方法getElementsByTagName()函式支援。

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

<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}清除瀏覽器預設樣式的菜雞兒時代了（當然，現在也還是撈的一批）。。。。

JQuery知識總結之選擇器

$( "*" )複製程式碼

用法如上，返回頁面所有元素的合集，不多贅述了。

嘿嘿，其實不難發現，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選擇器之層級選擇器---根據元素間關係進行查詢

文件中的所有的節點之間都是有這樣或者那樣的關係。如果把節點之間的關係用傳統的家族關係來描述，可以把文件樹當作一個家譜，那麼節點與節點就會存在父子，兄弟，祖孫的關係。依據這些關係可以限定查詢範圍，實現精確查詢。

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自己為了開發者的便利延展出來的選擇器。

JQuery知識總結之選擇器

$(".div:first")複製程式碼
$(".div:last")複製程式碼
$(".div:even")複製程式碼
$(".div:odd")複製程式碼
$(".aaron:eq(2)")複製程式碼
$(".aaron:gt(3)")複製程式碼
$(".aaron:lt(2)")複製程式碼
$("input:not(:checked) + p")複製程式碼
  1. :eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表示式的集合元素，根據之前匹配的元素在進一步篩選，注意jQuery合集都是從0開始索引
  2. gt是一個段落篩選，從指定索引的下一個開始，如指定gt(1) 實際是從2開始

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

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

JQuery知識總結之選擇器

$(".div:contains(':contains')")複製程式碼
$(".div:has(span)")複製程式碼
$("a:parent")複製程式碼
$("a:empty")複製程式碼
  1. :contains與:has都有查詢的意思，但是contains查詢包含“指定文字”的元素，has查詢包含“指定元素”的元素。
  2. 如果:contains匹配的文字包含在元素的子元素中，同樣認為是符合條件的。
  3. :parent與:empty是相反的，兩者所涉及的子元素，包括文字節點。

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

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

JQuery知識總結之選擇器

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

我們有很多種方式可以隱藏一個元素：

  1. CSS display的值是none。
  2. type="hidden"的表單元素。
  3. 寬度和高度都顯式設定為0。
  4. 一個祖先元素是隱藏的，該元素是不會在頁面上顯示
  5. CSS visibility的值是hidden
  6. CSS opacity的指是0
  7. 設定z-index,或是absolute把元素放在螢幕外等

但實際上只有前三種情況能被$(":hidden")選中，這說明並不是視覺上不可見就可以被$(":hidden")選擇器認定為不可見，如果元素佔據文件中一定的空間,則元素被認為是可見的。所以元素設定visibility: hidden 、 opacity: 0、z-index或absolute等還是會被認為是可見的，因為他們仍然佔用空間佈局。

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

屬性選擇器讓你可以基於屬性來定位一個元素。可以只指定該元素的某個屬性，這樣所有使用該屬性而不管它的值，這個元素都將被定位，也可以更加明確並定位在這些屬性上使用特定值的元素，這就是屬性選擇器展示它們的威力的地方。

JQuery知識總結之選擇器

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

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

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

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

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>複製程式碼

注意事項：

  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) 的區別前者是從前往後計算，後者從後往前計算

jQuery選擇器之表單元素選擇器與表單物件屬性篩選選擇器

---根據表單元素的型別和屬性進行選擇

無論是提交還是傳遞資料，表單元素在動態互動頁面的作用是非常重要的。jQuery中專門加入了表單選擇器，從而能夠極其方便地獲取到某個型別的表單元素。

JQuery知識總結之選擇器

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

$(':input')複製程式碼
$('input:text')複製程式碼
$('input:password')複製程式碼
$('input:radio')複製程式碼
$('input:checkbox')複製程式碼
$('input:submit')複製程式碼
$('input:image')複製程式碼
$('input:button')複製程式碼

表單物件屬性篩選選擇器也是專門針對表單元素的選擇器，可以附加在其他選擇器的後面，主要功能是對所選擇的表單元素進行篩選。

JQuery知識總結之選擇器

注意事項：

  1. 選擇器適用於核取方塊和單選框，對於下拉框元素, 使用 :selected 選擇器
  2. 在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，所以保險起見換用選擇器input:checked，確保只會選取<input>元素

jQuery選擇器之特殊選擇器this

在剛接觸jQuery的時候，經常對$(this)和this的區別模糊不清，那麼這兩者有什麼區別呢？

this，表示當前的上下文物件是一個html物件，可以呼叫html物件所擁有的屬性和方法。

$(this),代表的上下文物件是一個jquery的上下文物件，可以呼叫jQuery的方法和屬性值。


相關文章