<div class="codetitle"> <span><a style="CURSOR: pointer" data="6309" class="copybut" id="copybut6309" onclick="doCopy('code6309')"><u>複製程式碼</u></a></span> 程式碼如下:</div> <div class="codebody" id="code6309"> <br> <br> <br><!-- <BR>1.層次選擇者： 透過DOM元素間的層次關係取得元素，其主要的層次關係包括後代、父子、相鄰、兄弟關係，透過其中基類關係可以方便快速地定位元素<BR>jQuery選擇器詳解<BR>根據所獲取頁面中元素的不同，可以將jQuery選擇器分為：基本選擇器、層次選擇器、過濾選擇器、表單選擇器四大類。其中，在過濾選擇器中有可以分為：簡單過濾選擇器、內容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單物件屬性過濾選擇器6種<BR>註：ancestor descendant與parent>child所選擇的元素集合是不同的，前者的層次關係是祖先與後代，而後者是父子關係；另外，prev next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。 <BR>--> <br><title></title> <br><!-- 使用jQuery層次選擇器選擇元素：在頁面中，設定4塊<div>標記，其中第二塊<div>中，加入1個<span>標記，在該<span>標記中又新增1個<span>標記，全部元素初始值均為隱藏，然後透過jQuery層次選擇器，顯示對應的頁面標記。 --> <br><script src="jquery-1.9.1.js" type="text/javascript"></script> <br><style type="text/css"> <BR>body{font -size:12px;text-align:center;} <BR>div,span{float:left;border:solid 1 px #ccc;margin:8px;display:none} <BR>.clsFraA{width:65px;display:none} <BR>.clsFraA{width:65px;height :65px} <BR>.clsFraP{width:45px;height:45px;background-color:#eee} <BR>.clsFraC{width:25px;height:25px;background-color:#ddd} <BR> style> <BR><script type="text/javascript"> <BR>$(function () { <BR>$('#divMid').css('display', 'block'); <BR>$ ('div span').css('display', 'block'); //顯示div中所有的<span>標記<BR>}) <BR>$(function () { <BR>$('# divMid').css('display', 'block'); <BR>$('div>span').css('display', 'block'); //顯示<div>中子<span>標記<BR>}) <BR>$(function () { <BR>$('#divMid div').css('display', 'block'); //顯示ID為divMid元素後的下一個<div > <BR>$('#divMid').next().css('display', 'block'); <BR>}) <BR>$(function () { <BR>$('#divMid ~ div').css('display', 'block'); //顯示ID為divMid元素後的所有<div> <BR>$('#divMid').nextAll().css('display', ' block'); <BR>}) <BR>$(function () { <BR>$('#divMid').siblings('div').css('display','block'); //顯示ID為divMid元素的所有相鄰<div> <BR>}) <BR>/* siblings()方法與選擇器prev~siblings 區別在於，前者獲取全部的相鄰元素，不分前後，而後者僅獲取標記後面全部相鄰元素，不能取得前面部分*/ <BR> <BR> <BR><body> <BR><div class="clsFraA"> <BR>Left</ div> <BR><div class="clsFraA" id="divMid"> <BR><span class="clsFraP" id="Span1"> <BR><span class="clsFraC" id="Span2"> <BR> <BR></style> </div> <br><div class="clsFraA"> <br>Right_1</div> <br><div class="clsFraA"> <br>Right_2</div> <br> <br>
