1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Insert title here</title>
 6         <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 7         <script type="text/javascript">
 8             //jQuery的页面加载完成时触发的事件
 9             $(document).ready(function(){
10                 //$(button)这个是默认取得是id选择器
11                 $(button).click(function(){
12                     alert("已经点击按钮了");
13                     
14                 });
15                 
16                 //$("#button1")这个是明确用id选择器
17                 $("#button1").click(function(){
18                     $(button1).css("color", "red");
19                 });
20                 
21                 //$(".button2")这个是用class选择器
22                 $(".button2").click(function(){
23                     $(".button2").css("background-color", "red");
24                 });
25                 
26                 //$("input[class='button3']")这个是用属性选择器
27                 $("input[class='button3']").click(function(){
28                     $("input[class='button3']").css("background-color", "blue");
29                 });
30                 
31                 //$("a")这个是标签选择器
32                 $("a").click(function(){
33                     alert($("a"));
34                 });
35             });
36             
37             //dom对象的页面加载完成时触发的事件
38             /* window.onload=function(){
39                 alert("bb");
40             } */
41         </script>
42     </head>
43     <body>
44         <input type="button" id="button" value="按钮"/>
45         <input type="button" id="button1" value="点击我，把我文字变成红色"/>
46         <input type="button" class="button2" value="点击我，把我背景变成红色"/>
47         <input type="button" class="button3" value="点击我，把我背景变成蓝色"/>
48         <a href="">获取我的类型</a>
49     </body>
50 </html>