1. 基本選擇器
1.1 ID選擇器:
//選中id為myDiv的元素,速度最快
$("#myDiv")
1.2 類選擇器:
//選中class屬性為red的所有元素
$(".red")
1.3 元素選擇器:
//選中所有div元素
$("div")
1.4 萬用字元選擇器:
//選中所有元素
$("*")
1.5 複合選擇器:
//選中所有span元素和所有id為myDiv的元素
$("span,#myDiv")
2. 層次選擇器
2.1 選擇器1 選擇器2:
//選中body內的所有div元素
$("body div")
2.2 選擇器1 > 選擇器2:
//選中body內的所有直接div元素,不查詢間接元素
$("body > div")
2.3 選擇器1 + 選擇器2:
//選中所有class為red的下一個div元素
$(".red + div")
2.4 選擇器1 ~ 選擇器2:
//選中id為myDiv後面的所有div兄弟元素
$("#myDiv ~ div")
3. 基本過濾選擇器
3.1 第一個元素選擇器
//選中第一個div元素
$("div:first")
3.2 最後一個元素選擇器
//選中最後一個div元素
$("div:last")
3.3 排除選擇器
//選中class不為red的所有div元素
$("div:not(.red)")
3.4 偶數選擇器
//選中索引值為偶數的div元素
$("div:even")
3.5 奇數選擇器
//選中索引值為奇數的div元素
$("div:odd")
3.6 索引值選擇器
//選中索引值為2的div元素
$("div:eq(2)")
//選中索引值大於2的div元素
$("div:gt(2)")
//選中索引值小於2的div元素
$("div:lt(2)")
4. 內容過濾選擇器
//選中所有包含文字ok的div元素
$("div:contains(ok)")
//選中所有為空的div元素
$("div:empty")
//選中所有包含class為red的div元素
$("div:has(.red)")
//選中所有不為空的div元素
$("div:parent")
5. 可見性過濾選擇器
//選中所有不可見的div元素
$("div:hidden")
//選中所有可見的div元素
$("div:visible")
6. 屬性過濾選擇器
//選中所有包含屬性title的div元素
$("div[title]")
//選中所有屬性title等於ok的div元素
$("div[title=ok]")
//選中所有屬性title不等於ok的div元素
$("div[title!=ok]")
//選中所有屬性title值以ok開頭的div元素
$("div[title^=ok]")
//選中所有屬性title值含有ok的div元素
$("div[title*=ok]")
//選中所有包含屬性id,並且屬性title值以ok開頭的div元素
$("div[id][title^=ok]")
7. 子元素過濾選擇器
//選中所有是第二個子結點的div元素
$("div:nth-child(2)")
//選中所有是第一個子結點的div元素
$("div:first-child")
//選中所有是最後一個子結點的div元素
$("div:last-child")
//選中所有是唯一子結點的div元素
$("div:only-child")
8. 表單屬性過濾選擇器
//選中表單內可用input
$("#form1 input:enabled")
//選中表單內不可用input
$("#form1 input:disabled")
//選中表單內所有選中的元素
$("#form1 input:checked")
//選中下拉選單中選中的元素
$("select > option:selected")