首页 > 代码库 > 层次选择器

层次选择器

2024-07-26 11:22:29   211人阅读

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系主要包括后代、父子、相邻、兄弟关系，

通过其中某类关系可以方便快捷地定位元素，其详细说明如表2-3所示。

 
选择器功能返回值
ancestor descendant根据祖先元素匹配所有后代元素元素集合
parent > child根据父元素匹配所有子元素元素集合
prev + next匹配所有紧接在prev元素后的相邻元素元素集合
prev ~ siblings匹配prev元素之后的所有兄弟元素元素集合

说明：ancestor descendant 与 parent > child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next可以使用.next()代替，而prev ~ siblings可以使用nextAll()代替。

Demo如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XMTML 1.0 2 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <title>使用jQuery层次选择器</title> 7 <script type="text/javascript" src="http://www.mamicode.com/software/jquerys/jquery-1.7.2.js"></script> 8 <style type="text/css"> 9     body{font-size:12px;text-align:center}10     div,span{float:left;border:solid 1px #ccc;11              margin:8px;display:none}12     .clsFraA{width:65px;height:65px}13     .clsFraP{width:45px;height:45px;background-color:#eee}14     .clsFraC{width:25px;height:25px;background-color:#ddd}15 </style>16 <script type="text/javascript">17 /**18     $(function(){    // 匹配后代元素19         $("#divMid").css("display","block");20         $("#divMid1").css("display","block");21         $("div span").css("display","block");22         alert($("div span").size());23     }); **/24 /**25     $(function(){    // 匹配子元素 26         $("#divMid").css("display","block");27         alert($("div>span").size());28         $("div>span").css("display","block");29     });     **/30 /**31     $(function(){    // 匹配后面元素 32         //$("#divMid + div").css("display","block");33         $("#divMid").next().css("display","block");34     });  **/35 /**36     $(function(){    // 匹配后面所有元素37         //$("#divMid ~ div").css("display","block");38         $("#divMid").nextAll().css("display","block");39     });   **/40 41     $(function(){    // 匹配所有相邻元素42         $("#divMid").siblings().css("display","block");43     }); /**  **/44 </script>45 </head>46 <body>47     <div class="clsFraA">Left</div>48     <div class="clsFraA" id="divMid">49         <span class="clsFraP" id="Span1">Span150             <span class="clsFrac" id="Span2">Span2</span>51         </span>52         <span class="clsFraP" id="Span4">Span4</span>53     </div>54     <div class="clsFraA" id="divMid1">Right_155         <span class="clsFraP" id="Span5">Span5</span></div>56     <div class="clsFraA">Right_2</div>57     <span class="clsFrac" id="Span3">Span3</span>58 </body>59 </html>
Demo

 

层次选择器


联系
我们