jQuery層級(jí)選擇器_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
因?yàn)镈OM的結(jié)構(gòu)就是層級(jí)結(jié)構(gòu),所以我們經(jīng)常要根據(jù)層級(jí)關(guān)系進(jìn)行選擇。
層級(jí)選擇器(Descendant Selector)
如果兩個(gè)DOM元素具有層級(jí)關(guān)系,就可以用$('ancestor descendant')來(lái)選擇,層級(jí)之間用空格隔開。例如:
<!-- HTML結(jié)構(gòu) --> <div class="testing"> <ul class="lang"> <li class="lang-javascript">JavaScript</li> <li class="lang-python">Python</li> <li class="lang-lua">Lua</li> </ul> </div>
要選出JavaScript,可以用層級(jí)選擇器:
$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>] $('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
因?yàn)?span style="color: #800000"><div>和<ul>都是<li>的祖先節(jié)點(diǎn),所以上面兩種方式都可以選出相應(yīng)的<li>節(jié)點(diǎn)。
要選擇所有的<li>節(jié)點(diǎn),用:
$('ul.lang li');
這種層級(jí)選擇器相比單個(gè)的選擇器好處在于,它縮小了選擇范圍,因?yàn)槭紫纫ㄎ桓腹?jié)點(diǎn),才能選擇相應(yīng)的子節(jié)點(diǎn),這樣避免了頁(yè)面其他不相關(guān)的元素。
例如:
$('form[name=upload] input');
就把選擇范圍限定在name屬性為upload的表單里。如果頁(yè)面有很多表單,其他表單的<input>不會(huì)被選擇。
多層選擇也是允許的:
$('form.test p input'); // 在form表單選擇被<p>包含的<input>
子選擇器(Child Selector)
子選擇器$('parent>child')類似層級(jí)選擇器,但是限定了層級(jí)關(guān)系必須是父子關(guān)系,就是<child>節(jié)點(diǎn)必須是<parent>節(jié)點(diǎn)的直屬子節(jié)點(diǎn)。還是以上面的例子:
$('ul.lang>li.lang-javascript'); // 可以選出[<li class="lang-javascript">JavaScript</li>] $('div.testing>li.lang-javascript'); // [], 無(wú)法選出,因?yàn)?lt;div>和<li>不構(gòu)成父子關(guān)系
過(guò)濾器(Filter)
過(guò)濾器一般不單獨(dú)使用,它通常附加在選擇器上,幫助我們更精確地定位元素。觀察過(guò)濾器的效果:
$('ul.lang li'); // 選出JavaScript、Python和Lua 3個(gè)節(jié)點(diǎn) $('ul.lang li:first-child'); // 僅選出JavaScript $('ul.lang li:last-child'); // 僅選出Lua $('ul.lang li:nth-child(2)'); // 選出第N個(gè)元素,N從1開始 $('ul.lang li:nth-child(even)'); // 選出序號(hào)為偶數(shù)的元素 $('ul.lang li:nth-child(odd)'); // 選出序號(hào)為奇數(shù)的元素
表單相關(guān)
針對(duì)表單元素,jQuery還有一組特殊的選擇器:
:input:可以選擇<input>,<textarea>,<select>和<button>;
:file:可以選擇<input type="file">,和input[type=file]一樣;
:checkbox:可以選擇復(fù)選框,和input[type=checkbox]一樣;
:radio:可以選擇單選框,和input[type=radio]一樣;
:focus:可以選擇當(dāng)前輸入焦點(diǎn)的元素,例如把光標(biāo)放到一個(gè)<input>上,用$('input:focus')就可以選出;
:checked:選擇當(dāng)前勾上的單選框和復(fù)選框,用這個(gè)選擇器可以立刻獲得用戶選擇的項(xiàng)目,如$('input[type=radio]:checked');
:enabled:可以選擇可以正常輸入的<input>、<select> 等,也就是沒(méi)有灰掉的輸入;
:disabled:和:enabled正好相反,選擇那些不能輸入的。
此外,jQuery還有很多有用的選擇器,例如,選出可見(jiàn)的或隱藏的元素:
$('div:visible'); // 所有可見(jiàn)的div $('div:hidden'); // 所有隱藏的div
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery基本選擇器匹配多個(gè)元素的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery基本選擇器匹配多個(gè)元素的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09jQuery實(shí)現(xiàn)的AJAX簡(jiǎn)單彈出層效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的AJAX簡(jiǎn)單彈出層效果代碼,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)彈出層效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11jQuery validate 驗(yàn)證radio實(shí)例
這篇文章主要介紹了jQuery validate 驗(yàn)證radio實(shí)例代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03jQuery獲取頁(yè)面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用
這篇文章主要介紹了jQuery獲取頁(yè)面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用,需要的朋友可以參考下2015-07-07jquery簡(jiǎn)單瀑布流實(shí)現(xiàn)原理及ie8下測(cè)試代碼
可以將分頁(yè)獲取的內(nèi)容依次填入四個(gè)div中,瀑布流的分頁(yè)可以以多頁(yè)(比如5頁(yè))為單位二次分頁(yè),這樣可以減少后臺(tái)算法的復(fù)雜度;測(cè)試環(huán)境:ie8 ff13.0.1 chrome22有興趣的朋友可以了解下2013-01-01jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05