選擇器是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)元素囊颅,如下拉列表框、列表框傅瞻。