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

毛三十發表於2017-05-16

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

相關文章