Home > Article > Web Front-end > What are the commonly used events in jquery
What are the commonly used events in jquery
- 青灯夜游Original
- 2023-01-03 18:13:203280browse
Commonly used events in jquery are: 1. Window events; 2. Mouse events, which are events generated when the user moves or clicks the mouse on the document, including mouse clicks, move-in events, move-out events, etc. ; 3. Keyboard events are events generated every time the user presses or releases a key on the keyboard, including key press events, key release events, etc.; 4. Form events, such as focus() being triggered when an element gains focus Event, the blur() event will be triggered when the focus is lost, and the submit() event will be triggered when the form is submitted.
The operating environment of this tutorial: windows7 system, jquery3.6 version, Dell G3 computer.
1. Classification of jQuery events
jQuery events are encapsulations of JavaScript events. Commonly used events are classified as follows:
1. Basic events
window events . Mouse events. Keyboard events. Form events.
2. A compound event is a combination of multiple events
Hover the mouse cursor. Continuous mouse clicks.
2. Mouse events
Mouse events are events generated when the user moves or clicks the mouse on the document. Commonly used mouse events are:
3. Keyboard events
An event will be generated every time the user presses or releases a key on the keyboard. Commonly used keyboard events are as follows:
4. Form events
When the element gains focus, the focus() event will be triggered. When the element loses focus, the blur() event will be triggered.
The submit() event will be triggered when the form is submitted.
5. Comprehensive example
Requirement description:
- 1. User name When the input box gains focus, the background color of the input box is light blue, and when it loses focus, it returns to the white background color.
- 2. The font becomes thicker when the mouse is moved to the login button, and returns to normal when the mouse is moved out.
3. The form submission event is triggered when the "Enter" key of the keyboard is pressed.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件演示示例</title>
<style type="text/css">
#login{
width: 400px;
height: 250px;
background-color: #f2f2f2;
border:1px solid #DDDDDD;
padding: 5px;
}
#login fieldset {
border: none;
margin-top: 10px;
}
#login fieldset legend{
font-weight: bold;
}
#login fieldset p{
display: block;
height: 30px;
}
#login fieldset p label {
display: block;
float:left;
text-align: right;
font-size: 12px;
width: 90px;
height: 30px;
line-height: 30px;
}
#login fieldset p input {
display: block;
float:left;
border: 1px solid #999;
width: 250px;
height: 30px;
line-height: 30px;
}
#login fieldset p input.code{
width: 60px;
}
#login fieldset p img{
margin-left: 10px;
}
#login fieldset p a{
color: #057BD2;
font-size: 12px;
text-decoration: none;
margin: 10px;
}
#login fieldset p input.btn{
background: url("./images/login.gif") no-repeat;
width: 98px;
height: 32px;
margin-left: 60px;
color: #ffffff;
cursor: pointer;
}
#login fieldset p input.input_focus{
background-color: #BEE7FC;
}
</style>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 用户名输入框的焦点事件
$("input[name='member']").focus(function(){
$(this).addClass("input_focus");
});
// 用户名失去焦点
$("input[name='member']").blur(function(){
$(this).removeClass("input_focus");
});
// 鼠标移入移出事件
$(".btn").mouseover(function(){
$(this).css("font-weight","bold");
});
$(".btn").mouseout(function(){
$(this).css("font-weight","normal");
});
// 键盘事件，敲击回车键进行表单提交，keyCode的数值代表不同的键盘按键
// js需要区分keyCode(IE)和which(FF)的兼容性，event.keyCode||event.which用来考虑兼容性
$(document).keypress(function(e){
if(e.keyCode==13){
//$("#login").submit();
// 模拟表单提交
alert("触发表单的提交事件");
}
});
});
</script>
</head>
<body>
<form id="login">
<fieldset>
<legend>用户登录</legend>
<p>
<label>用户名：</label>
<input name="member" type="text" />
</p>
<p>
<label>密码：</label>
<input name="password" type="text" />
</p>
<p>
<label>验证码：</label>
<input name="code" type="text" class="code" />
<img src="images/code.gif" style="max-width:90%" style="max-width:90%" / alt="What are the commonly used events in jquery" ><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >换一张</a>
</p>
<p>
<input name="" type="button" class="btn" value="登录" />
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a><span>|</span><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘记密码？</a>
</p>
</fieldset>
</form>
</body>
</html>Effect:
[Recommended learning: jQuery video tutorial、webfront-end video】
The above is the detailed content of What are the commonly used events in jquery. For more information, please follow other related articles on the PHP Chinese website!