JQuery選擇器

選擇器是JQuery的根基磅崭,在JQuery 中定页,對(duì)事件處理,遍歷DOM和ajax操作都依賴于選擇器绽诚。這也是今天我們學(xué)習(xí)的重點(diǎn)內(nèi)容。

1.基本選擇器
基本選擇器是JQuery中最常用的選擇器,也是最簡(jiǎn)單的選擇器恩够,它通過(guò)元素id卒落、class 和標(biāo)簽名來(lái)查找DOM元素。這個(gè)非常重要蜂桶,下面的內(nèi)容都是以此為基礎(chǔ)儡毕,逐級(jí)提高的。
1).“$(“#id”)”扑媚,獲取id指定的元素腰湾,id是全局唯一的,所以它只有一個(gè)成員疆股。
2).“$(“.class”)”费坊,獲取class指定的元素,不同的元素可以具有相同的class屬性旬痹,所以它可能具有多個(gè)成員附井。
3).“$(“element”)”,獲取element(元素名两残,比如div永毅、table等)指定的元素,它可能具有多個(gè)成員人弓。
4).“$(“*”)”沼死,獲取所有元素,相當(dāng)于document崔赌。
5).“$(“selector1,selector2,…,selectorN”)”意蛀,將每個(gè)選擇器匹配到的元素合并后一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合峰鄙。

2.層次選擇器
什么是層次浸间?層次就是父子關(guān)系、兄弟關(guān)系的節(jié)點(diǎn)吟榴。所以魁蒜,層次選擇器就是用來(lái)獲取指定元素的父子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)吩翻。
1).“$(“ancestor descendant”)”兜看,獲取ancestor元素下邊的所有元素。
2).“$(“parent > child”)”狭瞎,獲取parent元素下邊的所有子元素(只包含第一層子元素)细移。
3).“$(“pre + next”)”,獲取緊隨pre元素的后一個(gè)兄弟元素熊锭。
4).“$(“pre ~ siblings”)”弧轧,獲取pre元素后邊的所有兄弟元素雪侥。

3.過(guò)濾選擇器
過(guò)濾?肯定是要添加過(guò)濾條件的精绎。通過(guò)“:”添加過(guò)濾條件速缨,比如“$(“div:first”)”返回div元素集合的第一個(gè)div元素,first是過(guò)濾條件代乃。
按照不同的過(guò)濾規(guī)則旬牲,過(guò)濾選擇器可以分為基本過(guò)濾,內(nèi)容過(guò)濾搁吓,可見性過(guò)濾原茅,屬性過(guò)濾,子元素過(guò)濾和表單對(duì)象屬性過(guò)濾選擇器堕仔。

1). 基本過(guò)濾選擇器
a) “:first”擂橘,選取第一個(gè)元素,別忘記它也是被放在一個(gè)集合里哦贮预!因?yàn)镴Query它是DOM對(duì)象的一個(gè)集合贝室。如,“$("tr:first")”返回所有tr元素的第一個(gè)tr元素仿吞,它仍然被保存在集合中滑频。
b) “:last”,選取最后一個(gè)元素唤冈。如峡迷,“$("tr:last")”返回所有tr元素的最后一個(gè)tr元素,它仍然被保存在集合中你虹。
c) “:not(selector)”绘搞,去除所有與給定選擇器匹配的元素。如傅物,“$("input:not(:checked)")”返回所有input元素夯辖,但去除被選中的元素(單選框、多選框)董饰。
d) “:even”蒿褂,選取所有元素中偶數(shù)的元素。因?yàn)镴Query對(duì)象是一個(gè)集合卒暂,這里的偶數(shù)指的就是集合的索引啄栓,索引從0開始。
e) “:odd”也祠,選取所有元素中奇數(shù)的元素昙楚,索引從0開始。
f) “:eq(index)”诈嘿,選取指定索引的元素堪旧,索引從0開始削葱。
g) “:gt(index)”,選取索引大于指定index的元素淳梦,索引從0開始佩耳。
h) “:lt(index)”,選取索引小于指定index的元素谭跨,索引從0開始。
i) “:header”李滴,選取所有的標(biāo)題元素螃宙,如hq、h2等所坯。
j) “:animated”谆扎,選取當(dāng)前正在執(zhí)行的所有動(dòng)畫元素。

2). 內(nèi)容過(guò)濾選擇器
它是對(duì)元素和文本內(nèi)容的操作芹助。
a) “:contains(text)”堂湖,選取包含text文本內(nèi)容的元素。
b) “:empty”状土,選取不包含子元素或者文本節(jié)點(diǎn)的空元素无蜂。
c) “:has(selector)”,選取含有選擇器所匹配的元素的元素蒙谓。
d) “:parent”斥季,選取含有子元素或文本節(jié)點(diǎn)的元素。(它是一個(gè)父節(jié)點(diǎn))

3). 可見性過(guò)濾選擇器
根據(jù)元素的可見與不可見狀態(tài)來(lái)選取元素累驮。
“:hidden”酣倾,選取所有不可見元素。
“:visible”谤专,選擇所有可見元素躁锡。
可見選擇器:hidden 不僅包含樣式屬性 display 為 none 的元素,也包含文本隱藏域 (<input type=“hidden”>)和 visible:hidden 之類的元素置侍。

4).屬性過(guò)濾選擇器
通過(guò)元素的屬性來(lái)選取相應(yīng)的元素映之。
a) “[attribute]”,選取擁有此屬性的元素墅垮。
b) “[attribute=value]”惕医,選取指定屬性值為value的所有元素。
c) “[attribute !=value]”算色,選取屬性值不為value的所有元素抬伺。
d) “[attribute ^= value]”,選取屬性值以value開始的所有元素灾梦。
e) “[attribute $= value]”峡钓,選取屬性值以value結(jié)束的所有元素妓笙。
f) “[attribute *= value]”,選取屬性值包含value的所有元素能岩。
g) “[selector1] [selector2]…[selectorN]”寞宫,復(fù)合性選擇器,首先經(jīng)[selector1]選擇返回集合A拉鹃,集合A再經(jīng)過(guò)[selector2]選擇返回集合B辈赋,集合B再經(jīng)過(guò)[selectorN]選擇返回結(jié)果集合。

5). 子元素過(guò)濾選擇器
一看名字便是膏燕,它是對(duì)某一元素的子元素進(jìn)行選取的钥屈。
a) “:nth-child(index/even/odd)”,選取索引為index的元素坝辫、索引為偶數(shù)的元素篷就、索引為奇數(shù)的元素。
l nth-child(even/odd):能選取每個(gè)父元素下的索引值為偶(奇)數(shù)的元素近忙。
l nth-child(2):能選取每個(gè)父元素下的索引值為 2 的元素竭业。
l nth-child(3n):能選取每個(gè)父元素下的索引值是 3 的倍數(shù)的元素。
l nth-child(3n + 1):能選取每個(gè)父元素下的索引值是 3n + 1的元素及舍。
b) “:first-child”未辆,選取第一個(gè)子元素。
c) “:last-child”击纬,選取最后一個(gè)子元素鼎姐。
d) “:only-child”,選取唯一子元素更振,它的父元素只有它這一個(gè)子元素炕桨。

6). 表單過(guò)濾選擇器
選取表單元素的過(guò)濾選擇器。
a) “:input”肯腕,選取所有<input>献宫、<textarea>、<select >和<button>元素实撒。
b) “:text”姊途,選取所有的文本框元素。
c) “:password”知态,選取所有的密碼框元素捷兰。
d) “:radio”,選取所有的單選框元素负敏。
e) “:checkbox”贡茅,選取所有的多選框元素。
f) “:submit”,選取所有的提交按鈕元素顶考。
g) “:image”赁还,選取所有的圖像按鈕元素。
h) “:reset”驹沿,選取所有重置按鈕元素艘策。
i) “:button”,選取所有按鈕元素渊季。
j) “:file”朋蔫,選取所有文件上傳域元素。
k) “:hidden”却汉,選取所有不可見元素斑举。

7).表單對(duì)象屬性過(guò)濾選擇器
選取表單元素屬性的過(guò)濾選擇器。
“:enabled”病涨,選取所有可用元素。
“:disabled”璧坟,選取所有不可用元素既穆。
“:checked”,選取所有被選中的元素雀鹃,如單選框幻工、復(fù)選框。
“:selected”黎茎,選取所有被選中項(xiàng)元素囊颅,如下拉列表框、列表框傅瞻。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末踢代,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子嗅骄,更是在濱河造成了極大的恐慌胳挎,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件溺森,死亡現(xiàn)場(chǎng)離奇詭異慕爬,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)屏积,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門医窿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人炊林,你說(shuō)我怎么就攤上這事姥卢。” “怎么了铛铁?”我有些...
    開封第一講書人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵隔显,是天一觀的道長(zhǎng)却妨。 經(jīng)常有香客問(wèn)我,道長(zhǎng)括眠,這世上最難降的妖魔是什么彪标? 我笑而不...
    開封第一講書人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮掷豺,結(jié)果婚禮上捞烟,老公的妹妹穿的比我還像新娘。我一直安慰自己当船,他們只是感情好题画,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著德频,像睡著了一般苍息。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上壹置,一...
    開封第一講書人閱讀 51,125評(píng)論 1 297
  • 那天竞思,我揣著相機(jī)與錄音,去河邊找鬼钞护。 笑死盖喷,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的难咕。 我是一名探鬼主播课梳,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼余佃!你這毒婦竟也來(lái)了暮刃?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤爆土,失蹤者是張志新(化名)和其女友劉穎沾歪,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體雾消,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡灾搏,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了立润。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片狂窑。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖桑腮,靈堂內(nèi)的尸體忽然破棺而出泉哈,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布丛晦,位于F島的核電站奕纫,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏烫沙。R本人自食惡果不足惜匹层,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锌蓄。 院中可真熱鬧升筏,春花似錦、人聲如沸瘸爽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)剪决。三九已至灵汪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間柑潦,已是汗流浹背识虚。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留妒茬,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓蔚晨,卻偏偏與公主長(zhǎng)得像乍钻,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子铭腕,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容