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>
