1. 基礎(chǔ)選擇器 Basics
| 名稱 |
說明 |
舉例 |
| #id |
根據(jù)元素Id選擇 |
$("divId") 選擇ID為divId的元素 |
| element |
根據(jù)元素的名稱選擇, |
$("a") 選擇所有<a>元素 |
| .class |
根據(jù)元素的css類選擇 |
$(".bgRed") 選擇所用CSS類為bgRed的元素 |
| * |
選擇所有元素 |
$("*")選擇頁面所有元素 |
selector1,
selector2,
selectorN |
可以將幾個(gè)選擇器用","分隔開然后再拼成一個(gè)選擇器字符串.會同時(shí)選中這幾個(gè)選擇器匹配的內(nèi)容. |
$("#divId, a, .bgRed") |
2.層次選擇器 Hierarchy
| 名稱 |
說明 |
舉例 |
| ancestor descendant |
使用"form input"的形式選中form中的所有input元素.即ancestor(祖先)為from, descendant(子孫)為input. |
$(".bgRed div") 選擇CSS類為bgRed的元素中的所有<div>元素. |
| parent > child |
選擇parent的直接子節(jié)點(diǎn)child. child必須包含在parent中并且父類是parent元素. |
$(".myList>li") 選擇CSS類為myList元素中的直接子節(jié)點(diǎn)<li>對象. |
| prev + next |
prev和next是兩個(gè)同級別的元素. 選中在prev元素后面的next元素. |
$("#hibiscus+img")選在id為hibiscus元素后面的img對象. |
| prev ~ siblings |
選擇prev后面的根據(jù)siblings過濾的元素
注:siblings是過濾器 |
$("#someDiv~[title]")選擇id為someDiv的對象后面所有帶有title屬性的元素 |
3.基本過濾器 Basic Filters
| 名稱 |
說明 |
舉例 |
| :first |
匹配找到的第一個(gè)元素 |
查找表格的第一行:$("tr:first") |
| :last |
匹配找到的最后一個(gè)元素 |
查找表格的最后一行:$("tr:last") |
| :not(selector) |
去除所有與給定選擇器匹配的元素 |
查找所有未選中的 input 元素: $("input:not(:checked)") |
| :even |
匹配所有索引值為偶數(shù)的元素,，從 0 開始計(jì)數(shù) |
查找表格的1、3,、5...行:$("tr:even") |
| :odd |
匹配所有索引值為奇數(shù)的元素,，從 0 開始計(jì)數(shù) |
查找表格的2、4,、6行:$("tr:odd") |
| :eq(index) |
匹配一個(gè)給定索引值的元素
注:index從 0 開始計(jì)數(shù) |
查找第二行:$("tr:eq(1)") |
| :gt(index) |
匹配所有大于給定索引值的元素
注:index從 0 開始計(jì)數(shù) |
查找第二第三行,，即索引值是1和2，也就是比0大:$("tr:gt(0)") |
| :lt(index) |
選擇結(jié)果集中索引小于 N 的 elements
注:index從 0 開始計(jì)數(shù) |
查找第一第二行,，即索引值是0和1,，也就是比2小:$("tr:lt(2)") |
| :header |
選擇所有h1,h2,h3一類的header標(biāo)簽. |
給頁面內(nèi)所有標(biāo)題加上背景色: $(":header").css("background", "#EEE"); |
| :animated |
匹配所有正在執(zhí)行動畫效果的元素 |
只有對不在執(zhí)行動畫效果的元素執(zhí)行一個(gè)動畫特效:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});
|
4. 內(nèi)容過濾器 Content Filters
| 名稱 |
說明 |
舉例 |
| :contains(text) |
匹配包含給定文本的元素 |
查找所有包含 "John" 的 div 元素:$("div:contains('John')") |
| :empty |
匹配所有不包含子元素或者文本的空元素 |
查找所有不包含子元素或者文本的空元素:$("td:empty") |
| :has(selector) |
匹配含有選擇器所匹配的元素的元素 |
給所有包含 p 元素的 div 元素添加一個(gè) text 類: $("div:has(p)").addClass("test"); |
| :parent |
匹配含有子元素或者文本的元素 |
查找所有含有子元素或者文本的 td 元素:$("td:parent") |
5.可見性過濾器 Visibility Filters
| 名稱 |
說明 |
舉例 |
|
:hidden
|
匹配所有的不可見元素
注:在1.3.2版本中, hidden匹配自身或者父類在文檔中不占用空間的元素.如果使用CSS visibility屬性讓其不顯示但是占位,則不輸入hidden.
|
查找所有不可見的 tr 元素:$("tr:hidden") |
| :visible |
匹配所有的可見元素 |
查找所有可見的 tr 元素:$("tr:visible") |
6.屬性過濾器 Attribute Filters
7.子元素過濾器 Child Filters
| 名稱 |
說明 |
舉例 |
| :nth-child(index/even/odd/equation) |
匹配其父元素下的第N個(gè)子或奇偶元素
':eq(index)' 只匹配一個(gè)元素，而這個(gè)將為每一個(gè)父元素匹配子元素,。:nth-child從1開始的,，而:eq()是從0算起的！
可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
|
在每個(gè) ul 查找第 2 個(gè)li:
$("ul li:nth-child(2)") |
| :first-child |
匹配第一個(gè)子元素
':first' 只匹配一個(gè)元素,，而此選擇符將為每個(gè)父元素匹配一個(gè)子元素
|
在每個(gè) ul 中查找第一個(gè) li:
$("ul li:first-child") |
| :last-child |
匹配最后一個(gè)子元素
':last'只匹配一個(gè)元素,，而此選擇符將為每個(gè)父元素匹配一個(gè)子元素
|
在每個(gè) ul 中查找最后一個(gè) li:
$("ul li:last-child") |
| :only-child |
如果某個(gè)元素是父元素中唯一的子元素，那將會被匹配
如果父元素中含有其他元素,，那將不會被匹配,。
|
在 ul 中查找是唯一子元素的 li:
$("ul li:only-child") |
8.表單選擇器 Forms
| 名稱 |
說明 |
解釋 |
| :input |
匹配所有 input, textarea, select 和 button 元素 |
查找所有的input元素:
$(":input") |
| :text |
匹配所有的文本框 |
查找所有文本框:
$(":text") |
| :password |
匹配所有密碼框 |
查找所有密碼框:
$(":password") |
| :radio |
匹配所有單選按鈕 |
查找所有單選按鈕 |
| :checkbox |
匹配所有復(fù)選框 |
查找所有復(fù)選框:
$(":checkbox") |
| :submit |
匹配所有提交按鈕 |
查找所有提交按鈕:
$(":submit") |
| :image |
匹配所有圖像域
|
匹配所有圖像域:
$(":image") |
| :reset |
匹配所有重置按鈕 |
查找所有重置按鈕:
$(":reset") |
| :button |
匹配所有按鈕 |
查找所有按鈕:
$(":button") |
| :file |
匹配所有文件域 |
查找所有文件域:
$(":file") |
9.表單過濾器 Form Filters
| 名稱 |
說明 |
解釋 |
| :enabled |
匹配所有可用元素
|
查找所有可用的input元素:
$("input:enabled") |
| :disabled |
匹配所有不可用元素 |
查找所有不可用的input元素:
$("input:disabled") |
| :checked |
匹配所有選中的被選中元素(復(fù)選框、單選框等,，不包括select中的option) |
查找所有選中的復(fù)選框元素:
$("input:checked") |
| :selected |
匹配所有選中的option元素 |
查找所有選中的選項(xiàng)元素:
$("select option:selected") |
以jQuery(v1.3.2)為基礎(chǔ)from：http://bbs./showtopic-89.aspx
1).基本
·#id 根據(jù)給定的ID匹配一個(gè)元素,。例如：$("#id")
·element 根據(jù)給定的元素名匹配所有元素。例如：$("div")
·.class 根據(jù)給定的類匹配元素,。例如：$(".style1");
·* 匹配所有元素,。例如：$("*")
·selector1,selector2,selectorN 將每一個(gè)選擇器匹配到的元素合并后一起返回。例如：$("#id,div,.style1")
2).表單
·:button 匹配所有按鈕,。例如：$(":button")
·:checkbox 匹配所有復(fù)選框,。例如：$(":checkbox")
·:file 匹配所有文件域。例如：$(":file")
·:hidden 匹配所有不可見元素，或者type為hidden的元素,。例如：$("input:hidden")
·:image 匹配所有圖像域,。例如：$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如：$(":input")
·:password 匹配所有密碼框,。例如：$(":password")
·:radio 匹配所有單選按鈕,。例如：$(":radio")
·:reset 匹配所有重置按鈕。例如：$(":reset")
·:submit 匹配所有提交按鈕,。例如：$(":submit")
·:text 匹配所有的單行文本框,。例如：$(":text")
·:header 匹配如 h1, h2, h3之類的標(biāo)題元素。例如：$(":header").css("background", "#EEE");
2.篩選條件
1).屬性篩選
·[attribute*=value] 匹配給定的屬性是以包含某些值的元素,。例如：$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的屬性,，但屬性不等于特定值的元素。例如：$(input[name!='man');
·[attribute$=value] 匹配給定的屬性是以某些值結(jié)尾的元素,。例如：$("input[name$='man']")
·[attribute=value] 匹配給定的屬性是某個(gè)特定值的元素,。例如：$("input[name='man']");
·[attribute] 匹配包含給定屬性的元素,。例如：$("div[id]")
·[attribute^=value] 匹配給定的屬性是以某些值開始的元素,。例如：$("input[name^='man']")
·[selector1][selector2][selectorN] 同時(shí)滿足多個(gè)條件。例如：$("input[id][name$='man']")
·:hidden 匹配所有的不可見元素,。例如：$("tr:hidden")
·:visible 匹配所有的可見元素,。例如：$("tr:visible")
·:checked 匹配所有選中的被選中元素(復(fù)選框、單選框等,，不包括select中的option),。例如：$("input:checked")
·:disabled 匹配所有不可用元素。例如：$("input:disabled")
·:enabled 匹配所有可用元素,。例如：$("input:enabled")
·:selected 匹配所有選中的option元素,。例如：$("select option:selected")
2).內(nèi)容篩選
·:contains(text) 匹配包含給定文本的元素。例如：$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素,。例如：$("td:empty")
·:has(selector) 匹配含有選擇器所匹配的元素的元素,。例如：$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如：$("td:parent")
3).層級篩選
·ancestor descendant 在給定的祖先元素下匹配所有的后代元素,。例如：$("form input")
·parent > child 在給定的父元素下匹配所有的子元素,。例如：$("form > input")
·prev + next 匹配所有緊接在 prev 元素后的 next 元素。例如：$("label + input")
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素,。例如：$("form ~ input")
·:first-child 匹配第一個(gè)子元素,。例如：$("ul li:first-child")
·:last-child 匹配最后一個(gè)子元素。例如：$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個(gè)子或奇偶元素,。例如：$("ul li:nth-child(2)")
·:only-child 如果某個(gè)元素是父元素中唯一的子元素,，那將會被匹配。例如：$("ul li:only-child")
4).方法篩選
·:animated 匹配所有正在執(zhí)行動畫效果的元素,。例如：$("div:animated");
·:eq(index) 匹配一個(gè)給定索引值的元素,。例如：$("tr:eq(1)")
·:even 匹配所有索引值為偶數(shù)的元素,，從 0 開始計(jì)數(shù)。例如：$("tr:even")
·:first 匹配找到的第一個(gè)元素,。例如：$("tr:first")
·:gt(index) 匹配所有大于給定索引值的元素,，從 0 開始計(jì)數(shù)。例如：$("tr:gt(0)")
·:last 匹配找到的最后一個(gè)元素,。例如：$("tr:last")
·:lt(index) 匹配所有小于給定索引值的元素,。例如：$("tr:lt(2)")
·:not(selector) 去除所有與給定選擇器匹配的元素。例如：$("input:not(:checked)")
·:odd 匹配所有索引值為奇數(shù)的元素,，從 0 開始計(jì)數(shù),。例如：$("tr:odd")
|
