//层级选择器:
包含选择器: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>