JQuery選取器使用以及對元素的操作方法

1 基本選取器

$(#id)根據給定的id匹配一個元素
$(.class)根據給定的類名匹配元素
$(element)根據給定的元素名匹配元素
$(*)匹配所有元素
$(selector1,selector2,...,selectorN)將每一個選取器匹配到的元素合并後一起返回

2 層次選取器

$("ancestor descendant")選取ancestor元素裡的所有descendant（後代）元素
$("parent > child")只選取parent元素下的child（子層級）元素，與$("ancestor descendant")有區別，前者選擇所有後代元素（含且不限於子層級）
$('prev + next')選取緊接在prev元素後的next元素
$('prev ~ siblings')選取prev元素之後的next元素

3 過濾選取器

3.1 基本過濾選取器

$("selector:first")選取第一個元素
$("selector:last")選取最後一個元素
$("selector:not(selector2)")去除所有與給定選取器匹配的元素
$("selector:even")選取索引是偶數的所有元素，索引從0開始
$("selector:odd")選取索引是奇數的所有元素，索引從0開始
$("selector:eq(index)")選取索引等於index的元素，index從0開始
$("selector:gt(index)")選取索引大於index的元素，index從0開始
$("selector:lt(index)")選取索引小於index的元素，index從0開始
$(":header")選取所有的標題元素，如h1,h2,h3等等
$(":animated")選取當前正在執行動畫的所有元素

3.2 內容過濾選取器

$(":contains(text)")選取含有常值內容為"text"的元素
$(":empty")選取不包含子項目或者文本的空元素
$(":has(selector2)")選取含有選取器所匹配的元素的元素
$(":parent")選取含有子項目或者文本的元素

3.3 可見度過濾選取器

$(":hidden")選取所有不可見的元素
$(":visible")選取所有可見的元素

3.4 屬性過濾選取器

$("selector[attribute]")選取擁有此屬性的元素
$("selector[attribute=value]")選取屬性的值為value的元素
$("selector[attribute!=value]")選取屬性的值不等於value的元素
$("selector[attribute^=value]")選取屬性的值以value開始的元素
$("selector[attribute$=value]")選取屬性的值以value結束的元素
$("selector[attribute*=value]")選取屬性的值含有value的元素
$("selector[selector2][selectorN]")用屬性選取器合并成一個複合屬性選取器，滿足多個條件。每選擇一次，縮小一次範圍，如$("div[id][title$='test']")選取擁有屬性id，並且屬性title以"test"結束的<div>元素

3.5 子項目過濾選取器

$(":nth-child(index/even/odd/equation)")選取每個父元素下的第index個子項目或者奇偶元素，index從1算起
$("selector:first-child")選取每個父元素的第一個子項目
$("selector:last-child")選取每個父元素的最後一個子項目
$("selector:only-child")如果某個元素是它父元素中唯一的子項目，那麼將會被匹配。如果父元素中含有其他元素，則不會被匹配

3.6 表單對象屬性過濾選取器

$("selector:enabled")選取所有可用元素
$("selector:disabled")選取所有不可用元素
$("selector:checked")選取所有被選中的元素（radio,checkbox）
$("selector:selected")選取所有被選中的選項元素（select）

4 表單選取器

$(":input")選取所有的<input>,<textarea>,<select>,<button>元素
$(":text")選取所有的單行文字框
$(":password")選取所有的密碼框
$(":radio")選取所有的單選框
$(":checkbox")選取所有的複選框
$(":submit")選取所有的提交按鈕
$(":image")選取所有的映像按鈕
$(":reset")選取所有的重設按鈕
$(":button")選取所有的按鈕
$(":file")選取所有的上傳域
$(":hidden")選取所有隱藏元素

==========================================================================

jQuery 的選取器可謂之強大無比，這裡簡單地總結一下常用的元素尋找方法

$("#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" /> ]

===================================================================

jQuery選取器是jQuery庫中非常重要的部分之一。它支援網頁開發人員所熟知的CSS文法快速輕鬆地對頁面進行設定。瞭解jQuery選取器是開啟高效開發jQuery之門的鑰匙。一個典型的jQuery選取器句法形式：
$(selector).methodName();
selector 是一個字串表達示，用於識別DOM中的元素，然後使用jQuery提供的方法集合加以設定。
大多數情況下jQuery支援這樣的操作：
$(selector).method1().method2().method3();
這 個執行個體表示隱含DOM中id="goAway"的元素，然後為其添加一個class="incognito"屬性。
$('#goAway').hide().addClass('incognito');
提示一下：當選取器表達示匹配多個元素時，可以象JavaScritp數組操作一樣，方便靈活地利用數組指標進行選取。這是例子：
var element = $('img')[0];
匹配表達示的元素中，第一個元素對象將賦給變數element。

jQuery選取器的分類
有三種分類：基本選取器，位置選取器和自訂選取器。可以將基本選取器理解為“發現型選取器”，事實上它用於搜尋 DOM中的元素。位置選取器和自訂選取器更像是“篩選型選取器”。

基本選取器
這裡提供了一份基本選取器的參考執行個體。這些選取器都支援CSS3文法准標和語議。

$(‘div’) 選取所有<div>元素。

$(‘fieldset a’) 選擇在<fieldset>元素內出現的所有<a>元素。

$(‘li>p’) 選取在<li>標記中直接出現的所有<p>元素。

$(‘div~p’) 選取位為<div>標記之後出現的所有<p>元素。

$(‘p:has(b)’) 選取<p>元素內包含有<b>的所有元素。

$(‘div.someClass’) 選取<div>元素中出現class="someClass"屬性的所有元素。

$(‘.someClass’) 選取出現class="someClass"屬性的所有元素。

$(‘#testButton’) 選取id="testButton"的元素。元素id屬性值在當前DOM中是唯一的。因此我很好奇出現了兩個id="testButton"的元素時它會怎麼選。實驗證明它只會選取第一個元素。真正的開發過程中，我們絕對不要在一個DOM中出現多個id相同的元素。

$(‘img[alt]’) 選取具有alt屬性的所有<img>元素。

$(‘a[href$=.pdf]’) 選取具有href屬性，而且屬性的值以.pdf結尾的所有<a>元素。

$(‘button[id*=test]’) 選取所有的按鈕，但按鈕的id屬性要包含"test"。

提示一下：在同一個$()結構中可以用“,”來串連多個不同的選取器，比如這樣：

$('div,p')

以下是匹配所有具有title屬性的<div>元素，和所有具有alt屬性的<img>元素：

$('div[title],img[alt]')

位置選取器
這種類型的選取器可以附加到任何基本選取器上，用於進行基於元素位置的篩選。如果預設基本選取器，則將被視為所有元素。

舉一些例子吧。

$('p:first') 選取頁面中第一個出現的<p>元素。

$('img[src$=.png]:first') 選取頁面中第一個出現src屬性值以.png結尾的<img>元素。

$('button.small:last') 選取頁面中最後一個出現class="small"的按鈕元素。

$('li:first-child') 選取頁面中所有<li>列表的第一項元素。

$('a:only-child') 選取頁面中所有<a>元素，但這些元素只能位於一個父級元素內。比如<li><a href="url">An url</a></li>，此時<li>內的<a>是匹配的。

$(‘li:nth-child(2)’) 選取父級元素中第二個<li>元素。<li>也一家要位於一個父級元素內。比如<ul>
<li>1</li>
<li>2</li>
</ul>

此時<li>2</li>是匹配的。

$('tr:nth-child(odd)') 選取表格中所有為奇數的行元素。

$(‘li:nth-child(3n)’) 在父級元素中有很多個<li>元素，但只選取隔3次出現的<li>元素。比如

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

其中<li>3</li>,<li>6</li>匹配。

$('li:nth-child(3n+5)') 帶有位移量的選取。在父級元素中只選取從第5個<li>元素開始每隔3次出現的<li>元素。比如

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

其中<li>5</li>,<li>8</li>匹配。

$(‘.someClass:eq(1)’) 選取頁面中class="someClass"的第二個元素。jQuery以0為基準，因此(1)表示相當於第2個。

$(‘.someClass:gt(1)’) 選取頁面中所有class="someClass"的元素，除了開頭兩個。

$(‘.someClass:lt(4)’) 只選取頁面中所有class="someClass"元素中最先的4個元素。

自訂選取器
jQuery提供這類的選取器用於在並不期望有CSS明確規定時，對元素進行方便快捷地選取。自訂選取器有可能會被組合起來，來看一看這些強大的選取器執行個體。

$('img:animated') 選取所有剛剛經曆完動畫方法調用的<img>元素。

$(':button:hidden') 選取所有被hide()方法隱含的按鈕類型元素。

$('input[name=myRadioGroup]:radio:checked') 選取name="myRadioGroup"的單選框內被選中的項目。

$(':text:disabled') 選取所有被禁用的文字框元素。

$('#xyz :header') 選取id="xyz"元素內的所有<h>元素。

$('option:not(:selected)') 選取沒有被選中的所有的<option>元素。

$('#myForm button:not(.someClass)') 選取id="myForm"的表單內不具有class="someClass"屬性的所有按鈕。

$('select[name=choices] :selected') 選取name="choices"的<select>元素中所有被選中的<option>項。

$('p:contains(coffee)') 選取所有內容包含有coffee的<p>元素。

謝謝分享~~http://hi.baidu.com/xcaozhao1986/item/490f3fdea78edae5b2f777f8