Jquery事件操作
程序员文章站
2022-07-16 08:31:28
...
1. Jquery事件操作
1.1) 文档加载事件
1.2) DOM单击、双击事件
1.3) DOM获得焦点、失去焦点事件
1.4) DOM鼠标移入，移出事件
1.1) 文档加载事件
1.2) DOM单击、双击事件
1.3) DOM获得焦点、失去焦点事件
1.4) DOM鼠标移入，移出事件
chap04/demo01.html
<!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>