01第一節：選擇器概述
jQuery選擇器是指對#JavaScript#選取元素的操作進行了封裝，使選擇Html元素時更加的容易。
jQuery選擇器將選取的Html元素進行了分類，分別有：
元素選擇器：是指可以通過Html的標籤名查找到指定的元素。屬性選擇器：是指可以通過屬性名或內容查找到指定的元素。CSS選擇器：是指通過CSS樣式相關的屬性查找到指定的元素。在jQuery中，選擇器的操作最終的結果都是一個集合，需要進一步處理集合中的元素，然後進行操作。
使用jQuery選擇器，可以對一個或多個選取的Html元素進行操作，以達到完成指定的任務。
注意：在jQuery中，$(*)表示選取Html頁面中的全部元素，選取的是一個具有HTML DOM樹形結構的集合。
02第二節：jQuery元素選擇器
在Html中，我們編寫的都是使用<>組成的標記，而在html dom中，稱標記為元素，是指在jQuery選擇的過程進行的搜索邏輯處理結果。
jQuery元素選擇器是最為簡單的、也是最常用的一種重要的Html元素選擇器，使用起來非常簡單，且容易理解。
2.1. 使用標籤名查找Html元素
現在我們根據Html標記的標籤名來獲取指定的Html元素，標籤名是指Html標記的名稱，如p標記，標籤名就是p。
jQuery通過標籤名查找Html元素的代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.1.1.min.js"></script><script type="text/javascript">function f1() {var pList = $("p");console.log(pList);}</script></head><body><input id="Button1" type="button" value="確定" onclick="f1()" /><div id="div1"><p id="p1"></p><p id="p2"></p><p id="p3"></p></div></body></html>
在這段代碼中，jquery是通過$(「p」)在整個頁面中搜索p標記，查找到的是一個p元素的集合。
打開google chrome瀏覽器的「console(控制臺)」查看一下結果：
圖1
在上圖的結果中，我們發現共查找到了3個p元素，存放在一個數組中，使用時，需要得到這個數組，然後對數組進行遍歷，查找到每一個p元素再進行操作。
2.2. 使用id值查找Html元素
在Html標記中，我們可以使用id屬性來指定標記的唯一性，因此，在jQuery中，也可以通過id值查找到Html元素，基本語法如下：
Var 變量名=$(#id值);
如下代碼是使用jQuery查找到id值為p2的Html元素：
var p2 = $("#p2");console.log(p2);
我們知道，在一個Html頁面中，id值是唯一的，但是如果你寫了2個完全相同的id值，瀏覽器照樣可以運行，因此，對於jquery來說，還是查找到一個集合。
圖2
在圖2中，我們發現，雖然數組中只有一個HTML元素，但是還是存放在數組中。
2.3. 使用CSS類名查找Html元素
在Html頁面中，之所以呈現給用戶的界面非常漂亮和整潔，排版上清晰明了，都是CSS樣式的功勞。
所以，在Html頁面中，會存在大量的CSS類名。通過類名在樣式表中應用對應的樣式來改變頁面的運行效果。
因此，在jQuery中，也是可以使用CSS類名來查找指定元素的，這樣給了另外一種選擇元素的方法，代碼如下：
var p = $("p.p11");console.log(p);
此代碼中，用於查找所有class屬性值為p11的p元素。
運行結果如下圖所示：
圖3
在此運行結果中，一共查找到了2個結果，分別為id為p1和p3，它們使用了同樣的樣式效果，因此，被搜索到了。
03第三節：jQuery屬性選擇器
在jQuery中，屬性選擇器更為強大，是jQuery自行封裝的一套方法，使用[]表示屬性，可以大範圍的獲取整個Html頁面上的任意元素，也是強烈推薦使用的選擇器。
例如，查找所有帶id屬性的HTML元素，則代碼如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="jquery-3.1.1.min.js"></script><script type="text/javascript">$().ready(function () {var idList = $("[id]");console.log(idList);});</script></head><body><div id="div1"><p id="p1">Hello 01</p><p id="p2">Hello 02</p><p id="p3">Hello 03</p><p>Hello 04</p></div></body></html>
在此代碼中，使用了$("[id]")來查找具有id屬性的元素，而這個屬性的值是什麼無所謂，更為靈活，特別是在Html 5中，屬性是可以自定義的，這樣可以對Html標記進行歸類。
圖4
在這裡共搜索到了4個結果值，這4個結果都是帶有id屬性的，而元素是什麼類型的，也是無所謂的。
再例如，查找所有type屬性的值為「text」的元素，jQuery代碼如下：
var typeList = $("[type='text']");console.log(typeList);
在[]中指定屬性和對應的值即可，此時的查找更精準些。運行結果如下：
圖5
此時，發現我們其實查找的是單行文本框標記，可以對此類的標記進行樣式設計、獲取值等操作。
04第四節：jQuery CSS選擇器
jQuery還專門設計了CSS選擇器，用於根據CSS樣式的相關屬性獲取Html元素。
CSS屬性選擇器要求開發者對CSS和Html都要非常的熟悉，以便才能精準定位，找到合適的Html元素。
例如:將所有的p元素添加背景色為紅色，代碼如下：
<!DOCTYPE html><html><head><title></title><script src="jquery-3.1.1.min.js"></script><script type="text/javascript">$().ready(function () {var pList = $("p");pList.css("background-color", "red");});</script></head><body><div id="div1"><p id="p1">Hello 01</p><p id="p2">Hello 02</p><p id="p3">Hello 03</p><p>Hello 04</p></div></body></html>
在這裡，首先獲取到了p元素，然後使用CSS()函數對查找到的元素設置背景色為紅色。
圖6
使用CSS選擇器，可以對大批量的Html元素設置一樣的樣式，這樣可以達到界面統一的效果，而不需要一一的對Html元素設置獨立樣式。簡化了開發。