沒有什么新意，全是從網上摘抄的，如果哪天忘了，就來查查吧。
選擇器是jQuery最基礎的東西，本文中列舉的選擇器基本上囊括了所有的jQuery選擇器，也許各位通過這篇文章能夠加深對jQuery選擇器的理解，它們本身用法就非常簡單，我更希望的是它能夠提升個人編寫jQuery代碼的效率。本文配合截圖、代碼和簡單的概括對所有jQuery選擇器進行了介紹，也列舉出了一些需要注意和區分的地方。
一、基本選擇器
1. id選擇器（指定id元素）
將id="one"的元素背景色設置為黑色。（id選擇器返單個元素）
$(document).ready(function () { $('#one').css('background', '#000'); });
2. class選擇器（遍歷css類元素）
將class="cube"的元素背景色設為黑色
$(document).ready(function () { $('.cube').css('background', '#000'); });
3. element選擇器（遍歷html元素）
將p元素的文字大小設置為12px
$(document).ready(function () { $('p').css('font-size', '12px'); });
4. * 選擇器（遍歷所有元素）
$(document).ready(function () { // 遍歷form下的所有元素，將字體顏色設置為紅色 $('form *').css('color', '#FF0000'); });
5. 並列選擇器
$(document).ready(function () { // 將p元素和div元素的margin設為0 $('p, div').css('margin', '0'); });
二、 層次選擇器
1. parent > child（直系子元素）
$(document).ready(function () { // 選取div下的第一代span元素，將字體顏色設為紅色 $('div > span').css('color', '#FF0000'); });
下面的代碼，只有第一個span會變色，第二個span不屬於div的一代子元素，顏色保持不變。
<div> <span>123</span> <p> <span>456</span> </p> </div>
2. prev + next（下一個兄弟元素，等同於next()方法）
$(document).ready(function () { // 選取class為item的下一個div兄弟元素 $('.item + div').css('color', '#FF0000'); // 等價代碼 //$('.item').next('div').css('color', '#FF0000'); });
下面的代碼，只有123和789會變色
<p class="item"></p> <div>123</div> <div>456</div> <span class="item"></span> <div>789</div>
3. prev ~ siblings（prev元素的所有兄弟元素，等同於nextAll()方法）
$(document).ready(function () { // 選取class為inside之后的所有div兄弟元素 $('.inside ~ div').css('color', '#FF0000'); // 等價代碼 //$('.inside').nextAll('div').css('color', '#FF0000'); });
下面的代碼，G2和G4會變色
<div class="inside">G1</div> <div>G2</div> <span>G3</span> <div>G4</div>
三、 過濾選擇器
1. 基本過濾選擇器
——1.1 :first和:last（取第一個元素或最后一個元素）
$(document).ready(function () { $('span:first').css('color', '#FF0000'); $('span:last').css('color', '#FF0000'); });
下面的代碼，G1（first元素）和G3（last元素）會變色
<span>G1</span> <span>G2</span> <span>G3</span>
——1.2 :not（取非元素）
$(document).ready(function () { $('div:not(.wrap)').css('color', '#FF0000'); });
下面的代碼，G1會變色
<div>G1</div> <div class="wrap">G2</div>
但是，請注意下面的代碼：
<div> G1 <div class="wrap">G2</div> </div>
當G1所在div和G2所在div是父子關系時，G1和G2都會變色。
——1.3 :even和:odd（取偶數索引或奇數索引元素，索引從0開始，even表示偶數，odd表示奇數）
$(document).ready(function () { $('tr:even').css('background', '#EEE'); // 偶數行顏色 $('tr:odd').css('background', '#DADADA'); // 奇數行顏色 });
A、C行顏色#EEE（第一行的索引為0），B、D行顏色#DADADA
<table width="200" cellpadding="0" cellspacing="0"> <tbody> <tr><td>A</td></tr> <tr><td>B</td></tr> <tr><td>C</td></tr> <tr><td>D</td></tr> </tbody> </table>
——1.4 :eq(x) （取指定索引的元素）
$(document).ready(function () { $('tr:eq(2)').css('background', '#FF0000'); });
更改第三行的背景色，在上面的代碼中C的背景會變色。
——1.5 :gt(x)和:lt(x)（取大於x索引或小於x索引的元素）
$(document).ready(function () { $('ul li:gt(2)').css('color', '#FF0000'); $('ul li:lt(2)').css('color', '#0000FF'); });
L4和L5會是紅色，L1和L2會是藍色，L3是默認顏色
<ul> <li>L1</li> <li>L2</li> <li>L3</li> <li>L4</li> <li>L5</li> </ul>
——1.6 :header（取H1~H6標題元素）
$(document).ready(function () { $(':header').css('background', '#EFEFEF'); });
下面的代碼，H1~H6的背景色都會變
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
2. 內容過濾選擇器
——2.1 :contains(text)（取包含text文本的元素）
$(document).ready(function () { // dd元素中包含"jQuery"文本的會變色 $('dd:contains("jQuery")').css('color', '#FF0000'); });
下面的代碼，第一個dd會變色
<dl> <dt>技術</dt> <dd>jQuery, .NET, CLR</dd> <dt>SEO</dt> <dd>關鍵字排名</dd> <dt>其他</dt> <dd></dd> </dl>
——2.2 :empty（取不包含子元素或文本為空的元素）
$(document).ready(function () { $('dd:empty').html('沒有內容'); });
上面第三個dd會顯示"沒有內容"文本
——2.3 :has(selector)（取選擇器匹配的元素）
$(document).ready(function () { // 為包含span元素的div添加邊框 $('div:has(span)').css('border', '1px solid #000'); });
即使span不是div的直系子元素，也會生效
<div> <h2> A <span>B</span> </h2> </div>
——2.4 :parent（取包含子元素或文本的元素）
$(document).ready(function () { $('ol li:parent').css('border', '1px solid #000'); });
下面的代碼，A和D所在的li會有邊框
<ol> <li></li> <li>A</li> <li></li> <li>D</li> </ol>
3. 可見性過濾選擇器
——3.1 :hidden（取不可見的元素）
jQuery至1.3.2之后的:hidden選擇器僅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。這也意味着hidden只匹配那些“隱藏的”並且不占空間的元素，像visibility:hidden或opactity:0的元素占據了空間，會被排除在外。
參照：http://www.jquerysdk.com/api/hidden-selector
下面的代碼，先彈出"hello"對話框，然后hid-1會顯示，hid-2仍然是不可見的。
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <style type="text/css"> div { margin: 10px; width: 200px; height: 40px; border: 1px solid #FF0000; display:block; } .hid-1 { display: none; } .hid-2 { visibility: hidden; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div:hidden').show(500); alert($('input:hidden').val()); }); </script> </head> <body> <div class="hid-1">display: none</div> <div class="hid-2">visibility: hidden</div> <input type="hidden" value="hello"/> </body> </html>
——3.2 :visible（取可見的元素）
下面的代碼，最后一個div會有背景色
<script type="text/javascript"> $(document).ready(function() { $('div:visible').css('background', '#EEADBB'); }); </script> <div class="hid-1">display: none</div> <div class="hid-2">visibility: hidden</div> <input type="hidden" value="hello"/> <div> jQuery選擇器大全 </div>
4. 屬性過濾選擇器
——4.1 [attribute]（取擁有attribute屬性的元素）
下面的代碼，最后一個a標簽沒有title屬性，所以它仍然會帶下划線
<script type="text/javascript"> $(document).ready(function() { $('a[title]').css('text-decoration', 'none'); }); </script> <ul> <li><a href="#" title="DOM對象和jQuery對象" class="item">DOM對象和jQuery對象</a></li> <li><a href="#" title="jQuery選擇器大全" class="item-selected">jQuery選擇器大全</a></li> <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li> <li><a href="#" title="基於jQuery的插件開發" class="item">基於jQuery的插件開發</a></li> <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li> <li><a href="#" class="item">其他</a></li> </ul>
——4.2 [attribute = value]和[attribute != value]（取attribute屬性值等於value或不等於value的元素）
分別為class="item"和class!=item的a標簽指定文字顏色
JQUERY的父，子，兄弟節點查找方法
jQuery.parent(expr) 找父親節點，可以傳入expr進行過濾，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),類似於jQuery.parents(expr),但是是查找所有祖先元素，不限於父元素
jQuery.children(expr).返回所有子節點，這個方法只會返回直接的孩子節點，不會返回所有的子孫節點
jQuery.contents(),返回下面的所有內容，包括節點和文本。這個方法和children()的區別就在於，包括空白文本，也會被作為一個
jQuery對象返回，children()則只會返回節點
jQuery.prev()，返回上一個兄弟節點，不是所有的兄弟節點
jQuery.prevAll()，返回所有之前的兄弟節點
jQuery.next(),返回下一個兄弟節點，不是所有的兄弟節點
jQuery.nextAll()，返回所有之后的兄弟節點
jQuery.siblings(),返回兄弟姐妹節點，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一樣。jQuery.filter()是從初始的jQuery對象集合中篩選出一部分，而jQuery.find()
的返回結果，不會有初始集合中的內容，比如$("p"),find("span"),是從
元素開始找,等同於$("p span")
jQuery 使用 CSS 選擇器來選取 HTML 元素。
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取 id="demo" 的第一個 <p> 元素。
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景顏色更改為紅色：
實例
$("p").css("background-color","red");
$(this) 當前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一個元素
$("ul li:first") 每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']") 所有帶有以 ".jpg" 結尾的屬性值的 href 屬性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first $("p:first") 第一個 <p> 元素
:last $("p:last") 最后一個 <p> 元素
:even $("tr:even") 所有偶數 <tr> 元素
:odd $("tr:odd") 所有奇數 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四個元素（index 從 0 開始）
:gt(no) $("ul li:gt(3)") 列出 index 大於 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小於 3 的元素
:not(selector) $("input:not(:empty)") 所有不為空的 input 元素
:header $(":header") 所有標題元素 <h1> - <h6>
:animated 所有動畫元素
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 無子（元素）節點的所有元素
:hidden $("p:hidden") 所有隱藏的 <p> 元素
:visible $("table:visible") 所有可見的表格
s1,s2,s3 $("th,td,.intro") 所有帶有匹配選擇的元素
[attribute] $("[href]") 所有帶有 href 屬性的元素
[attribute=value] $("[href='#']") 所有 href 屬性的值等於 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 屬性的值不等於 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 屬性的值包含以 ".jpg" 結尾的元素
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被選取的 input 元素
:checked $(":checked") 所有被選中的 input 元素
$(
"#myELement"
) 選擇id值等於myElement的元素，id值不能重復在文檔中只能有一個id值是myElement所以得到的是唯一的元素
$(
"div"
) 選擇所有的div標簽元素，返回div元素數組
$(
".myClass"
) 選擇使用myClass類的css的所有元素
$(
"*"
) 選擇文檔中的所有的元素，可以運用多種的選擇方式進行聯合選擇：例如$(
"#myELement,div,.myclass"
)
層疊選擇器：
$(
"form input"
) 選擇所有的form元素中的input元素
$(
"#main > *"
) 選擇id值為main的所有的子元素
$(
"label + input"
) 選擇所有的label元素的下一個input元素節點，經測試選擇器返回的是label標簽后面直接跟一個input標簽的所有input標簽元素
$(
"#prev ~ div"
) 同胞選擇器，該選擇器返回的為id為prev的標簽元素的所有的屬於同一個父元素的div標簽
基本過濾選擇器：
$(
"tr:first"
) 選擇所有tr元素的第一個
$(
"tr:last"
) 選擇所有tr元素的最后一個
$(
"input:not(:checked) + span"
)
過濾掉：checked的選擇器的所有的input元素
$(
"tr:even"
) 選擇所有的tr元素的第0，2，4... ...個元素（注意：因為所選擇的多個元素時為數組，所以序號是從0開始）
$(
"tr:odd"
) 選擇所有的tr元素的第1，3，5... ...個元素
$(
"td:eq(2)"
) 選擇所有的td元素中序號為2的那個td元素
$(
"td:gt(4)"
) 選擇td元素中序號大於4的所有td元素
$(
"td:ll(4)"
) 選擇td元素中序號小於4的所有的td元素
$(
":header"
)
$(
"div:animated"
)
內容過濾選擇器：
$(
"div:contains('John')"
) 選擇所有div中含有John文本的元素
$(
"td:empty"
) 選擇所有的為空（也不包括文本節點）的td元素的數組
$(
"div:has(p)"
) 選擇所有含有p標簽的div元素
$(
"td:parent"
) 選擇所有的以td為父節點的元素數組
可視化過濾選擇器：
$(
"div:hidden"
) 選擇所有的被hidden的div元素
$(
"div:visible"
) 選擇所有的可視化的div元素
屬性過濾選擇器：
$(
"div[id]"
) 選擇所有含有id屬性的div元素
$(
"input[name='newsletter']"
) 選擇所有的name屬性等於
'newsletter'
的input元素
$(
"input[name!='newsletter']"
) 選擇所有的name屬性不等於
'newsletter'
的input元素
$(
"input[name^='news']"
) 選擇所有的name屬性以
'news'
開頭的input元素
$(
"input[name$='news']"
) 選擇所有的name屬性以
'news'
結尾的input元素
$(
"input[name*='man']"
) 選擇所有的name屬性包含
'news'
的input元素
$(
"input[id][name$='man']"
) 可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那么屬性以man結尾的元素
子元素過濾選擇器：
$(
"ul li:nth-child(2)"
),$(
"ul li:nth-child(odd)"
),$(
"ul li:nth-child(3n + 1)"
)
$(
"div span:first-child"
) 返回所有的div元素的第一個子節點的數組
$(
"div span:last-child"
) 返回所有的div元素的最后一個節點的數組
$(
"div button:only-child"
) 返回所有的div中只有唯一一個子節點的所有子節點的數組
表單元素選擇器：
$(
":input"
) 選擇所有的表單輸入元素，包括input, textarea, select 和 button
$(
":text"
) 選擇所有的text input元素
$(
":password"
) 選擇所有的password input元素
$(
":radio"
) 選擇所有的radio input元素
$(
":checkbox"
) 選擇所有的checkbox input元素
$(
":submit"
) 選擇所有的submit input元素
$(
":image"
) 選擇所有的image input元素
$(
":reset"
) 選擇所有的reset input元素
$(
":button"
) 選擇所有的button input元素
$(
":file"
) 選擇所有的file input元素
$(
":hidden"
) 選擇所有類型為hidden的input元素或表單的隱藏域
表單元素過濾選擇器：
$(
":enabled"
) 選擇所有的可操作的表單元素
$(
":disabled"
) 選擇所有的不可操作的表單元素
$(
":checked"
) 選擇所有的被checked的表單元素
$(
"select option:selected"
) 選擇所有的select 的子元素中被selected的元素
選取一個 name 為”S_03_22″的input text框的上一個td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
名字以”S_”開始，並且不是以”_R”結尾的
$(”input[@ name ^=
'S_'
]“).not(”[@ name $=
'_R'
]“)
一個名為 radio_01的radio所選的值
$(”input[@ name =radio_01][@checked]“).val();
$(
"A B"
) 查找A元素下面的所有子節點，包括非直接子節點
$(
"A>B"
) 查找A元素下面的直接子節點
$(
"A+B"
) 查找A元素后面的兄弟節點，包括非直接子節點
$(
"A~B"
) 查找A元素后面的兄弟節點，不包括非直接子節點
1. $(
"A B"
) 查找A元素下面的所有子節點，包括非直接子節點
例子：找到表單中所有的 input 元素
HTML 代碼:
<form>
<label>Name:</label>
<input name=
"name"
/>
<fieldset>
<label>Newsletter:</label>
<input name=
"newsletter"
/>
</fieldset>
</form>
<input name=
"none"
/>
jQuery 代碼:
$(
"form input"
)
結果:
[ <input name=
"name"
/>, <input name=
"newsletter"
/> ]
2. $(
"A>B"
) 查找A元素下面的直接子節點
例子：匹配表單中所有的子級input元素。
HTML 代碼:
<form>
<label>Name:</label>
<input name=
"name"
/>
<fieldset>
<label>Newsletter:</label>
<input name=
"newsletter"
/>
</fieldset>
</form>
<input name=
"none"
/>
jQuery 代碼:
$(
"form > input"
)
結果:
[ <input name=
"name"
/> ]
3. $(
"A+B"
) 查找A元素后面的兄弟節點，包括非直接子節點
例子：匹配所有跟在 label 后面的 input 元素
HTML 代碼:
<form>
<label>Name:</label>
<input name=
"name"
/>
<fieldset>
<label>Newsletter:</label>
<input name=
"newsletter"
/>
</fieldset>
</form>
<input name=
"none"
/>
jQuery 代碼:
$(
"label + input"
)
結果:
[ <input name=
"name"
/>, <input name=
"newsletter"
/> ]
4. $(
"A~B"
) 查找A元素后面的兄弟節點，不包括非直接子節點
例子：找到所有與表單同輩的 input 元素
HTML 代碼:
<form>
<label>Name:</label>
<input name=
"name"
/>
<fieldset>
<label>Newsletter:</label>
<input name=
"newsletter"
/>
</fieldset>
</form>
<input name=
"none"
/>
jQuery 代碼:
$(
"form ~ input"
)
結果:
[ <input name=
"none"
/> ]