Web基礎：jQuery 上篇：選擇器
JQuery：
jQuery是一種十分優秀的JS框架（封裝庫），它的motto是"Write less, do more"，能極大地方便開發者操縱頁面各種元素的行為，提高開發javascript效率。
引用：
必須引用jQuery庫才能使用jQuery框架。
<head> <script src="jquery.min.js"> /*裡面不放程式碼*/ </script> <script type="text/javascript" language="javascript"> /*使用JQuery*/ </script> </head>
物件：
jQuery物件：
由JQuery包裝DOM物件後產生。
jQuery物件與DOM物件：
JQuery物件不能直接訪問DOM物件的方法，反之亦然，但是可以隨意進行轉換：
JQuery物件->DOM物件：DOM物件->JQuery物件：var domObj = $("#msg")[0]; var domObj = $("#msg").get(0);var jqObj = $(document.getElementById("msg"));
使用jQuery物件：
使用jQuery選擇器查詢出來的物件是一個由一系列符合選擇條件的元素物件構成的陣列，需要用.eq(index)來選中其中某一個，預設為選擇全部。
當選中的元素只有一個時，.eq(index)可以省略。
var input3 = $("input").eq(2); //獲取選擇後的第3個input元素
JQuery物件選擇器：
jQuery的強大之處在於其包羅永珍的選擇器，可以從各個角度、各個方面、各個條件來選擇需要操縱的DOM頁面元素，選擇器是jQuery的靈魂。
先來兩個小例子開開胃：
var someElement = $("#someid"); //選中ID為someid的元素，等價於：document.getElementById("id"); var allTables = $("table"); //選中所有<table>元素，等價於：document.getElementByTagName("tagName");
jQuery的選擇器大致可以分為以下三大類。
1.基本選擇器：
通過id屬性,class屬性,或元素名來選擇DOM物件，並封裝成jQuery物件陣列。
這幾種選擇器語法簡單，選擇方便。
通過ID：
以#開頭，後面緊跟著ID，選擇某一特定ID的元素。通常每個元素的ID都不相同，故這個選擇器用於選擇單個元素較為合適。
<head> <script> var someIdObj = $("#someId"); </script> </head><body> <p id="someId">Paragraph</p> </body>通過CSS類：
以.開頭，後面緊跟著樣式名，選擇某一批套用了指定樣式名的樣式的元素物件。
<head> <script> var someClassObj = $(".someClass"); </script> <style> .someClass{color:red;} </style> </head><body> <p class="someClass">Paragraph</p> </body>通過元素名：
直接使用元素名則為選擇器的引數，選擇所有該元素的物件。
<head> <script> var allPObj = $("p"); </script> </head><body> <p>Paragraph</p> </body>再來一個綜合例項：
<head> <script> var someIdObj = $("#someid"); //選擇id屬性為someid的元素 var allPs = $("p"); //選擇所有<p>元素 var firstP = $("p").eq(0); //選擇第一個<p>元素 var someClassObj = $(".someclass"); //選擇所有應用了someclass樣式的元素 var pSomeIdObj = $("p,#someid"); //改變所有<p>元素中id為someid的元素 </script> <style> .someclass{color:red;} </style> </head><body> <p id="someid" class="someclass">Paragraph</p> </body>2.層次選擇器：
選擇子元素、兄弟元素等，以下面的元素體系為例子說明：
<body> <div id="div1"> <div id="div1_1"></div> </div> <div id="div2"> <div id="div2_1"> <div id="div2_1_1"></div> </div> <div id="div2_2"> <div id="div2_2_1"></div> </div> </div> <div id="div3"> </div> </body>所有後代元素：
以"父元素 後代元素"的格式選擇，選擇父元素內所有該後代元素的物件，包括子元素的子元素等所有後代元素。
$("body div"); //<body>內所有<div>，包括div1 div2 div2_1 div2_1_1 div2_2 div2_2_1 div3子元素：
以"父元素>子元素"個格式選擇，選擇父元素內第一層的子元素，即只選擇子元素，子元素的子元素等其他後代元素不選擇。
$("body>div"); //<body>內子<div>(子<div>的子元素不選擇)，只選取子元素，不選取後代元素，包括div1，div2，div3下一個兄弟元素：
以"選擇條件1+選擇條件2"的格式選擇，選擇滿足條件1的所有元素後面的那一個處於同一層的兄弟元素。
$("#div1+div"); //id="div1"的元素的下一個<div>，包括div2後面兄弟元素：
以"選擇條件1~選擇條件2"的格式選擇，選擇滿足條件1的所有元素後面的所有處於同一層的兄弟元素。
$("#div1~div"); //id="div1"的元素後面的所有處於同一層的兄弟<div>，包括div2，div33.過濾選擇器：
按照一定的規則來進行過濾的選擇，包括7類過濾選擇器，他們均使用“:”來新增過濾條件。
1：基本過濾選擇器
first：
選擇滿足條件的第一個元素。
$("div:first"); //選擇第一個<div>
last：
選擇滿足條件的最後一個元素。
$("div:last"); //選擇最後一個<div>
not(selector)：
去除滿足括號內條件的元素。
$("p:not('#one')") //所有<p>元素，去掉id為one的。
even：
選擇索引為偶數的元素。
$("tr:even"); //選擇所有索引為偶數的<tr>元素odd：
選擇索引為奇數的元素。
$("tr:odd"); //選擇所有索引為奇數的<tr>元素eq(index)：
選擇索引為指定數字的元素。
$("p:eq(3)"); //選擇索引為3的<p>元素gt(index)：
選擇索引大於指定數字的元素。
$("p:gt(3)"); //選擇索引大於3的<p>元素lt(index)：
選擇索引小於指定數字的元素。
$("p:lt(3)"); //選擇索引小於3的<p>元素
2：內容過濾選擇器
contains(text)：
選擇文字包含指定內容的元素。
$("p:contains('1')"); //將選中id為1的<p>元素<body> <p id="1">1111</p> <p id="2">2222</p> <p id="3">3333</p> </body>empty：
選擇不包含任何子元素的空元素。
$("p:empty"); //將選中id為1的<p>元素<body> <p id="1"></p> <p id="2">2222</p> <p id="3">3333</p> </body>parent：
選擇含有子元素的元素，換言之，選擇滿足條件的父元素。
$("p:parent"); //將選中id為1的<p>元素<body> <p id="1"><span>1111</span></p> <p id="2"></p> <p id="3"></p> </body>has(selector)：
選擇滿足指定條件的元素。
$("p:has(.mini)"); //選擇class屬性為mini的<p>元素
3：可見性過濾選擇器
hidden：
選擇所有不可見的元素。
$("body:hidden");visible：
選擇所有可見元素。
$("body:visible");
4：屬性過濾選擇器：
根據元素的屬性來選擇元素，這個過濾器不需要以“:”開頭。
[attribute]：
選擇擁有此屬性的元素。
$("input[value]"); //選擇所有含有value屬性的<input>元素[attribute=value]：
選擇精確匹配屬性值的元素。
$("input[class='btnClass']"); //選擇所有class屬性為btnClass的<input>元素[attribute!=value]：
選擇屬性值不為指定值的元素。
$("input[id!='btn']"); //選擇所有id不為btn的<input>元素[attribute^=value]：
選擇屬性值以指定值開頭的元素。
$("input[id!='in']"); //選擇所有id以in開頭的<input>元素[attribute$=value]：
選擇屬性值以指定值結尾的元素。
$("input[id$='out']"); //選擇所有id以out結尾的<input>元素[attribute*=value]：
選擇屬性值含有指定值的元素。
$("input[id*='s']"); //選擇所有id含有s的<input>元素
5：子元素過濾選擇器
nth-child(index)：
選擇每個父元素下的第index個子元素，從1開始。
nth-child(even / odd)：
選擇每個父元素下index為奇/偶的子元素
nth-child(3n)：
每個父元素下index為3的倍數的子元素。
first-child：
只匹配第一個子元素。
last-child：
只匹配最後一個子元素。
only-child：
只匹配父元素的唯一子元素。
為圖省事，下面用一個例項介紹第一種子元素過濾選擇器：
<script> $(function(){ $("div:nth-child(1)").eq(0); //id="div1" $("div:nth-child(1)").eq(1); //id="div21" $("div:nth-child(1)").eq(2); //id="div211" $("div:nth-child(2)").eq(0); //id="div2" $("div:nth-child(2)").eq(1); //id="div212" $("div:nth-child(2)").eq(2); //id="div22" $("div:nth-child(3)").eq(0); //id="div3" }); </script><body> <div id="div1"></div> <div id="div2"> <div id="div21"> <div id="div211"></div> </div> </div> <div id="div22"></div> <div id="div3"></div> </body>
6：表單物件過濾選擇器
選擇表單控制元件元素，以“:”開頭，後面緊跟以下過濾器。input：
選擇所有<input><textarea><select><button>元素。
text：
選擇所有文字框，包括<input type="text" /> <textarea></textarea>。
password：
選擇所有密碼框，<input type="password" />
radio：
選擇所有圓形單選按鈕。<input type="radio" />
checkbox：
選擇所有方形勾選框。<input type="checkbox" />
submit：
選擇所有提交按鈕。<input type="submit" />
image：
選擇所有影象按鈕。<input type="image" />
reset：
選擇所有重置按鈕。<input type="reset" />
button：
選擇所有按鈕。<input type="button" />
file：
選擇所有檔案選擇按鈕。<input type="file" />
hidden：
選擇所有隱藏表單項。<input type="hidden" />
7：表單物件屬性過濾選擇器
選擇滿足特定條件的表單控制元件元素，是表單物件過濾選擇器的延伸。以“:”開頭，後面緊跟以下過濾器。
至於用選擇器具體能做什麼，請看《Web基礎：jQuery 中篇：操縱DOM》和《Web基礎：jQuery 下篇：千變萬化的事件》。enabled：
所有含有enabled屬性的元素。
disabled：
所有含有disabled屬性的元素。
checked：
所有含有checked屬性的元素。
selected：
所有含有selected屬性的元素。