代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
1.層次選擇器： 通過DOM元素間的層次關系獲取元素，其主要的層次關系包括後代、父子、相鄰、兄弟關系，通過其中基類關系可以方便快捷地定位元素
jQuery選擇器詳解
根據所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器6種
注：ancestor descendant與parent>child所選擇的元素集合是不同的，前者的層次關系是祖先與後代，而後者是父子關系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。
-->
<title></title>
<!-- 使用jQuery層次選擇器選擇元素：在頁面中，設置4塊<div>標記，其中第二塊<div>中，添加1個<span>標記，在該<span>標記中又新增1個<span>標記，全部元素初始值均為隱藏，然後通過jQuery層次選擇器，顯示相應的頁面標記。-->
<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>標記
})
$(function () {
$('#divMid').css('display', 'block');
$('div>span').css('display', 'block'); //顯示<div>中子<span>標記
})
$(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 區別在於，前者獲取全部的相鄰元素，不分前後，而後者僅獲取標記後面全部相鄰元素，不能獲取前面部分*/
</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>