快捷導(dǎo)航

jQuery層次選擇器選擇元素使用介紹

更新時間：2013年04月18日 14:44:43 作者：

層次選擇器:通過DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，通過其中基類關(guān)系可以方便快捷地定位元素，感興趣的朋友可以了解下

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!-- 
1.層次選擇器： 通過DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，通過其中基類關(guān)系可以方便快捷地定位元素 
jQuery選擇器詳解 
根據(jù)所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器6種 
注：ancestor descendant與parent>child所選擇的元素集合是不同的，前者的層次關(guān)系是祖先與后代，而后者是父子關(guān)系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。 
--> 
<title></title> 
<!-- 使用jQuery層次選擇器選擇元素：在頁面中，設(shè)置4塊<div>標(biāo)記，其中第二塊<div>中，添加1個<span>標(biāo)記，在該<span>標(biāo)記中又新增1個<span>標(biāo)記，全部元素初始值均為隱藏，然后通過jQuery層次選擇器，顯示相應(yīng)的頁面標(biāo)記。--> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
body{font-size:12px;text-align:center;} 
div,span{float:left;border:solid 1 px #ccc;margin:8px;display:none} 
.clsFraA{width:65px;height:65px} 
.clsFraP{width:45px;height:45px;background-color:#eee} 
.clsFraC{width:25px;height:25px;background-color:#ddd} 
</style> 
<script type="text/javascript"> 
$(function () { 
$('#divMid').css('display', 'block'); 
$('div span').css('display', 'block'); //顯示div中所有的<span>標(biāo)記 
}) 
$(function () { 
$('#divMid').css('display', 'block'); 
$('div>span').css('display', 'block'); //顯示<div>中子<span>標(biāo)記 
}) 
$(function () { 
$('#divMid+div').css('display', 'block'); //顯示ID為divMid元素后的下一個<div> 
$('#divMid').next().css('display', 'block'); 
}) 
$(function () { 
$('#divMid ~ div').css('display', 'block'); //顯示ID為divMid元素后的所有<div> 
$('#divMid').nextAll().css('display', 'block'); 
}) 
$(function () { 
$('#divMid').siblings('div').css('display','block'); //顯示ID為divMid元素的所有相鄰<div> 
}) 
/* siblings()方法與選擇器prev~siblings 區(qū)別在于，前者獲取全部的相鄰元素，不分前后，而后者僅獲取標(biāo)記后面全部相鄰元素，不能獲取前面部分*/ 
</script> 
</head> 
<body> 
<div class="clsFraA"> 
Left</div> 
<div class="clsFraA" id="divMid"> 
<span class="clsFraP" id="Span1"> 
<span class="clsFraC" id="Span2"> </span> 
</span> 
</div> 
<div class="clsFraA"> 
Right_1</div> 
<div class="clsFraA"> 
Right_2</div> 
</body> 
</html> 