在Dom編程中我們只能使用有限的函數根據id或者TagName獲取Dom對象.然而在jQuery中則完全不同,jQuery提供了異常強大的選擇器用來幫助我們獲取頁面上的對象, 並且將對象以jQuery包裝集的形式返回。本章主要對常用的jQuery選擇器進行一個介紹及歸類。
jQuery選擇器大體上可分爲4類：基本選擇器、層次選擇器、過濾選擇器、表單選擇器。其中過濾選擇器可以分爲：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器。具體示例圖可見如下：
選擇器
｜－基本選擇器
｜－層次選擇器
｜－表單選擇器
｜－過濾選擇器
｜—簡單過濾選擇器
｜－內容過濾選擇器
｜－可見性過濾選擇器
｜－屬性過濾選擇器
｜－子元素過濾選擇器
｜－表單對象屬性過濾選擇器
下面就分別就每種選擇器進行一個簡要的介紹：
基本選擇器
它是jQuery中使用最頻繁的選擇器，它由元素Id、Class、元素名、多個選擇符組成，通過基本選擇器可以實現大多數頁面元素的查找。
|
選擇器 |
功能 |
返回值 |
|
#id |
根據給定的ID匹配一個元素 |
單個元素 |
|
element |
根據給定的元素名匹配所有元素 |
元素集合 |
|
.class |
根據給定的類匹配元素 |
元素集合 |
|
* |
匹配所有元素 |
元素集合 |
|
Selector1, selector N |
將每一個選擇器匹配到的元素合併後一起返回 |
元素集合 |
層次選擇器
它是通過DOM元素間的層次關係獲取元素，其主要的層次關係包括後代、父子、相鄰、兄弟關係，通過某些關係可以方便快捷地定位元素。
|
選擇器 |
功能 |
返回值 |
|
Ancestor descendant |
根據祖先元素匹配所有的後代元素 |
元素集合 |
|
Parent > child |
根據父元素匹配所有的子元素 |
元素集合 |
|
Prev + next |
匹配所有緊接在prev元素後的相鄰元素 |
元素集合 |
|
Prev ~sibling |
匹配prev元素之後的所有兄弟元素 |
元素集合 |
注：ancestor descent與parent > child所選擇的元素集合是不同的，前者的層次關係是祖先與後代，而後者是父子關係；另外，prev + next可以使用.next()代替，而prev ~siblings可以使用.nextAll()代替。
表單選擇器
表單選擇器專爲表單量身打造，通過它可以在頁面中快速定位某表單對象，直接獲取表單對象的方法。
|
選擇器 |
功能 |
返回值 |
|
:input |
獲取所有input、textarea、select |
元素集合 |
|
:text |
獲取所有單行文本框 |
元素集合 |
|
:password |
獲取所有密碼框 |
元素集合 |
|
:radio |
獲取所有單選按鈕 |
元素集合 |
|
:checkbox |
獲取所有複選框 |
元素集合 |
|
:submit |
獲取所有提交按鈕 |
元素集合 |
|
:image |
獲取所有圖像域 |
元素集合 |
|
:reset |
獲取所有重置按鈕 |
元素集合 |
|
:button |
獲取所有按鈕 |
元素集合 |
|
:file |
獲取所有文件域 |
元素集合 |
簡單過濾選擇器
過濾選擇器根據某類過濾規則進行元素的匹配，書寫時都以冒號（：）開頭；簡單過濾選擇器是某中使用最廣泛的一種。
|
選擇器 |
功能 |
返回值 |
|
:first或first() |
獲取第一個元素 |
單個集合 |
|
:last或last() |
獲取最後一個元素 |
單個集合 |
|
:not(selector) |
獲取除給定選擇器外的所有元素 |
元素集合 |
|
:even |
獲取所有索引值爲偶數的元素，索引號從0開始 |
元素集合 |
|
:odd |
獲取所有索引值爲奇數的元素，索引號從0開始 |
元素集合 |
|
:eq(index) |
獲取指定索引值的元素，索引號從0開始 |
單個集合 |
|
:gt(index) |
獲取所有大於給定索引值的元素，索引從0開始 |
元素集合 |
|
:lt(index) |
獲取所有小於給定索引值的元素，索引從0開始 |
元素集合 |
|
:header |
獲取所有標題類型的元素，如h1、h2…… |
元素集合 |
|
:animated |
獲取正在執行動畫效果的元素 |
元素集合 |
內容過濾選擇器
根據元素中的文字內容或所包含的子元素特徵獲取元素，其內容可以模糊或絕對進行定位。
|
選擇器 |
功能 |
返回值 |
|
:contains(text) |
獲取包含給定文本的元素 |
元素集合 |
|
:empty |
獲取所有不包含子元素或文本的空元素 |
元素集合 |
|
:has(selector) |
獲取含有選擇器所匹配的元素的元素 |
元素集合 |
|
:parent |
獲取含有子元素或文本的元素 |
元素集合 |
可見性過濾選擇器
根據元素是否可見的特徵獲取元素。
|
選擇器 |
功能 |
返回值 |
|
:hidden |
獲取所有不可見的元素，或者type爲hidden |
元素集合 |
|
:visible |
獲取所有可見的元素 |
元素集合 |
屬性過濾選擇器
根據元素的某個屬性獲取元素，如ID號或匹配屬性值的內容，並以“[”開始，以“]”結束。
|
選擇器 |
功能 |
返回值 |
|
[attribute] |
獲取包含給定屬性的元素 |
元素集合 |
|
[attribute=value] |
獲取等於給定的屬性是某個特定值的元素 |
元素集合 |
|
[attribute!=value] |
獲取不等於給定的屬性是某個特定值的元素 |
元素集合 |
|
[attribute^=value] |
獲取給定的屬性是以某些值開始的元素 |
元素集合 |
|
[attribute$=value] |
獲取給定的屬性是以某些值結尾的元素 |
元素集合 |
|
[attribute*=value] |
獲取給定的屬性是以包含某些值的元素 |
元素集合 |
|
[selector1] [selectorN] |
獲取滿足多個條件的複合屬性的元素 |
元素集合 |
子元素過濾選擇器
子元素過濾選擇器能夠滿足指定到某行的需求，通過它可以輕鬆的獲取所有父元素中指定的某個元素。
|
選擇器 |
功能 |
返回值 |
|
:nth-child(eq|even|odd) |
獲取每個父元素下的特定位置元素，索引從1開始 |
元素集合 |
|
:first-child |
獲取每個父元素下的第一個子元素 |
元素集合 |
|
:last-child |
獲取每個父元素下的最後一個子元素 |
元素集合 |
|
:only-child |
獲取每個父元素下的僅有的一個元素 |
元素集合 |
表單對象屬性過濾選擇器
表單對象屬性過濾選擇器通過表單中的某些對象屬性特徵獲取該類元素，如enabled、disabled、checked、selected屬性。
|
選擇器 |
功能 |
返回值 |
|
:enabled |
獲取表單中所有屬性爲可用的元素 |
元素集合 |
|
:disabled |
獲取表單中所有屬性爲不可用的元素 |
元素集合 |
|
:checked |
獲取表單中所有被選中的元素 |
元素集合 |
|
:selected |
獲取表單中所有被選中option的元素 |
元素集合 |
上述只是簡單的對jQuery中的選擇器進行了歸納及彙總。下面將結合一個具體的實例（圖書類目）來介紹選擇器的使用。
1）、在頁面中創建一個導航條，單擊標題上的“展開”鏈接，可以將圖書類目顯示出來，並將其上的方案變爲“隱藏”，同時在右下角顯示簡化字樣。反之亦然。
2）、單擊“簡化”鏈接，隱藏指定的內容，並將“簡化”字樣變爲“更多”。反之亦然。
功能實現：
<html>
<head>
<title>jquery選擇器綜合實例Demo</title>
<styletype="text/css">
body{
font-size:13px
}
#divFrame{
border:solid1px #666;
width:301px;
overflow:hidden
}
#divFrame.clsHead {
background-color:#eee;
padding:8px;
height:18px;
cursor:hand
}
#divFrame.clsHead h3 {
padding:0px;
margin:0px;
float:left
}
#divFrame.clsHead span {
float:right;
margin-top:3px
}
#divFrame.clsContent {
padding:8px
}
#divFrame.clsContent ul {
list-style-type:none;
margin:0px;
padding:0px
}
#divFrame.clsContent ul li {
float:left;
width:95px;
height:23px;
line-height:23px
}
#divFrame.clsBot{
float:right;
padding-top:5px;
padding-bottom:5px
}
.GetFocus{
background-color:#eee
}
</style>
/*
* 用於將jquery所需要的類庫添加進來
*/
<scripttype="text/javascript" language="javascript"src="../js/jquery-1.5.min.js">
</script>
<scripttype="text/javascript" language="javascript">
/*
*實現標題欄中隱藏/展開功能，用於實現圖書分類的顯示
*/
$(function() {
$(".clsHeadspan > a").click(function() { //用於定位
//判斷當前位置的字符是什麼，用以判斷下一步的操作
//如果原來顯示的隱藏，則顯示爲展開，並將圖書分類不顯示，右下角不顯示任何字樣
if($(".clsHeadspan > a").text() == "隱藏") {
$(".clsHeadspan > a").text("展開");
$(".clsContent").css("display","none");
$(".clsBot").css("display","none");
}else {
//若原來是顯示展開，則顯示爲隱藏，並將圖書分類顯示出來，並顯示“簡化”簡化字樣
$(".clsHeadspan > a").text("隱藏");
$(".clsContent").css("display","block");
$(".clsBot").css("display","block");
$(".clsBot> a").text("簡化");
}
});
})
/*
*實現右下角的簡化/更多功能，用於實現圖書分類的全部及部分顯示功能
*/
$(function(){
$(".clsBot> a").click( function() {
if($(".clsBot> a").text() == "簡化") {
$(".clsBot> a").text("更多");
$("li:gt(4):not(:last)").hide();
}else {
$(".clsBot> a").text("簡化");
$("li:gt(4):not(:last)").show().addClass("GetFocus");
}
});
})
</script>
</head>
<body>
<divid="divFrame">
<divclass="clsHead">
<h3>圖書分類</h3>
<span><ahref="#">隱藏</a></span>
</div>
<divclass="clsContent">
<ul>
<li><ahref="#">小說</a><i>(1100)</i></li>
<li><ahref="#">文藝</a><i>(900)</i></li>
<li><ahref="#">青春</a><i>(600)</i></li>
<li><ahref="#">少兒</a><i>(3000)</i></li>
<li><ahref="#">生活</a><i>(400)</i></li>
<li><ahref="#">社科</a><i>(6000)</i></li>
<li><ahref="#">倫理</a><i>(5000)</i></li>
<li><ahref="#">計算機</a><i>(2000)</i></li>
<li><ahref="#">教育</a><i>(9000)</i></li>
<li><ahref="#">工具書</a><i>(666)</i></li>
<li><ahref="#">引進版</a><i>(3333)</i></li>
<li><ahref="#">其它書</a><i>(55555)</i></li>
</ul>
</div>
<divclass="clsBot">
<ahref="#">簡化</a>
</div>
</div>
</body>
</html>
實現效果－初次打開效果如下：
點擊“隱藏”鏈接時如下：
點擊“展開”鏈接時如下：
點擊“簡化”鏈接時如下：
