JQuery事件:
- jQuery事件就是对JavaScript事件封装以方便代码书写和使用,常用的事件分类如下:
基础事件
- 鼠标事件
- 键盘事件
- 表单事件
复合事件 是多个事件的组合
-
鼠标光标悬停
-
鼠标连续点击
一 鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件,常用鼠标事件有:
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标光标悬停事件</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
li{
list-style: none;
float: left;
padding: 0 5px;
}
.color{
background-color: blue;
}
</style>
<script>
$(function(){
// 触发鼠标移过时的事件
$("li").mouseover(function(){
$(this).addClass("color");
});
// 触发鼠标移出时的事件
$("li").mouseout(function(){
$(this).removeClass();
});
});
</script>
</head>
<body>
<ul>
<li>首页</li>
<li>游戏</li>
<li>电影</li>
<li>动漫</li>
<li>动画片</li>
</ul>
</body>
</html>
二 键盘事件
用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件有:
例如:
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery-1.8.3.js"></script>
</head>
<body>
<script>
$(function () {
$("[type=password]").keydown(function () {
$("#show").append("keydown");
}).keyup(function () {
$("#show").append("keyup");
}).keypress(function () {
$("#show").append("keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") {
// 13是键盘Enter键
alert("确认要提交吗??");
}
});
});
</script>
账号<input type="text" name="userName"><br>
密码<input type="password" name="psw"><br>
<input type="submit" value="提交"><br>
<span id="show"></span>
</body>
</html>
三 表单事件
当元素获得焦点时,会触发focus事件,失去焦点时,会触发blur事件,详见下表:
例如
四 绑定事件
除了使用事件名绑定事件外,还可以使用bind()方法
五 绑定多个事件
六 移除事件
七 鼠标光标悬停事件
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery/jquery-3.4.1.js"></script>
<title>鼠标光标悬停事件</title>
<style>
li{
list-style: none;
float: left;
padding: 0 10px;
}
.ulcontent{
list-style: none;
float: none;
}
</style>
<script>
$(function(){
$("li").hover(function(){
$("#show").css("display","block")
},
function(){
$("#show").css("display","none")
});
});
</script>
</head>
<body>
<ul>
<li>首页</li>
<li>电器</li>
<li>
数码产品
<ul id="show">
<li class="ulcontent">手机</li>
<li class="ulcontent">蓝牙耳机</li>
<li class="ulcontent">电脑</li>
</ul>
</li>
<li>服装</li>
</ul>
</body>
</html>