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>
Jquery操作事件
原文地址:https://www.cnblogs.com/zyxsblogs/p/10085477.html