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>
