1、文档加载事件
2、DOM单击双击事件
3、DOM获得焦点，失去焦点问题
4、DOM鼠标移入，移出事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Jquery操作DOM节点</title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 //alert("文档加载完毕！");//文档加载 10 $("#zs").click(function (){ 11 $("#p1").html('<font color=red>张三被点了！</font>');//单击事件 12 }) 13 $("#zs").dblclick(function(){ 14 $("#p1").html('<font color="blue">张三被双击了！</font>'); //双击事件 15 }) 16 //焦点事件 17 $("#t1").focus(function (){ 18 $("#t1").val("获得焦点事件！"); 19 }) 20 //失去焦点事件 21 $("#t1").blur(function(){ 22 $("#t1").val("失去焦点事件！"); 23 }) 24 //鼠标移入事件 25 $("#d1").mouseover(function(){ 26 $("#d1").html("鼠标移入"); 27 }) 28 //鼠标移除事件 29 $("#d1").mouseout(function(){ 30 $("#d1").html("鼠标出去了！"); 31 }) 32 }); 33 </script> 34 </head> 35 <body> 36 <input id="zs" value="张三" name="zs" type="button"></input> 37 <p id="p1"></p> 38 <input id="t1" type="text" name="t1" /> 39 <div id="d1" style="border:1px solid red; width:100px;height:100px"></div> 40 </body> 41 </html>