選擇器是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標籤指定文字顏色
