jQuery 選擇器

1.基本選擇器

$("*")        // 所有元素選擇器把沼,包括 HTML甚颂、head 和 body。
$("#id")      // ID選擇器埃跷,id 屬性在文檔內(nèi)必須是唯一的。
$("div")      // 元素選擇器憔杨,選擇所有的 div 元素旨巷。
$(".classname")    // 類(lèi)選擇器强缘,class 屬性用于為多個(gè) HTML 元素設(shè)置特定樣式。

2.層級(jí)選擇器

$(".class1 .class2")     // class 為 "class1"下所有 class 為 "class2"的元素察皇,不限于直接子元素捧毛。
$(".class1,.class2")     // class 為 "class1" 或者 "class2" 的元素。
$(".class1>.class2")     // 選擇所有直接父級(jí)是 class1 元素的 class2 的元素让网。
$(".class1+.class2")     // 緊鄰在class 為 "class1"后的一個(gè) class 為 "class2"的元素呀忧。
$(".class1~.class2")     // 同一層級(jí)下,也就是同一父元素下溃睹,class 為 "class1"后面所有 class 為 "class2"的元素而账。

3.簡(jiǎn)單過(guò)濾選擇器

$("p:first")   // 全局下第一個(gè) p 元素
$("p:last")    // 全局下最后一個(gè)p
$("li:even")   // 所有偶數(shù) li 元素,索引值從 0 開(kāi)始因篇,第一個(gè)元素是偶數(shù) (0)泞辐,第二個(gè)元素是奇數(shù) (1),以此類(lèi)推竞滓。
$("li:odd")    // 所有奇數(shù) li 元素咐吼,索引值從 0 開(kāi)始,第一個(gè)元素是偶數(shù) (0)商佑,第二個(gè)元素是奇數(shù) (1)锯茄,以此類(lèi)推。

4.層級(jí)過(guò)濾選擇器

$("li:not(#runoob)")  //挑選除 id="runoob" 以外的所有l(wèi)i
$("p:only-child")     // 當(dāng)前父元素下只有自己一個(gè)子元素
$("p:only-of-type")   // 當(dāng)前父元素下只有自己一個(gè) p 子元素茶没,有其他類(lèi)型的子元素?zé)o所謂
$("p:first-child")    // 其父元素的第一個(gè)子元素是 p 元素的元素
$("p:nth-child(2)")   // 其父元素的第二個(gè)子元素是 p 元素的元素
$("p:first-of-type")  // 其父元素的第一個(gè)是 p 元素的元素
$("p:nth-of-type(2)") // 其父元素的第一個(gè)是 p 元素的元素
$("div p:first-child")  // 選擇所有 div 元素下的第一個(gè) p 元素
last 選擇器部分省略肌幽,方法同 first

舉例:

:first , :first-child , first-of-type 的區(qū)別
<div>
    <p>div 中第一個(gè)段落,是  div 的第一個(gè)子元素抓半。</p>
<!-- 在這里:first有效喂急,first-child有效,first-of-type有效 -->

    <p>div 中的最后一個(gè)段落笛求,是  div 的最后一個(gè)子元素廊移。</p>
</div><br>

<div>
    <span>這是一個(gè) span 元素,是 div 中的第一個(gè)子元素探入。</span>
    <p>另一個(gè) div 中第一個(gè)段落狡孔,是 div 中的第二個(gè)子元素。</p>
<!-- 在這里:first無(wú)效新症,first-child無(wú)效步氏,first-of-type有效 -->

    <p>另一個(gè) div 中的最后一個(gè)段落, 是 div 中的第三個(gè)子元素。</p>
    <span>這是一個(gè) span 元素徒爹,是 div 中的最后一個(gè)子元素荚醒。</span>
</div><br>

關(guān)于 :only-child:
<div>
<p>只有一個(gè)子元素</p>
<!--  $("p:only-child")有效  -->
</div><br>

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

$("ul li:eq(3)")    // 列表中的第四個(gè)元素(index 值從 0 開(kāi)始)
$("ul li:gt(3)")    // 列舉 index 大于 3 的元素
$("ul li:lt(3)")    // 列舉 index 小于 3 的元素芋类,index=0、1界阁、2的前三個(gè)元素

6.內(nèi)容過(guò)濾選擇器

$("div:contains('hello')")     // 選取包含指定"hello"字符串的元素侯繁。
// 該字符串可以是直接包含在元素中的文本,或者被包含于子元素中泡躯。
$("div:has(p)")                // 所有包含有 p 元素在其內(nèi)的 div 元素
$(":header")                   // 所有標(biāo)題元素 <h1>, <h2> ...

7.可見(jiàn)性過(guò)濾選擇器

$("li:hidden")       //匹配所有不可見(jiàn)的 li 元素贮竟,或type為hidden的元素
$("li:visible")      //匹配所有可見(jiàn)的 li 元素

8.空元素過(guò)濾選擇器

$("td:empty")                  // 不包含子元素或者文本的空元素
$("td:parent")                 // 與 :empty 相反,所有非空元素较剃。

9.屬性過(guò)濾選擇器

$("div[id]")                  // 所有含有 id 屬性的 div 元素
$("div[id='123']")            // id屬性值為123的div 元素
$("div[id!='123']")           // id屬性值不等于123的div 元素
$("div[id^='qq']")            // id屬性值以qq開(kāi)頭的div 元素
$("div[id$='zz']")            // id屬性值以zz結(jié)尾的div 元素
$("div[id*='bb']")            // id屬性值包含bb的div 元素
$("div[id~='abc']")           // id屬性值包含單詞 abc 的 div 元素咕别,使用漢字詞語(yǔ)也可以
$("input[id][name$='man']")   //多屬性選過(guò)濾,同時(shí)滿(mǎn)足兩個(gè)屬性的條件的元素

10狀態(tài)過(guò)濾選擇器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配選中的 input
$("option:selected")  // 匹配選中的 option

11.表單選擇器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的單行文本框写穴,$(":text") 等價(jià)于$("[type=text]")惰拱,推薦使用$("input:text")定位更準(zhǔn),下同
$(":password")   //所有密碼框
$(":radio")      //所有單選按鈕
$(":checkbox")   //所有復(fù)選框
$(":submit")     //所有提交按鈕
$(":reset")      //所有重置按鈕
$(":button")     //所有button按鈕
$(":file")       //所有文件域
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末啊送,一起剝皮案震驚了整個(gè)濱河市偿短,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌馋没,老刑警劉巖昔逗,帶你破解...
    沈念sama閱讀 219,188評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異篷朵,居然都是意外死亡勾怒,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,464評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)款票,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)控硼,“玉大人,你說(shuō)我怎么就攤上這事艾少。” “怎么了翼悴?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,562評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵缚够,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我鹦赎,道長(zhǎng)谍椅,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,893評(píng)論 1 295
  • 正文 為了忘掉前任古话,我火速辦了婚禮雏吭,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘陪踩。我一直安慰自己杖们,他們只是感情好悉抵,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,917評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著摘完,像睡著了一般姥饰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上孝治,一...
    開(kāi)封第一講書(shū)人閱讀 51,708評(píng)論 1 305
  • 那天列粪,我揣著相機(jī)與錄音,去河邊找鬼谈飒。 笑死岂座,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的杭措。 我是一名探鬼主播掺逼,決...
    沈念sama閱讀 40,430評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼瓤介!你這毒婦竟也來(lái)了吕喘?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,342評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤刑桑,失蹤者是張志新(化名)和其女友劉穎氯质,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體祠斧,經(jīng)...
    沈念sama閱讀 45,801評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡闻察,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,976評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了琢锋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辕漂。...
    茶點(diǎn)故事閱讀 40,115評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖吴超,靈堂內(nèi)的尸體忽然破棺而出钉嘹,到底是詐尸還是另有隱情,我是刑警寧澤鲸阻,帶...
    沈念sama閱讀 35,804評(píng)論 5 346
  • 正文 年R本政府宣布跋涣,位于F島的核電站,受9級(jí)特大地震影響鸟悴,放射性物質(zhì)發(fā)生泄漏陈辱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,458評(píng)論 3 331
  • 文/蒙蒙 一细诸、第九天 我趴在偏房一處隱蔽的房頂上張望沛贪。 院中可真熱鬧,春花似錦、人聲如沸利赋。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,008評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)隐砸。三九已至之碗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間季希,已是汗流浹背褪那。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,135評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留式塌,地道東北人博敬。 一個(gè)月前我還...
    沈念sama閱讀 48,365評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像峰尝,于是被迫代替她去往敵國(guó)和親偏窝。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,055評(píng)論 2 355