1.层次选择器介绍
前面基本选择器是直接通过DOM节点本身来进行选择的,这里的层次选择器则是基于DOM元素的层次关系获取特定的元素,例如相邻元素、同辈元素、子元素与后代元素,也就是迂回的方式来选择相应的元素。
2.详解每个层次选择器
3.应用实例
<html>
<head>
<title>基本选择器</title>
<style type="text/css">
div,span,p{
width:240px;
height:240px;
border:#000 1px solid;
background:#aaa;
font-family:Verdana;
font-size:17px;
float:left;
margin:5px;
}
div.mini{
width:80px;
height:80px;
background-color:#aaa;
font-size:12px;
}
div.hide{
display:none;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$(".one .mini").css("background-color","#0F0");//①祖先后代选择器
//$(".one > .mini").css("background-color","#0F0");//②注意与前面的差别
//$("#two+div").css("background-color","#0F0");//③#two的下一个同辈元素
//$("#two~div").css("background-color","#0F0");//④#two所有的同辈元素,注意与前一个差别
//上述第3个方法,可用下列方法来代替
//$("#two").next("div").css("background-color","#0F0");
//上述第4个方法,可用下列方法来代替
//$("#two").nextAll("div").css("background-color","#0F0");
//nextAll方法相类似但有明显差别的是.siblings(),可以选择其所有的同辈元素
$("#two").siblings("div").css("background-color","#0F0");
});
</script>
</head>
<body>
<!--第1个div-->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">
class为mini的div
</div>
</div>
<!--第2个div-->
<div class="one" id="two" title="Jason">
id为two,class为one,title为jason的div.
<div class="mini" id="spanish" title="Spanish">
class为mini,title为Spanish的div
</div>
<div class="mini" title="Jason">
class为mini,title为Jason为div
<div class="mini">Hello</div>
</div>
</div>
<!--第3个div-->
<div class="one">
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini">class为mini的div</div>
<div class="mini"></div>
</div>
<!--第4个div-->
<div style="display:none" class="none">
style的display为"none"的div.
</div>
<!--第5个div-->
<div class="hide">
class为hide的div
</div>
<!--第6个div-->
<div>
包含input的type为"hidden"的div<br/>
<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素</span>
</body>
</html>