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>