jquery中的選擇器共分為四大類。其簡單結構如下：
基本選擇器
|-----ID選擇器
|-----類選擇器
|-----元素選擇器
|-----*選擇器
|-----聯合選擇器
層級選擇器
|-----祖先-后代選擇器
|-----父輩-字輩選擇器
|-----同輩選擇器
過濾選擇器
|-----基本過濾選擇器
|-----內容過濾選擇器
|-----可見性過濾選擇器
|-----屬性過濾選擇器
|-----子元素過濾選擇器
|-----表單對象屬性過濾選擇器
表單選擇器
對於jquery選擇器的詳細描述如下：
一. 基本選擇器
1. ID選擇器
$('#idName'):返回一個封裝了指定id的dom元素的jQuery對象。
注：如果有多個相同的id值，則以第一個id為准。若沒有這個id，則返回空的jquery對象
2. 類選擇器（class）
$('.className'):返回封裝了帶有指定css類名的所有DOM元素的jQuery對象，可能有一個或多個。若沒有這個class則返回空jquery對象。
3. 元素選擇器（element）
$('span'):返回封裝了指定標簽名稱的DOM元素的jQuery對象。若沒有這個標簽名稱則返回空jquery對象。
4. *選擇器
$('*'):選擇文檔中的所有元素。
5.聯合選擇器
(′div,p,span′):選擇div,p,span標簽的元素。在這種選擇器中，可以在(′div,p,span′):選擇div,p,span標簽的元素。在這種選擇器中，可以在()中添加多個選擇器，而每個選擇器也可以很復雜，比如：
$('div p:first-child,p>span:nth-child(3),span:not(.one,.two)')等。
二. 層級選擇器
1. 祖先-后代選擇器
$('div p'):查找div中所有后代中的p元素
2. 父輩-子輩選擇器
$('div>p'):查找div中所有的子代中的p元素
3. 同輩選擇器
a. $('h2 + p'):查找和h2相鄰的p元素，並且h2和p必須是同級元素且相鄰的,如
<div>
<h2>title</h2>
<p>content</p>
</div>
<p>outer</p>
<script>
alert($('div+p').text());
</script>
這段代碼的結果是content。
b. $('h2~p'):查找h2后面的所有的p元素，並且h2和p必須是同級元素,但是不需要是相鄰的，如
<div>
<p class = 'a'>p1</p>
<span>span1</span>
<p>p2</p>
<span>span2</span>
<p>p3</p>
<span>span3</span>
</div>
<script>
$(function(){
$('.a+span').text('11111');
});
</script>
這段代碼中查找的是class為a的后面所有的同級的span元素，將其內容改為11111，可見結果是三個span的內容都為11111。
三. 過濾選擇器
1. 基本過濾選擇器
a. 首尾元素選擇器
$('div:first'):查找第一個div元素
$('div:last'):查找最后一個div元素
注：這兩個選擇器值選擇一個元素，因此從上到下只要找到一個符合條件的元素就立即返回
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<script>
$(function(){
alert($('ul li:first').html（）);
});
</script>
上述代碼的結果是第一個ul的第一個li中的1。
b. 非選擇器
$('span:not(#d)'):選擇ID不是d的span元素
注：:not()括號內也為選擇器，比如:not(ul li:first-child))或者更加復雜的選擇器都可以組合。
<ul>
<li class = 'd'>222</li>
<li class = 'd'>222</li>
<li class = 'd'>222</li>
<li>222</li>
<li>222</li>
<li class = 'd'>222</li>
</ul>
<script>
$(function(){
$('.d:not(ul>li:first-child):not(ul>li:last-child)').text('111');
});
</script>
這段代碼的結果是第2，3的text為111。
c. 奇偶選擇器
$('div:even'):查找dom中索引值為基數的div元素
注：對於$('div:even')來說，這種選擇方式是不區分父輩還是字輩的，是統一進行索引編號的。但是這種情況基本使用不到的。另外索引值使用0開始的，因為0也算偶數，所以第一個都是被選擇的。
<div class = 'one'>0 -------index = 0 even
<div class = 'two'>1 -------index = 1
<div class = 'three'>1.1</div> -------index = 2 even
</div>
<div class = 'four'>2</div> -------index = 3
</div>
<div class = 'five'>3</div> -------index = 4 even
<script>
$(function(){
$('div:even').each(function(){
alert($(this).text());
});
});
</script>
這段代碼就說明了當出現使用(′div:even′)時的情況，其結果是將class為one,three,five的div的test輸出。但是倘若我們不希望將子類的子類中的元素也進行編碼，只對最外圍的div進行選取，那么選擇器就要改成為父輩−子輩