jQuery選擇器

jQuery選擇器

jQuery選擇器徹底繼承了CSS風格。利用jQuery選擇器能夠很是便捷和快速地找出特定的DOM元素，而後爲他們添加相應的行爲，而無需擔憂瀏覽器是否支持這一選擇器。

jQuery選擇器優點：一、簡潔地寫法  二、支持CSS1到CSS3   三、完善的處理機制

經常使用的基本選擇器：

#id     $("#test")

.classname      $(".test")

元素名      $("p")

*：匹配全部元素   $("*")

$("div,p")

經常使用的層次選擇器：

ancestor descendant：選取ancestor裏全部descendant元素  $("div span")

parent>child:獲取parent元素下的child元素  $("div>span")

prev+next:選取緊接在prev元素後的next元素  $(".one+div")  只有一個

prev~siblings:選取prev元素以後全部siblings元素

經常使用的基本過濾選擇器：

:first 選取第一個元素

:last 選取最後一個元素

:not(selector) 去除全部與給定選擇器匹配的元素   例：$("input:not(.myclass)")

:even 選取索引值爲偶數的全部元素，從0開始計數   例：$("div:even")

:odd  選取索引值爲奇數的全部元素，從0開始計數

:eq(index) 匹配一個給定索引值元素，從0開始   例：$('div:eq(1)')

:gt(index)  匹配大於給定索引值元素，從0開始

:lt(index)  匹配小於給定索引值元素，從0開始

:header  選擇h1,h2,h3一類的標籤

:animated 匹配正在執行動畫效果的元素

經常使用的內容過濾選擇器

:contains(text)  匹配包含給定文本的元素

:empty  匹配全部不包含子元素或者文本的空元素

:has(selector) 匹配含有選擇器所匹配元素的元素

:parent  選取含有子元素或者文本的元素

經常使用的可見性過濾選擇器

:hidden 選取全部不可見的元素

:visible 選取全部可見的元素

經常使用的屬性過濾選擇器

[attribute] 選取擁有此屬性的元素  例 $("input[name]")

[attribute=value] 選取屬性值等於value的元素 例 $("input[type='text']")

[attribute!=value]

[attribute^=value] 屬性值以value開始的元素

[attribute$=value] 選取屬性值以value結束的元素

[attribute*=value]選取屬性值包含value的元素 例 $("input[name*='o']")

[attribute~=value]選取屬性值包含value且以空格隔開的元素例 $("input[name~='tong']")

[attribute1][attribute2]...多個屬性選擇器合併成一個複合屬性選擇器

例 $("input[type^='b'][name~='hai']")

經常使用的子元素過濾選擇器

:first-child  $('div span:first-child')   div下第一個子元素爲span的

:first-of-type 選取同名兄妹節點的第一個子元素的全部元素

:last-child

:last-of-type 選取同名兄妹節點的最後一個子元素的全部元素

:only-child 選取父元素中具備惟一的子元素的全部元素

:only-of-type 選取先後沒有同名兄妹節點的子元素的全部元素

:nth-child(index/even/odd)選取每一個父元素下的第index個子元素或者奇偶元素（index從1開始）

:nth-last-child(index/even/odd)選取每一個父元素下的第index個子元素，從最後一個往第一個數（index從1開始）

經常使用的表單選擇器

:input 選取全部<input>、<textarea>、<select>和<button>元素

:text 選取全部單行文本框

:password  選取全部密碼框

:radio 選取全部單選按鈕

:checkbox 選取全部複選框

:submit 選取全部提交按鈕

:image 圖像按鈕

:reset 重置按鈕

:button  選取全部按鈕

:file選取全部上傳域

表單對象屬性過濾選擇器

:disabled

:enable

:checked

:selected

選擇器中含有空格的注意事項

var $t1=$(.test :hidden)

var $t2=$(.test:hidden)

二者的區別是：

第一種寫法表明選取class爲「test"的元素內全部隱藏元素

第二種寫法表明選取隱藏的class爲‘test’的元素