<!DOCTYPE HTML>
<html>
<head>
<title>层级选择器</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
div,span{
width:140px;
height:140px;
margin: 20px;
background: #9999CC;
border: 1px solid #000;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini{
font-size: 14px;
height:53px;
width:47px;
background: #CC66FF;
border: 1px solid #000;
font-family: Roman;
}
input{margin: 5px 5px;}
</style>
<!--引入jquery的js库-->
<script src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$().ready(function() {
/* ---------层级选择器练习--------- */
//改变 <body> 内所有 <div> 的背景色为 #F08080",字体颜色为绿色 id="b1"
$("#b1").click(function(){
$("body div").css({"background-color":"#F08080","color":"green"})
})
//改变 <body> 内子 <div> 的背景色为 #FF0033",字体颜色为绿色 id="b2"
$("#b2").click(function(){
$("body>div").css({"background-color":"#FF0033","color":"green"})
})
//改变 id 为 one 的下一个 <div> 的背景色为 #0000FF",字体颜色为绿色 id="b3"
$("#b3").click(function(){
$("#one+div").css({"background-color":"#0000FF","color":"green"})
})
//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32",字体颜色为蓝色 id="b4"
$("#b4").click(function(){
$("#two~div").css({"background-color":"#9ACD32","color":"blue"})
})
//改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347",字体颜色为蓝色 id="b5"
$("#b5").click(function(){
$("#two").siblings("div").css({"background-color":"#FF6347","color":"blue"})
})
})
</script>
</head>
<body>
<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #F08080" id="b1" οnclick="fn()"/>
<input type="button" value="改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
<input type="button" value="改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
<input type="button" value="改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 #9ACD32" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #FF6347" id="b5"/>
<h1>天气冷了</h1>
<div id="one">id为one</div>
<div id="two">
id为two
<div class="mini">calss是mini</div>
</div>
<div class="one">
calss是one
<div class="mini">class是mini</div>
<div class="mini">class是mini</div>
</div>
<div class="one">
class是one
<div class="mini01">calss是mini01</div>
<div class="mini">class是mini</div>
</div>
<br>
<div id="mover">动画</div>
<br>
</body>
</html>