<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;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></script> <br> <br> <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"> </span> <br></span> <br> </div> <br><div class="clsFraA"> <br>Right_1</div> <br><div class="clsFraA"> <br>Right_2</div> <br> <br> <br> </div>
