jQuery層疊選擇器用法實(shí)例分析
更新時(shí)間：2019年06月28日 10:33:23 作者：Yeoman92
這篇文章主要介紹了jQuery層疊選擇器用法,結(jié)合實(shí)例形式分析了jQuery層疊選擇器功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例講述了jQuery層疊選擇器用法。分享給大家供大家參考，具體如下：
層疊選擇器
如果想通過DOM元素之間的層次關(guān)系來獲取特定的元素，例如后代元素，子元素，相鄰元素和兄弟元素等，那么層疊選擇器是一個(gè)非常好的選擇。
位置選擇器語法如下：
- "基準(zhǔn)元素 層疊符號(hào) 目標(biāo)元素"
層疊選擇器的用法
- 后代選擇器
- 格式:
$("ancestor descendant")
- 格式:
- 子選擇器
- 格式:
$("parent>child")
- 格式:
- 相鄰選擇器
- 格式:
$("prev+next")
- 格式:
- 兄弟選擇器
- 格式:
$("prev~siblings")
- 格式:
如操作：
- 獲取第一個(gè)ul下所有的li
- 獲取第一個(gè)ul下的子節(jié)點(diǎn)li
- 獲取form表單中第二個(gè)div之后的相鄰節(jié)點(diǎn)
- 獲取form表單中第二個(gè)div之后的所有兄弟節(jié)點(diǎn)
<script>
$(function(){
//基準(zhǔn)節(jié)點(diǎn) 空格 目標(biāo)節(jié)點(diǎn)代表后代選擇器,不分層次選中屬于第一個(gè)ul的所有l(wèi)i節(jié)點(diǎn)
//$("ul:first li").css("border" , "1px solid red");
//我們使用">"來代表子選擇器,只獲取直接隸屬于第一個(gè)ul的li節(jié)點(diǎn)
//$("ul:first>li").css("border" , "1px solid red");
//+號(hào)代表相鄰節(jié)點(diǎn),它只會(huì)選擇1個(gè)
//$("form>div:eq(1)+*").css("border" , "1px solid red");
//獲取之后的兄弟節(jié)點(diǎn)我們使用~
$("form>div:eq(1)~div").css("border" , "1px solid red");
})
</script>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery lazyload 的重復(fù)加載錯(cuò)誤以及修復(fù)方法
jQuery lazyload是一款延遲加載圖片的的插件，原意是按需加載，當(dāng)圖片出現(xiàn)在可視區(qū)域時(shí)進(jìn)行加載，但是官方的插件經(jīng)過firebug的檢測可知，并不能節(jié)省流量開支，反而有重復(fù)加載的現(xiàn)象。2010-11-11
jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
這篇文章主要介紹了jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法,結(jié)合實(shí)例形式詳細(xì)分析了filter的功能及4種具體用法,需要的朋友可以參考下2016-04-04
基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)照片墻自動(dòng)播放特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
基于jquery實(shí)現(xiàn)的定時(shí)顯示與隱藏div廣告的實(shí)現(xiàn)代碼
有時(shí)候我們需要在jquery中要顯示與隱藏層，很簡單的方法就是直接使用hide與show方法就可以了，但要定時(shí)我們需要結(jié)合setTimeout函數(shù)來實(shí)現(xiàn)2013-08-08
Lazy Load是一個(gè)用 JavaScript 編寫的jQuery插件. 它可以延遲加載長頁面中的圖片. 本文對它進(jìn)行實(shí)例介紹，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2016-12-12
20個(gè)非常棒的Jquery實(shí)用工具 國外文章
網(wǎng)站設(shè)計(jì)者往往會(huì)設(shè)計(jì)一些小的工具類（widgets）或者一些可復(fù)用的程序，從而使頁面更楚楚動(dòng)人，更吸引瀏覽者駐足。這里收集了20個(gè)常用Jquery工具類，這些小的工具可以幫助網(wǎng)站設(shè)計(jì)人員和站長非常容易地創(chuàng)建漂亮的站點(diǎn)。2010-01-01
基于jquery的動(dòng)態(tài)創(chuàng)建表格的插件
工作快一年了,最近學(xué)習(xí)jquery，對jquery很感興趣。第一次寫博客，有不足之處還請各位拍磚。2011-04-04
本文主要介紹了jQuery實(shí)現(xiàn)全選&全不選&非全選,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-03-03
jQuery Ajax File Upload實(shí)例源碼
這篇文章主要為大家分享了jQuery Ajax File Upload實(shí)例源碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jquery.idTabs 選項(xiàng)卡使用示例代碼
idTabs是基于Jquery編寫封裝的一個(gè)插件，主要用于實(shí)現(xiàn)選項(xiàng)卡功能，下面是它的具體使用2014-09-09