快捷導(dǎo)航

jQuery層級(jí)選擇器實(shí)例代碼

更新時(shí)間：2017年02月06日 11:09:09 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了jQuery層級(jí)選擇器實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery層級(jí)選擇器的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" type="text/css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>子選擇器與后代選擇器</h2>
  <div class="left">
    <div class="aaron">
      <p>div下的第一個(gè)p元素</p>
    </div>
    <div class="aaron">
      <p>div下的第一個(gè)p元素</p>
    </div>
  </div>
  <div class="right">
    <div class="imooc">
      <article>
        <p>div下的article下的p元素</p>
      </article>
    </div>
    <div class="imooc">
      <article>
        <p>div下的article下的p元素</p>
      </article>
    </div>
  </div>

  <script type="text/javascript">
    //子選擇器
    //$('div > p') 選擇所有div元素里面的子元素P
    $('div > p').css("border", "5px groove red");
  </script>

  <script type="text/javascript">
    //后代選擇器
    //$('div p') 選擇所有div元素里面的p元素
    $('div p').css("border", "9px groove green");
  </script>


  <h2>相鄰兄弟選擇器與一般兄弟選擇器</h2>
  <div class="bottom">
    <div>兄弟節(jié)點(diǎn)div, +~選擇器不能向前選擇</div>
    <span class="prev">選擇器span元素</span>
    <div>span后第一個(gè)兄弟節(jié)點(diǎn)div</div>
    <div>兄弟節(jié)點(diǎn)div
      <div class="small">子元素div</div>
    </div>
    <span>兄弟節(jié)點(diǎn)span,不可選</span>
    <div>兄弟節(jié)點(diǎn)div</div>
  </div>

  <script type="text/javascript">
    //相鄰兄弟選擇器
    //選取prev后面的第一個(gè)的div兄弟節(jié)點(diǎn)
    $(".prev + div").css("border", "3px groove blue");
  </script>

  <script type="text/javascript">
    //一般相鄰選擇器
    //選取prev后面的所有的div兄弟節(jié)點(diǎn)
    $(".prev ~ div").css("border", "3px groove blue");
  </script>

</body>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)滑屏大圖定時(shí)收縮為小banner圖片的廣告代碼,可實(shí)現(xiàn)大幅廣告圖的漸顯效果及定時(shí)收縮功能,點(diǎn)擊左上角關(guān)閉按鈕還可隱藏廣告圖片,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-09-09
完美解決jQuery符號(hào)$與其他javascript 庫(kù)、框架沖突的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決jQuery符號(hào)$與其他javascript 庫(kù)、框架沖突的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
jquery多瀏覽器捕捉回車(chē)事件代碼
最近我們網(wǎng)站做一個(gè)合作項(xiàng)目要求在頁(yè)面中捕捉回車(chē)事件，經(jīng)過(guò)好多測(cè)試找到這個(gè)
2010-06-06
jQuery實(shí)現(xiàn)簡(jiǎn)單的手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的手風(fēng)琴效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
jquery實(shí)現(xiàn)彈出層完美居中效果
本篇文章主要是對(duì)jquery彈出層居中效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-03-03
JQuery工具函數(shù)匯總
jquery為我們提供了操作數(shù)組和對(duì)象的工具函數(shù)，方便和簡(jiǎn)化了我們對(duì)它們的操作。今天我們就進(jìn)入jQuery的工具函數(shù)的復(fù)習(xí)。
2015-06-06
jquery實(shí)現(xiàn)拖拽小方塊效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)拖拽小方塊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
jQuery示例收集
3D旋轉(zhuǎn)效果展示分享按鈕，具有動(dòng)畫(huà)效果。WordPress的tab云好像也有這種效果。
2010-11-11
jQuery EasyUI API 中文文檔 - EasyLoader 加載器
jQuery EasyUI API 中文文檔 - EasyLoader 加載器，使用jQuery EasyUI的朋友可以參考下。
2011-09-09
jquery滾動(dòng)特效集錦
本文給大家匯總介紹的是jquery單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼，都是分廠常用的一些文字以及圖文的無(wú)縫滾動(dòng)特效，希望能夠?qū)Υ蠹沂煜Query有所幫助。
2015-06-06