JQuery的選擇器
頁面的任何操作都需要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者可以更少的處理複雜選擇過程與效能優化，更多專注業務邏輯的編寫。
jQuery幾乎支援主流的css1~css3選擇器的寫法，我們從最簡單的也是最常用的開始學起
1、id選擇器：一個用來查詢的ID，即元素的id屬性
$( "#id" )
id選擇器也是基本的選擇器，jQuery內部使用JavaScript函式document.getElementById()來處理ID的獲取。原生語法的支援總是非常高效的，所以在操作 DOM的獲取上，如果能採用id的話盡然考慮用這個選擇器
id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的
2、類選擇器，顧名思義，通過class樣式類名來獲取節點
描述：$( ".class" )
類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選，同樣的jQuery在實現上，對於類選擇器，如果瀏覽器支援，jQuery使用JavaScript的原生getElementsByClassName()函式來實現的
我們不難發現：
jQuery除了選擇上的簡單，而且沒有再次使用迴圈處理
3、元素選擇器：根據給定（html）標記名稱選擇所有的元素
描述：$( "element" )
搜尋指定元素標籤名的所有節點，這個是一個合集的操作。同樣的也有原生方法getElementsByTagName()函式支援
下例程式碼所示：
<body>
<div class="aaron">
<p>class="aaron"</p>
<p>選中</p>
<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方法直接賦予樣式
4、全選擇器（*選擇器）
在CSS中，經常會在第一行寫下這樣一段樣式
* {padding: 0; margin: 0;}
萬用字元*意味著給所有的元素設定預設的邊距。jQuery中我們也可以通過傳遞*選擇器來選中文件頁面中的元素
描述：$( "*" )
拋開jQuery，如果要獲取文件中所有的元素，通過document.getElementsByTagName()中傳遞"*"同樣可以獲取到
不難發現，id、class、tag都可以通過原生的方法獲取到對應的節點，但是我們還需要考慮一個相容性的問題，我這裡順便提及一下，比如:
- IE會將註釋節點實現為元素，所以在IE中呼叫getElementsByTagName裡面會包含註釋節點，這個通常是不應該的
- getElementById的引數在IE8及較低的版本不區分大小寫
- IE7及較低的版本中，表單元素中，如果表單A的name屬性名用了另一個元素B的ID名並且A在B之前，那麼getElementById會選中A
- IE8及較低的版本，瀏覽器不支援getElementsByClassName
5、層級選擇器
文件中的所有的節點之間都是有這樣或者那樣的關係。我們可以把節點之間的關係可以用傳統的家族關係來描述，可以把文件樹當作一個家譜，那麼節點與節點直接就會存在父子，兄弟，祖孫的關係了。
選擇器中的層級選擇器就是用來處理這種關係：子元素、後代元素、兄弟元素、相鄰元素
通過一個列表，對比層級選擇器的區別
仔細觀察層級選擇器之間還是有很多相似與不同點
- 層級選擇器都有一個參考節點
- 後代選擇器包含子選擇器的選擇的內容
- 一般兄弟選擇器包含相鄰兄弟選擇的內容
- 相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個父元素下
6、基本篩選選擇器
很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素，為此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被認為是可見的，因為他們仍然佔用空間佈局。9、屬性篩選選擇器 屬性選擇器讓你可以基於屬性來定位一個元素。可以只指定該元素的某個屬性，這樣所有使用該屬性而不管它的值，這個元素都將被定位，也可以更加明確並定位在這些屬性上使用特定值的元素，這就是屬性選擇器展示它們的威力的地方。
瀏覽器支援：
- [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"]能在網站中幫助我們匹配不同型別的檔案10、子元素篩選選擇器
子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要複雜點
子元素篩選選擇器描述表：
注意事項：
- :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]')。