jQuery層疊選擇器用法實(shí)例分析

更新時(shí)間：2019年06月28日 10:33:23 作者：Yeoman92

這篇文章主要介紹了jQuery層疊選擇器用法,結(jié)合實(shí)例形式分析了jQuery層疊選擇器功能、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了jQuery層疊選擇器用法。分享給大家供大家參考，具體如下：

層疊選擇器

如果想通過DOM元素之間的層次關(guān)系來獲取特定的元素，例如后代元素，子元素，相鄰元素和兄弟元素等，那么層疊選擇器是一個(gè)非常好的選擇。

位置選擇器語(yǔ)法如下：

"基準(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頁(yè)面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery lazyload 的重復(fù)加載錯(cuò)誤以及修復(fù)方法
jQuery lazyload是一款延遲加載圖片的的插件，原意是按需加載，當(dāng)圖片出現(xiàn)在可視區(qū)域時(shí)進(jìn)行加載，但是官方的插件經(jīng)過firebug的檢測(cè)可知，并不能節(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中要顯示與隱藏層，很簡(jiǎn)單的方法就是直接使用hide與show方法就可以了，但要定時(shí)我們需要結(jié)合setTimeout函數(shù)來實(shí)現(xiàn)
2013-08-08
詳解jQuery lazyload 懶加載
Lazy Load是一個(gè)用 JavaScript 編寫的jQuery插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 本文對(duì)它進(jìn)行實(shí)例介紹，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2016-12-12
20個(gè)非常棒的Jquery實(shí)用工具國(guó)外文章
網(wǎng)站設(shè)計(jì)者往往會(huì)設(shè)計(jì)一些小的工具類（widgets）或者一些可復(fù)用的程序，從而使頁(yè)面更楚楚動(dòng)人，更吸引瀏覽者駐足。這里收集了20個(gè)常用Jquery工具類，這些小的工具可以幫助網(wǎng)站設(shè)計(jì)人員和站長(zhǎng)非常容易地創(chuàng)建漂亮的站點(diǎn)。
2010-01-01
基于jquery的動(dòng)態(tài)創(chuàng)建表格的插件
工作快一年了,最近學(xué)習(xí)jquery，對(duì)jquery很感興趣。第一次寫博客，有不足之處還請(qǐng)各位拍磚。
2011-04-04
jQuery實(shí)現(xiàn)全選&全不選&非全選
本文主要介紹了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