JQuery的選擇器

時間 2019-12-09

原文原文鏈接

　　　頁面的任何操做都須要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者能夠更少的處理複雜選擇過程與性能優化，更多專一業務邏輯的編寫。
jQuery幾乎支持主流的css1~css3選擇器的寫法，咱們從最簡單的也是最經常使用的開始學起
一、id選擇器：一個用來查找的ID，即元素的id屬性
　　$( "#id" )
　　id選擇器也是基本的選擇器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。原生語法的支持老是很是高效的，因此在操做　　DOM的獲取上，若是能採用id的話盡然考慮用這個選擇器
　　值得注意：
　　id是惟一的，每一個id值在一個頁面中只能使用一次。若是多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行爲不該該發生;有超過一個元素的頁面使用相同的id是無效的
二、類選擇器，顧名思義，經過class樣式類名來獲取節點
　　描述：$( ".class" )
　　類選擇器，相對id選擇器來講，效率相對會低一點，可是優點就是能夠多選，一樣的jQuery在實現上，對於類選擇器，若是瀏覽器支持，jQuery使用JavaScript的原生getElementsByClassName()函數來實現的
　　咱們不難發現：
　　jQuery除了選擇上的簡單，並且沒有再次使用循環處理
　　不難想到$(".imooc").css()方法內部確定是帶了一個隱式的循環處理，因此使用jQuery選擇節點，不只僅只是選擇上的簡單，同時還增長不少關聯的便利操做，後續咱們還會慢慢的學到其餘的優點。
三、元素選擇器：根據給定（html）標記名稱選擇全部的元素
　　描述：$( "element" )
搜索指定元素標籤名的全部節點，這個是一個合集的操做。一樣的也有原生方法getElementsByTagName()函數支持
下例代碼所示：javascript

<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
    //標籤是能夠多個的，因此獲得的一樣也是一個合集
    $("p").css("border", "3px solid red");
    </script>
</body>
第一組：經過getElementsByTagName方法獲得頁面全部的<div>元素
var divs = document.getElementsByTagName('div');
divs是dom合集對象，經過循環給每個合集中的<div>元素賦予新的boder樣式
第二組：一樣的效果，$("p")選取全部的<p>元素，經過css方法直接賦予樣式
四、全選擇器（*選擇器）css

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

* {padding: 0; margin: 0;}

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

描述：$( "*" )java

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

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

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

五、層級選擇器瀏覽器

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

選擇器中的層級選擇器就是用來處理這種關係：子元素、後代元素、兄弟元素、相鄰元素app

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

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

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

六、基本篩選選擇器

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

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

注意事項：

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

七、內容篩選選擇器

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

內容過濾器描述以下表：

注意事項：

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

八、可見性篩選選擇器

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

描述以下：

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

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

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

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

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

九、屬性篩選選擇器

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

瀏覽器支持：

[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"]能在網站中幫助咱們匹配不一樣類型的文件

十、子元素篩選選擇器

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

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

注意事項：

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

十一、表單元素選擇器

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

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

注意事項：

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