基礎 新手任務,五分鐘全面掌握JQuery選擇器

2022-11-24 21:02:09 字數 2401 閱讀 1601

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.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.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)")

//選中所有包含文字ok的div元素

$("div:contains(ok)")

//選中所有為空的div元素

$("div:empty")

//選中所有包含class為red的div元素

$("div:has(.red)")

//選中所有不為空的div元素

$("div:parent")

//選中所有不可見的div元素

$("div:hidden")

//選中所有可見的div元素

$("div:visible")

//選中所有包含屬性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]")

//選中所有是第二個子結點的div元素

$("div:nth-child(2)")

//選中所有是第一個子結點的div元素

$("div:first-child")

//選中所有是最後一個子結點的div元素

$("div:last-child")

//選中所有是唯一子結點的div元素

$("div:only-child")

//選中表單內可用input

$("#form1 input:enabled")

//選中表單內不可用input

$("#form1 input:disabled")

//選中表單內所有選中的元素

$("#form1 input:checked")

//選中下拉選單中選中的元素

$("select > option:selected")