Jquery에서 일반적으로 사용되는 이벤트는 무엇입니까?
- 青灯夜游원래의
- 2023-01-03 18:13:203328검색
jquery에서 일반적으로 사용되는 이벤트는 다음과 같습니다. 1. 창 이벤트 2. 마우스 이벤트는 사용자가 문서에서 마우스를 이동하거나 클릭할 때 생성되는 이벤트로 마우스 클릭, 이동 이벤트, 이동 이벤트 등을 포함합니다. .; 3. 키보드 이벤트는 키 누르기 이벤트, 키 놓기 이벤트 등을 포함하여 사용자가 키보드의 키를 누르거나 놓을 때마다 생성되는 이벤트입니다. 요소가 포커스를 얻고 포커스를 잃을 때 트리거됩니다. 양식이 제출될 때 Blur() 이벤트가 트리거되고 양식이 제출될 때 submit() 이벤트가 트리거됩니다.
이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.
1. jQuery 이벤트 분류
jQuery 이벤트는 JavaScript 이벤트를 요약한 것입니다. 일반적으로 사용되는 이벤트는 다음과 같이 분류됩니다.
1. 마우스 이벤트. 키보드 이벤트. 양식 이벤트.
2. 복합 이벤트는 여러 이벤트의 조합입니다.
마우스 커서를 올려보세요. 지속적인 마우스 클릭.
2. 마우스 이벤트
마우스 이벤트는 사용자가 문서에서 마우스를 움직이거나 클릭할 때 생성되는 이벤트입니다. 일반적으로 사용되는 마우스 이벤트는 다음과 같습니다.
요소가 포커스를 잃으면 focus() 이벤트가 트리거됩니다. Blur() 이벤트가 트리거됩니다.
양식이 제출되면 submit() 이벤트가 실행됩니다.
5. 종합예제
- 3. 키보드의 "Enter" 키를 누르면 양식 제출 이벤트가 트리거됩니다.
코드:
<!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="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>
효과:
[추천 학습:jQuery 비디오 튜토리얼
,
위 내용은 Jquery에서 일반적으로 사용되는 이벤트는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jquery에서 태그 속성 값을 바꾸는 방법다음 기사：jquery에서 태그 속성 값을 바꾸는 방법