jquery選擇器之層級(jí)過濾選擇器詳解

更新時(shí)間：2014年01月27日 09:58:18 作者：

本篇文章主要是對(duì)jquery選擇器之層級(jí)過濾選擇器進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

$("ancestor descendant")：選取parent元素后所有的child元素
$("parent > child")：選取parent元素后所有的直屬child元素，何謂“直屬”，也就是第一級(jí)的意思了
$("prev + next")：prev和next是兩個(gè)同級(jí)別的元素. 選中在prev元素后面的next元素
$("prev ~ siblings"):選擇prev后面的根據(jù)siblings過濾的元素。注:siblings是過濾器

后兩個(gè)用的比較少，一般會(huì)有其他選擇器替代

復(fù)制代碼代碼如下:

$("prev + next")等價(jià)于next()
$("prev ~ siblings")等價(jià)于nextAll()

實(shí)例：

復(fù)制代碼代碼如下:

<style type="text/css">
  /*高亮顯示*/
  .highlight{   
   background-color: gray
  }
 </style>

復(fù)制代碼代碼如下:

<body>
    <div>
     <p id="p1">第一個(gè)DIV里面的P元素。</p>
    </div>
    <p id="p2">第一個(gè)單P元素。</p>
    <div>
     <span>DIV里面的SPAN元素。</span>
     <p id="p3">第二個(gè)DIV里面的P元素。</p>
     <span>
      <p id="p4">DIV里面的SPAN里面的P元素。</p>
     </span>
    </div>
     <table>
      <tr>
       <th>A</th><th>B</th><th>C</th>
      </tr>
      <tr>
       <td>1</td><td>2</td><td>3</td>
      </tr>
     </table>
     <p id="p5">第二個(gè)單P元素。</p>
     <span>單SPAN元素。</span>
  </body>

復(fù)制代碼代碼如下:

var s = $("div p").addClass("highlight"); //選取div后面的所有p元素   結(jié)果為：p1,p3,p4

復(fù)制代碼代碼如下:

var s = $("div > p").addClass("highlight"); //選取div后 所有第一級(jí)p元素   結(jié)果為：p1,p3。p4不會(huì)選取,因?yàn)閜4不是div的直屬元素 

復(fù)制代碼代碼如下:

var s = $("div + p").addClass("highlight");   //選取div后面緊鄰的p元素  結(jié)果為：p2。p5不會(huì)選取,因?yàn)閜5不緊鄰div

復(fù)制代碼代碼如下:

var s = $("div ~ p").addClass("highlight");     //選取div后面所有緊鄰的p元素  結(jié)果為：p2,p5

您可能感興趣的文章:

相關(guān)文章

jQuery判斷對(duì)象是否存在的方法整理
這篇文章主要介紹了jQuery判斷對(duì)象是否存在的方法,對(duì)比分析了純javascript與jQuery實(shí)現(xiàn)判斷對(duì)象是否存在的功能區(qū)別,是非常實(shí)用的技巧,需要的朋友可以參考下
2015-02-02
jQuery訪問json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結(jié)合實(shí)力形式分析了jQuery事件響應(yīng)及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
分享jQuery的3種常見事件監(jiān)聽方式
這篇文章主要介紹了jQuery常見事件的監(jiān)聽方式，頁面經(jīng)常會(huì)有各種事件發(fā)生，事件發(fā)生后需要進(jìn)行一些特定處理，即執(zhí)行特定的函數(shù)或者語句。這就需要對(duì)事件進(jìn)行監(jiān)聽，下面關(guān)于監(jiān)聽事件的介紹，需要的小伙伴可以參考一下
2022-03-03
js實(shí)現(xiàn)碰撞檢測(cè)特效代碼分享
這篇文章主要給大家分享了js實(shí)現(xiàn)碰撞檢測(cè)特效代碼，主要就是使用JavaScript實(shí)現(xiàn)網(wǎng)頁版的碰撞檢測(cè)，有需要的小伙伴可以參考下
2016-10-10
jQuery的操作屬性詳解
這篇文章主要為大家介紹了jQuery的操作屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-01-01
jQuery的deferred對(duì)象使用詳解
jQuery的開發(fā)速度很快，幾乎每半年一個(gè)大版本，每?jī)蓚€(gè)月一個(gè)小版本。每個(gè)版本都會(huì)引入一些新功能。今天我想介紹的，就是從jQuery 1.5.0版本開始引入的一個(gè)新功能----deferred對(duì)象。
2011-08-08
學(xué)習(xí)從實(shí)踐開始之jQuery插件開發(fā) 菜單插件開發(fā)
從軟件到網(wǎng)站，菜單可以說是無處不在。在傳統(tǒng)應(yīng)用軟件開發(fā)中，一般都有現(xiàn)成的控件可以使用；但是在網(wǎng)頁開發(fā)時(shí)，基本上要靠開發(fā)人員自己動(dòng)手設(shè)計(jì)
2012-05-05
jQuery中:image選擇器用法實(shí)例
這篇文章主要介紹了jQuery中:image選擇器用法,實(shí)例分析了:image選擇器的功能、定義及匹配類型為image的<input>元素時(shí)的使用技巧,需要的朋友可以參考下
2015-01-01
Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
要求選擇“地區(qū)”及“代維公司”后，刷新第一個(gè)DataGrid框體，下面為大家介紹下如何清空J(rèn)query下EasyUI組件中的DataGrid結(jié)果集
2014-01-01
一個(gè)簡(jiǎn)單的jQuery插件制作學(xué)習(xí)過程及實(shí)例
本文僅供參考，如有不足或錯(cuò)誤，請(qǐng)不吝賜教，這里以一個(gè)彈出層的jQuery插件制作實(shí)例為基礎(chǔ)，進(jìn)行插件制作的說明。
2010-04-04