<!DOCTYPE>
<html>
<head>
<title>基本選擇器練習(xí)</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: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 40px;
height: 43px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
input{ margin: 5px 5px; }
</style>
<!--引入jquery的js庫-->
<script src="D:\workspace\jquery\jquery-1.4.2.js"></script>
<script type="text/javascript">
//讓整個頁面加載完成
$(document).ready(function() {
/* ---------基本選擇器練習(xí)--------- */
//改變元素名為 <div> 的所有元素的背景色為 #FF69B4" id="b1"
/*
document.getElementById("b1").onclick = function(){}
*/
$("#b1").click(function(){
$("div").css("background","#FF69B4");
});
//改變 id 為 one 的元素的背景色為 #9ACD32" id="b2"
$("#b2").click(function(){
$("#one").css("background","#9ACD32");
});
//改變 class 為 mini 的所有元素的背景色為 #FF0033" id="b3"
$("#b3").click(function(){
$(".mini").css("background","#FF0033");
});
///改變所有元素的背景色為 #FDF5E6" id="b4"
$("#b4").click(function(){
$("*").css("background","#FDF5E6");
});
//改變所有的<span>元素和 id 為 two 的元素的背景色為 #FF1493" id="b5"
$("#b5").click(function(){
$("span,#two").css("background","#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"> class是 mini</div>
</div>
class是 one
<div class="mini"> class是 mini</div>
<div class="mini"> class是 mini</div>
</div>
class是 one
<div class="mini01"> class是 mini01</div>
<div class="mini"> class是 mini</div>
</div>
<br>
<br>
<span class="spanone"> span </span>
<span class="mini"> span class是mini </span>
</body>
</html>
