jquery選擇器

1.基本選擇器

　　　基本選擇器是jquery中經常使用的，也是最簡單的。它經過元素id、class和標籤名等來查找DOM元素。在網頁中，每一個id名稱只能使用一次，class容許使用屢次。

　　　#id：根據給定的id匹配一個元素 例如：$('#test') 選取id爲test的元素。

　　　.class：根據給定的類名匹配元素 例如:$('.test') 選取全部class爲test的元素。

　　　element：根據給定的元素名匹配元素  例如：$('p') 選取全部的<p>元素。

　　　*：匹配全部的元素 例如：$('*') 選取全部的元素

 　　 selector1,selector2,...：將每個選擇器匹配到的元素湊合並後一塊兒返回 例如：$('div,span,p.myClass')選取全部的<div>,<span>,和擁有class爲myClass的                                                                                                               <p>標籤的一組元素。

 

2.層次選擇器

　　　若是想經過DOM之間的層次關係來獲取特定元素，例如後代元素、子元素、相鄰元素和兄弟元素等，那麼層次選擇器是一個很是好的選擇。

　　　$("ancstor descendant") 選取ancstor 元素裏的全部descendant（後代）元素 例如：$("div span") 選取<div>裏的全部<span>元素。

　　　$("parent>child") 選取parent元素下面的child（子）元素，與$("ancstor descendant")有區別 例如：$("div>span") 選取<div>元素下元素名爲<span>的                                                                                                                                             子元素。

　　　$('prev+next') 選取緊接在prev元素後的next元素 例如：$('.one+div')選取class爲one的下一個<div>元素。

　　　$('prev~siblings') 選取prev元素以後的全部siblings元素 例如：$('#two~div') 選取id爲two的元素後面的全部<div>兄弟元素。

 

3.過濾選擇器

　　　過濾選擇器主要是經過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS中的僞類選擇器語法相同，即選擇器以一個冒號開頭。按照不一樣的過濾規則，過濾選擇器能夠分爲基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾和表單對象屬性過濾選擇器。

　　　1）基本過濾選擇器

　　　:first  選取第一個元素 例如：$("div:first") 選取全部<div>元素中第一個<div>元素

　　　:last　選取最後一個元素 例如: $("div:last") 選取全部<div>元素中最後一個<div>元素

　　　:not(selector)  去除全部與給定選擇器匹配的元素 例如：$("input:not(.myClass)")選取class不是myClass的<input>元素

　　　:even  選取索引是偶數的全部元素，索引從0開始 例如：$("input:even")選取索引是偶數的<input>元素

　　　:odd  選取索引是奇數的全部元素，索引從0開始 例如：$("input:odd")選取索引是奇數的<input>元素

　　　:eq(index)  選取索引等於index的元素（index從0開始） 例如：$("input:eq(1)")選取索引等於1的<input>元素

　　　:gt(index)  選取索引大於index的元素（index從0開始） 例如：$("input:gt(1)")選取索引大於1的<input>元素

　　　:lt(index)  選取索引小於index的元素（index從0開始） 例如：$("input:lt(1)")選取索引小於1的<input>元素

　　　:header  選取全部的標題元素，例如h1，h2，h3等等 例如：$(":header") 獲取網頁中全部的<h1>,<h2>，<h3>...

　　　:aniimated 選取當前正在執行動畫的全部元素 例如：$("div:animated") 選取正在執行動畫的<div>元素

 

　　　2）內容過濾選擇器

　　　內容過濾選擇器的過濾規則主要體如今它所包含的子元素或文本內容上。

　　　:contains(text)  選取含有文本"test"的元素 例如：$("div:contains('我')")選取含有文本「我」的<div>元素

　　　:empty  選取不包含子元素或者文本的空元素 例如：$("div:empty")選取不包含子元素或文本元素的<div>空元素

　　　:has(selector)   選取含有選擇器所匹配的元素的元素 例如：$("div:has(p)")選取含有<p>元素的<div>元素

　　　:parent  選取含有子元素或者文本的元素 例如：$("div:parent")選取擁有子元素或文本元素的<div>元素

 

　　　3）可見性過濾選擇器

　　　可見性過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素。

　　　:hidden  選取全部不可見的元素 例如：$(":hidden") 選取全部不可見的元素。包括<input type="hidden">、<div style="display:none">和<div                                                               style="visibility:hidden">等元素。若是隻想選取<input>元素，可以使用$("input:hidden")

　　　:visible  選取全部可見的元素 例如：$("div:visible")選取全部可見的<div>元素

 

　　　4）屬性過濾選擇器

　　　屬性過濾選擇器的過濾規則是經過元素的屬性來獲取相應的元素。

　　　[attribute]  選取擁有此屬性的元素 例如：$("div[id]")選取擁有屬性id的元素

　　　[attribute=value]  選取屬性值爲value的元素 例如：$("div[title=test]")選取屬性title爲"test"的<div>元素

　　　[attribute!=value]  選取屬性值不等於value的元素 例如：$("div[title!=test]")選取屬性title不等於"test"的<div>元素（注意：沒有屬性title的<div>元素也會被選取）

　　　[attribute^=value]  選取屬性值以value開始的元素 例如：$("div[title^=test]")選取屬性title以"test"開始的<div>元素

　　　[attribute$=value]  選取屬性值以value結束的元素 例如：$("div[title$=test]")選取屬性title以"test"結束的<div>元素

　　　[attribute*=value]  選取屬性值含有value的元素 例如：$("div[title*=test]")選取屬性title含有"test"的<div>元素

　　　[selector1][selector2][selectorN]  用屬性選擇器合併成一個複合屬性選擇器，知足多個條件。每選擇一次，縮小範圍一次

                                                        例如：$("div[id][title$='test']")選取擁有屬性id，而且屬性title以"test"結束的<div>標籤

 

　　　5）子元素過濾選擇器

　　　子元素過濾選擇器的過濾規則相對於其餘的選擇器稍微有些複雜，不過不要緊，只要將元素的父元素和子元素區分清楚，使用起來也很是簡單。另外還要注意它與普通的過濾選擇器的區別。

　　　:nth-child(index/even/odd/eauation)  選取每一個父元素下的第index個子元素或者奇偶元素(index從1算起) 例如：:eq(index)只匹配一個元素，而:nth-child將爲每個父元素配子元素，而且:nth-child(index)的index是從1開始的，而:eq(index)是從0開始的

　　　:first-child  選取每一個父元素的第一個子元素 例如：:first只返回單個元素，而:first-child選擇符將爲每一個父元素匹配第一個子元素。

                                                                 $("ul li:first-child") 選取每一個<ul> 中第一個<li>元素

　　　:last-child  選取每一個父元素的最後一個子元素 例如：:last只返回單個元素，而:last-child選擇符將爲每一個父元素匹配最後一個子元素。

                                                                 $("ul last-child") 選取每一個<ul> 中最後一個<li>元素

　　　:only-child  若是某個元素是它父元素中惟一的子元素，那麼將會被匹配。若是父元素中含有其餘元素，則不會被匹配  例如：$("ul li:only-child")在<ul>中選取                                                                                                                                                             是惟一子元素的<li>元素

　　　:nth-child()選擇器是很經常使用的子元素過濾選擇器：

　　　:nth-child(even)能選取每一個父元素下的索引是偶數的元素。

　　　:nth-child(odd)能選取每一個父元素下的索引是奇數的元素。

　　　:nth-child(2)能選取每一個父元素下的索引值等於2的元素。

　　　:nth-child(3n)能選取每一個父元素下的索引值是3的倍數的元素，n從0開始。

　　　:nth-child(3n+1)能選取每一個父元素下的索引值是(3n+1)的元素，n從0開始。

 

　　　6）表單對象屬性過濾選擇器

　　　此選擇器主要是對所選擇的表單元素進行過濾，例如選擇被選中的下拉框，多選框等等。

　　　:enabled  選取全部可用的元素 例如：$("#form1 :enabled")選取id爲"form"的表單內的全部可用元素

　　　:disabled  選取全部不可用的元素 例如：$("#form1 :disabled  ")選取id爲"form"的表單內的全部不可用元素  

　　　:checked  選取全部被選中的元素(單選框，複選框) 例如：$("input:checked")選取全部被選中的<input>元素

　　　:selected  選取全部被選中的選項元素（下拉列表） 例如：$("select :selected")選取全部被選中的選項元素

 

4.表單選擇器

　　　爲了使用戶可以更加靈活地操縱表單，jQuery中專門加入了表單選擇器。利用這個選擇器，能極其方便地獲取到表單的某個或某類型的元素。

　　　:input 選取全部的<input>、<textarea>、<select>和<button>元素 例如:$("":input)選取全部的<input>、<textarea>、<select>和<button>元素

　　　:text  選取全部的單行文本框 例如：$(":text")選取全部的單行文本框

　　　:password 選取全部的密碼框 例如：$(":password")選取全部的密碼框

　　　:radio  選取全部的單選框 例如：$(":radio")選取全部的單選框

　　　:submit  選取全部的提交按鈕 例如：$(":submit")選取全部的提交按鈕

　　　:image  選取全部的圖像按鈕 例如：$(":image")選取全部的圖像按鈕

　　　:reset  選取全部的重置按鈕 例如：$(":reset")選取全部的重置按鈕

　　　:button  選取全部的按鈕 例如：$(":button")選取全部的按鈕

　　　:file  選取全部的上傳域 例如：$(":file") 選取全部的上傳域

　　　:hidden  選取全部不可見元素 例如：$(":hidden")選取全部不可見元素