前端基础 -JQuery之 相关事件
JQuery 事件jquery事件绑定：
[*] js方式：
1通过标签的事件属性进行绑定
2.获取对象
对象.事件属性 = function(){
函数体
}
[*] jquery方式：
获取jquery对象
jquery对象.事件方法(function(){
函数体
})
[*] jquery事件：
submit()
clcik()
focus()
blur()
change()
案例：
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<style type="text/css">
#e02 {
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#e01").blur(function() {
$("#textMsg").html("文本框失去焦点：blur");
}).focus(function() {
$("#textMsg").html("文本框获得焦点：focus");
}).keydown(function() {
$("#textMsg").append("键盘按下：keydown");
}).keypress(function() {
$("#textMsg").append("键盘按：keypress");
}).keyup(function() {
$("#textMsg").append("键盘弹起：keyup");
});
var i = 0;
$("#e02").mouseover(function() {
$("#divMsg").html("鼠标移上：mouseover");
}).mousemove(function() {
//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
}).mouseout(function() {
$("#divMsg").html("鼠标移出：mouseout");
}).mousedown(function() {
$("#divMsg").html("鼠标按下：mousedown");
}).mouseup(function() {
$("#divMsg").html("鼠标弹起：mouseup");
});
$("#e03").click(function() {
$("#buttonMsg").html("单击：click");
}).dblclick(function() {
$("#buttonMsg").html("双击：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02"></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击" /><span id="buttonMsg"></span> <br/>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_15294985/2999140
页:
[1]