頁面的任何操作都需要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。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除了選擇上的簡單，而且沒有再次使用循環處理
不難想到$(".imooc").css()方法內部肯定是帶了一個隱式的循環處理，所以使用jQuery選擇節點，不僅僅只是選擇上的簡單，同時還增加很多關聯的便利操作，后續我們還會慢慢的學到其他的優勢。
3、元素選擇器：根據給定（html）標記名稱選擇所有的元素
描述：$( "element" )
搜索指定元素標簽名的所有節點，這個是一個合集的操作。同樣的也有原生方法getElementsByTagName()函數支持
下例代碼所示：
<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方法直接賦予樣式
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、基本篩選選擇器
7、內容篩選選擇器
基本篩選選擇器針對的都是元素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]')。