<!DOCTYPE HTML>
<html>
<head>
<title>基本选择器</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
font-family: "微软雅黑";
}
div,span{
width:140px;
height:140px;
margin: 20px;
background: #9999CC;
border: 1px solid #000;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini{
width:40px;
height:43px;
background: #CC66FF;
border: 1px solid #000;
font-size: 12px;
font-family: Roman;
}
input{margin: 5px 5px;}
</style>
<!--引入jquery的js库-->
<script src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
//让整个页面加载完成
$(document).ready(function() {
/* ---------基本选择器练习--------- */
//改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1"
$("#b1").click(function(){
$("div").css("background-color","#FF69B4")
})
//改变 id 为 one 的元素的背景色为 #9ACD32" id="b2"
$("#b2").click(function(){
$("#one").css("background-color","#9ACD32")
})
//改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"
$("#b3").click(function(){
$(".mini").css("background-color","#FF0033")
})
//改变所有元素的背景色为 #FDF5E6" id="b4"
$("#b4").click(function(){
$("*").css("background-color","#FDF5E6")
})
//改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5"
$("#b5").click(function(){
$("span,#two").css("background-color","#FF1493")
})
//改变所有的<span>元素和 id 为 two 的,id为one的,class为 mini的所有的元素的背景色为 #006400" id="b6"
$("#b6").click(function(){
$("span,#two,#one,.mini").css("background-color","#006400")
})
});
</script>
</head>
<body>
<input type="button" value="改变元素名为 <div> 的所有元素的背景色为 #FF69B4" id="b1" />
<input type="button" value="改变 id 为 one 的元素的背景色为 #9ACD32" id="b2"/>
<input type="button" value="改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>
<input type="button" value="改变所有元素的背景色为 #FDF5E6" id="b4"/>
<input type="button" value="改变所有的<span>元素和 id 为 two 的元素的背景色为 #FF1493" id="b5"/>
<input type="button" value="改变所有的<span>元素和 id 为 two 的,id为one的,class为 mini的所有的元素的背景色为 #006400" id="b6"/>
<h1>天气冷了</h1>
<h2>天气又冷了</h2>
<div id="one">id为one</div>
<div id="two" class="mini">
id为two class是mini
<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>
<span class="spanone">span</span>
<span class="mini">span class是mini</span>
</body>
</html>