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>
原文地址：https://www.cnblogs.com/zyxsblogs/p/10085477.html
时间： 2024-10-09 16:51:41