jquery学习之1-选择器-优快云博客

 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6     <title>11</title>    
 7   <script type="text/javascript" src="js/jquery-1.11.0.js">
 8   </script>
 9   <script language="javascript">
10    $(document).ready(function()
11   {
12       alert("欢迎来到baseselector页面");
13       
14       //***********************改变id为button1的背景颜色********
15      $("#bt1").click(
16      function()
17      {    
18       $("#div1").css("background","green");     
19      }
20      );
21       
22       $(".bt2").click(
23      function()
24      {
25       $(".div2").css("background","pink");     
26      }
27      );
28       $("#bt3").click(function()
29       {
30           $("div").css("background","grey");
31       });
32       
33   });
34   
35   //****************************************************** 
36   </script>
37   </head> 
38   <body>
39     <input type="button"  id="bt1" value="改变div1背景颜色为绿色" ></input>
40     <input type="button" class="bt2" value="改变div2背景色为粉色" ></input>
41     <input type="button"  id="bt3" value="改变所有div背景颜色为黑色" ></input>
42     
43     <div id="div1" style="background:grey;border:1px solid;width:20%;height:30%;float:left">div1</div> 
44      <div class="div2"  style="background:white;border:1px solid;width:20%;height:30%;float:left"><p>p1第一段</p>p2第二段<p></p></div>
45      <br>
46   </body>
47 </html>