jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 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="./JQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
输入你的名字<input type="text">
<p>按键的次数<span>0</span></p>
<script>
//事件1.记录键盘按键的次数
i=0;
$(document).ready(function(){
$("input").keypress(function(){
$("span").text(i+=1);
});
});
//事件2.当键盘被按下时
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color","yellow");
//事件3.当键盘抬起时
$("input").keyup(function(){
$("input").css("background-color","pink");
});
});
});
</script>
</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="./JQuery/jquery-3.4.1.js"></script>
<style>
li{
list-style: none;
padding-left: 10px;
float: left;
}
.show{
background-color: red;
}
</style>
<script>
$(function(){
$("li").mousemove(function(){
$(this).css("background","red");
}).mouseout(function(){
$(this).css("background","white");
});
});
</script>
</head>
<body>
<ul>
<li>首页</li>
<li>主页</li>
<li>用户中心</li>
</ul>
</body>
</html>
当鼠标移动上面时
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">
<title>Document</title>
<script src="./JQuery/jquery-3.4.1.js"></script>
<style>
li{
list-style: none;
padding-left: 10px;
float: left;
}
.show{
background-color: red;
}
</style>
<script>
$(function(){
$("li").bind("mousemove",function() {
$(this).css("background-color","red");
});
});
</script>
</head>
<body>
<ul>
<li>首页</li>
<li>主页</li>
<li>用户中心</li>
</ul>
</body>
</html>