分類(lèi)

1.基本選擇器

a.標(biāo)簽選擇器（元素選擇器）

• 語(yǔ)法：$("html標(biāo)簽名") 獲得所有匹配標(biāo)簽名稱(chēng)的元素

b.id選擇器

• 語(yǔ)法：$("#id的屬性值") 獲得與指定id屬性值匹配的元素

c.類(lèi)選擇器

• 語(yǔ)法：$(".class的屬性值") 獲得與指定class屬性值匹配的元素

d.并集選擇器

• 語(yǔ)法：$("選擇器1,選擇器2....") 獲得多個(gè)選擇器選中的所有元素

2.層級(jí)選擇器

a.后代選擇器

• 語(yǔ)法：$("A B") 選擇A元素內(nèi)部的所有B元素

b.子選擇器

• 語(yǔ)法：$("A > B") 選擇A元素內(nèi)部的所有B子元素

3.屬性選擇器

a.屬性名稱(chēng)選擇器

• 語(yǔ)法：$("A[屬性名]") 包含指定屬性的選擇器

b.屬性選擇器

• 語(yǔ)法：$("A[屬性名='值']") 包含指定屬性等于指定值的選擇器

c.符合屬性選擇器

• 語(yǔ)法：$("A[屬性名='值'][]...") 包含多個(gè)屬性條件的選擇器

$("div[title]").css("backgroundColor","pink");                //選中含有title屬性的div
$("div[title='test']").css("backgroundColor","pink");      //選中屬性title值為test的div  
$("div[title!='test']").css("backgroundColor","pink");      //選中屬性title值不等于test的div元素（沒(méi)有屬性title的也將被選中）
$("div[title^='te']").css("backgroundColor","pink");        //選中屬性title值以te開(kāi)頭的div
$("div[title$='st']").css("backgroundColor","pink");       // 選中屬性title值以st結(jié)束的div
$("div[title*='es']").css("backgroundColor","pink");      //選中屬性title值含有es的div
$("div[id][title*='es']").css("backgroundColor","pink");  //選區(qū)有屬性id的div元素，然后在結(jié)果中選取屬性title值含有es的div元素

4.過(guò)濾選擇器

a.首元素選擇器

• 語(yǔ)法：:first 獲得選擇的元素中的第一個(gè)元素

b.尾元素選擇器

• 語(yǔ)法：:last 獲得選擇的元素中的最后一個(gè)元素

c.非元素選擇器

• 語(yǔ)法：:not(selector) 不包括指定內(nèi)容的元素

d.偶數(shù)選擇器

• 語(yǔ)法：:even 偶數(shù)，從0開(kāi)始計(jì)數(shù)

e.奇數(shù)選擇器

• 語(yǔ)法：:odd 奇數(shù)，從0開(kāi)始計(jì)數(shù)

f.等于索引選擇器

• 語(yǔ)法：:eq(index) 指定索引元素

g.大于索引選擇器

• 語(yǔ)法：:gt(index) 大于指定索引元素

h.小于索引選擇器

• 語(yǔ)法：:lt(index) 小于指定索引元素

i.標(biāo)題選擇器

• 語(yǔ)法：:header 獲得標(biāo)題元素，固定寫(xiě)法

$("div:first").css("backgroundColor","pink");    //選取第一個(gè)div
$("div:last").css("backgroundColor","pink");    //選取最后一個(gè)div
$("div:not(.one)").css("backgroundColor","pink");    //選取class不為one的所有div
$("div:first").css("backgroundColor","pink");    //選取第一個(gè)div
$("div:even").css("backgroundColor","pink");    //選取索引值為偶數(shù)的div
$("div:odd").css("backgroundColor","pink");    //選取索引值為奇數(shù)的div
$("div:gt(3)").css("backgroundColor","pink");    //選取索引值大于3的div
$("div:eq(e)").css("backgroundColor","pink");    //選取索引值等于3的div
$("div:lt(3)").css("backgroundColor","pink");    //選取索引值小于3的div
$("header").css("backgroundColor","pink");    //選取所有的標(biāo)題元素

5.表單過(guò)濾選擇器

a.可用元素選擇器

• 語(yǔ)法：:enabled 獲得可用元素

b.不可用元素選擇器

• 語(yǔ)法：:disabled 獲得不可用元素

c.選中選擇器

• 語(yǔ)法：:checked 獲得單選/復(fù)選框選中的元素

d.選中選擇器

• 語(yǔ)法：:selected 獲得下拉框選中的元素

$("input[type='text']:enabled").val("aaa");    // 改變可用input的值為aaa
$("input[type='text']:disabled").val("aaa");     // 改變不可用input的值為aaa
$("input[type='checkbox']:checked").length;  //獲取復(fù)選框選中的個(gè)數(shù)
$("#job > option:selected").length;                // 獲取下拉框選中的個(gè)數(shù)

如有錯(cuò)誤或建議歡迎大家指出與評(píng)論哈，希望這篇博文能幫助到大家，大家也可以分享給需要的人。

如需轉(zhuǎn)載，請(qǐng)注明出處。http://www.itdecent.cn/p/89ff743653f7