1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> 3 <head> 4 <title>ddd</title> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> 7 <style type="text/css"> 8 div,span{ 9 width: 140px; 10 height: 140px; 11 margin: 20px; 12 background: #9999CC; 13 border: #000 1px solid; 14 float:left; 15 font-size: 17px; 16 font-family:Roman; 17 } 18 19 div.mini{ 20 width: 30px; 21 height: 30px; 22 background: #CC66FF; 23 border: #000 1px solid; 24 font-size: 12px; 25 font-family:Roman; 26 } 27 </style> 28 <!--引入jquery的js库--> 29 30 </head> 31 32 <body> 33 34 <input type="button" value="保存" class="mini" name="ok" class="mini" /> 35 <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/> 36 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/> 37 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/> 38 <input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/> 39 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/> 40 41 42 <h1>天气冷了</h1> 43 <h2>天气又冷了</h2> 44 45 <div id="one"> 46 id为one 47 48 </div> 49 50 <div id="two" class="mini" > 51 id为two class是 mini 52 <div class="mini" >class是 mini</div> 53 </div> 54 55 <div class="one" > 56 class是 one 57 <div class="mini" >class是 mini</div> 58 <div class="mini" >class是 mini</div> 59 </div> 60 <div class="one" > 61 class是 one 62 <div class="mini01" >class是 mini01</div> 63 <div class="mini" >class是 mini</div> 64 </div> 65 66 <br> 67 <div id="mover" > 68 动画 69 </div> 70 <br> 71 <span class="spanone"> span 72 </span> 73 <span class="mini"> span 74 </span> 75 76 </body> 77 <script language="JavaScript"> 78 $().ready(function(){ 79 //<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/> 80 $("#b1").click(function(){ 81 $("#one").css("background-color","red"); 82 }); 83 //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/> 84 $("#b2").click(function(){ 85 86 $("div").css("background-color","red"); 87 88 }); 89 //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/> 90 $("#b3").click(function(){ 91 $(".mini").css("background-color","red"); 92 }); 93 //<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/> 94 $("#b4").click(function(){ 95 $("*").css("background-color","red"); 96 }); 97 //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/> 98 $("#b5").click(function(){ 99 $("span,#two").css("background-color","red"); 100 }); 101 }); 102 </script> 103 104 </html>
原文：http://www.cnblogs.com/friends-wf/p/3762528.html