jQuery 기본 선택 요소

29579 단어 jquery
  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>

좋은 웹페이지 즐겨찾기