版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_20042935/article/details/88561039
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>