JQuery复习之JQuery 事件操作

痛定思痛。 2022-05-23 06:38 204阅读 0赞

#### 今日目录： ####

1、文档加载事件

2、DOM 单击、双击事件

3、DOM 获得焦点、失去焦点事件

4、DOM 鼠标移入，移出事件

#### 一、文档加载事件 ####

![70][]

#### 二、DOM 单击、双击事件 ####

![70 1][]

#### 三、DOM 获得焦点、失去焦点事件 ####

![70 2][]

#### 四、DOM 鼠标移入，移出事件 ####

![70 3][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		// alert("文档加载完毕");
    		
    		$("#zs").click(function(){
    			$("#p1").html("<font color=red>张三被点了</font>");
    		});
    		
    		$("#zs").dblclick(function(){
    			$("#p1").html("<font color=red>张三被双击了</font>");
    		});
    		
    		$("#t1").focus(function(){
    			$("#t1").val("获取焦点");
    		});
    		
    		$("#t1").blur(function(){
    			$("#t1").val("失去焦点");
    		});
    		
    		$("#d1").mouseover(function(){
    			$("#d1").html("鼠标移入");
    		});
    		
    		$("#d1").mouseout(function(){
    			$("#d1").html("鼠标移出");
    		});
    	});
    </script>
    </head>
    <body>
    <input type="button" id="zs" value="张三"/>
    <p id="p1"></p>
    <input type="text" id="t1"/>
    <hr/>
    <div id="d1" style="border: 1px solid red;width: 100px;height: 100px;"></div>
    </body>
    </html>

添加小编微信可以获取免费资源，二维码

![70 4][]

要用到的工具，关注 公众号直接免费获取：

![70 5][]

[70]: /images/20220523/2f0055543b5c4b238c7f594fbf6b96b6.png
[70 1]: /images/20220523/4417221c175847cb9761e6e3d067cc29.png
[70 2]: /images/20220523/863ef0335252437cab533eaea2a3991e.png
[70 3]: /images/20220523/ce15c85e001b431bb88a6488e494cc9b.png
[70 4]: /images/20220523/43affa24d2f24d759dd233064a34b48f.png
[70 5]: /images/20220523/c3a692cb4888484db6e752a47a5c666a.png