jquery選擇器之層級過濾選擇器詳解
更新時間：2014年01月27日 09:58:18 作者：
本篇文章主要是對jquery選擇器之層級過濾選擇器進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
復(fù)制代碼 代碼如下:
$("ancestor descendant")：選取parent元素后所有的child元素
$("parent > child")：選取parent元素后所有的直屬child元素，何謂“直屬”，也就是第一級的意思了
$("prev + next")：prev和next是兩個同級別的元素. 選中在prev元素后面的next元素
$("prev ~ siblings"):選擇prev后面的根據(jù)siblings過濾的元素。注:siblings是過濾器
后兩個用的比較少，一般會有其他選擇器替代
復(fù)制代碼 代碼如下:
$("prev + next")等價于next()
$("prev ~ siblings")等價于nextAll()
實例：
復(fù)制代碼 代碼如下:
<style type="text/css">
/*高亮顯示*/
.highlight{
background-color: gray
}
</style>
復(fù)制代碼 代碼如下:
<body>
<div>
<p id="p1">第一個DIV里面的P元素。</p>
</div>
<p id="p2">第一個單P元素。</p>
<div>
<span>DIV里面的SPAN元素。</span>
<p id="p3">第二個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">第二個單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后 所有第一級p元素 結(jié)果為：p1,p3。p4不會選取,因為p4不是div的直屬元素
復(fù)制代碼 代碼如下:
var s = $("div + p").addClass("highlight"); //選取div后面緊鄰的p元素 結(jié)果為：p2。p5不會選取,因為p5不緊鄰div
復(fù)制代碼 代碼如下:
var s = $("div ~ p").addClass("highlight"); //選取div后面所有緊鄰的p元素 結(jié)果為：p2,p5
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jQuery判斷對象是否存在的方法,對比分析了純javascript與jQuery實現(xiàn)判斷對象是否存在的功能區(qū)別,是非常實用的技巧,需要的朋友可以參考下2015-02-02
jQuery訪問json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結(jié)合實力形式分析了jQuery事件響應(yīng)及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了jQuery常見事件的監(jiān)聽方式，頁面經(jīng)常會有各種事件發(fā)生，事件發(fā)生后需要進(jìn)行一些特定處理，即執(zhí)行特定的函數(shù)或者語句。這就需要對事件進(jìn)行監(jiān)聽，下面關(guān)于監(jiān)聽事件的介紹，需要的小伙伴可以參考一下2022-03-03
這篇文章主要給大家分享了js實現(xiàn)碰撞檢測特效代碼，主要就是使用JavaScript實現(xiàn)網(wǎng)頁版的碰撞檢測，有需要的小伙伴可以參考下2016-10-10
這篇文章主要為大家介紹了jQuery的操作屬性，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
jQuery的開發(fā)速度很快，幾乎每半年一個大版本，每兩個月一個小版本。每個版本都會引入一些新功能。今天我想介紹的，就是從jQuery 1.5.0版本開始引入的一個新功能----deferred對象。2011-08-08
學(xué)習(xí)從實踐開始之jQuery插件開發(fā) 菜單插件開發(fā)
從軟件到網(wǎng)站，菜單可以說是無處不在。在傳統(tǒng)應(yīng)用軟件開發(fā)中，一般都有現(xiàn)成的控件可以使用；但是在網(wǎng)頁開發(fā)時，基本上要靠開發(fā)人員自己動手設(shè)計2012-05-05
這篇文章主要介紹了jQuery中:image選擇器用法,實例分析了:image選擇器的功能、定義及匹配類型為image的<input>元素時的使用技巧,需要的朋友可以參考下2015-01-01
Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
要求選擇“地區(qū)”及“代維公司”后，刷新第一個DataGrid框體，下面為大家介紹下如何清空J(rèn)query下EasyUI組件中的DataGrid結(jié)果集2014-01-01
一個簡單的jQuery插件制作 學(xué)習(xí)過程及實例
本文僅供參考，如有不足或錯誤，請不吝賜教，這里以一個彈出層的jQuery插件制作實例為基礎(chǔ)，進(jìn)行插件制作的說明。2010-04-04