前端基础 -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>

[jQuery] 前端基础 -JQuery之相关事件

相关帖子

假定某台电脑通过了图灵测试，则（）。

iOS全埋点解决方案-数据存储

Android 子线程 UI 操作真的不可以？

“整洁架构”和商家前端的重构之路

种草 Vue3 中几个好玩的插件和配置

appcrash事件怎么解决 win10appcrash事件解决方法

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

JavaScript怎样实现点击出现图片效果

利用html+js触发弹窗事件

绝代码农 LV4

[jQuery] 前端基础 -JQuery之 相关事件

相关帖子

假定某台电脑通过了图灵测试，则（）。

iOS全埋点解决方案-数据存储

Android 子线程 UI 操作真的不可以？

“整洁架构”和商家前端的重构之路

种草 Vue3 中几个好玩的插件和配置

appcrash事件怎么解决 win10appcrash事件解决方法

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

JavaScript怎样实现点击出现图片效果

利用html+js触发弹窗事件

绝代码农 LV4

[jQuery] 前端基础 -JQuery之相关事件