【基礎(chǔ)】新手任務(wù)，五分鐘全面掌握J(rèn)Query選擇器

weij 發(fā)布于2019-08-20 16:37 / 2504人閱讀

摘要：基本選擇器選擇器選中為的元素，速度最快類選擇器選中屬性為的所有元素元素選擇器選中所有元素通配符選擇器選中所有元素復(fù)合選擇器選中所有元素和所有為的元素層次選擇器選擇器選擇器選中內(nèi)的所有元素選擇器選擇器選中內(nèi)的所有直接元素，不查找間接元素選擇器

1. 基本選擇器 1.1 ID選擇器：

//選中id為myDiv的元素，速度最快
$("#myDiv")

1.2 類選擇器：

//選中class屬性為red的所有元素
$(".red")

1.3 元素選擇器：

//選中所有div元素
$("div")

1.4 通配符選擇器：

//選中所有元素
$("*")

1.5 復(fù)合選擇器：

//選中所有span元素和所有id為myDiv的元素
$("span,#myDiv")

2. 層次選擇器 2.1 選擇器1 選擇器2：

//選中body內(nèi)的所有div元素
$("body div")

2.2 選擇器1 > 選擇器2：

//選中body內(nèi)的所有直接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 偶數(shù)選擇器

//選中索引值為偶數(shù)的div元素
$("div:even")

3.5 奇數(shù)選擇器

//選中索引值為奇數(shù)的div元素
$("div:odd")

3.6 索引值選擇器

//選中索引值為2的div元素
$("div:eq(2)")
//選中索引值大于2的div元素
$("div:gt(2)")
//選中索引值小于2的div元素
$("div:lt(2)")

4. 內(nèi)容過濾選擇器

//選中所有包含文本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. 子元素過濾選擇器

//選中所有是第二個子結(jié)點的div元素
$("div:nth-child(2)")
//選中所有是第一個子結(jié)點的div元素
$("div:first-child")
//選中所有是最后一個子結(jié)點的div元素
$("div:last-child")
//選中所有是唯一子結(jié)點的div元素
$("div:only-child")

8. 表單屬性過濾選擇器

//選中表單內(nèi)可用input
$("#form1 input:enabled")
//選中表單內(nèi)不可用input
$("#form1 input:disabled")
//選中表單內(nèi)所有選中的元素
$("#form1 input:checked")
//選中下拉列表中選中的元素
$("select > option:selected")