jQuery层级选择器
//层级选择器：
包含选择器：jQuery（“ancestor descendant”）
<body>
<form action="" method="post">
<input type="text" value=""/>
</form>
<script type="text/javascript">
$(function (){
$("form input").css("background-color","green");
})
</script>
</body>
//子选择器：
jQuery（“parent>child”）
//<body>
<div id="">
<img src="img/飘雪.jpg"/>
</div>
<script type="text/javascript">
$(function (){
$("div img").css("border","solid 5px green");
})
</script>
</body>
//相邻选择器：
jQuery（“prev+next”）
//
<body>
<div id="">
<img src="img/飘雪.jpg" width="200px" height="200px"/>
</div>
<img src="img/飘雪.jpg" width="200px" height="200px"/>
<img src="img/飘雪.jpg" width="200px" height="200px"/>
<img src="img/飘雪.jpg" width="200px" height="200px"/>
<img src="img/飘雪.jpg" width="200px" height="200px"/>
<script type="text/javascript">
$(function (){
$("div+img").css("border","solid 5px green");
})
</script>
</body>
//兄弟选择器：
jQuery（“prev-sibling”）
<body>
<div id="">
<img src="img/飘雪.jpg" width="200px" height="200px"/>
</div>
<img src="img/飘雪.jpg" width="200px" height="200px"/>
<img src="img/飘雪.jpg" width="200px" height="200px"/>
<img src="img/飘雪.jpg" width="200px" height="200px"/>
<img src="img/飘雪.jpg" width="200px" height="200px"/>
<script type="text/javascript">
$(function (){
$("div~img").css("border","solid 5px green");
})
</script>
</body>
浙公网安备 33010602011771号