jQuery基本选择元素

浏览数：22 / 时间：2015年06月09日

  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>