Events in the webpage
• Event page is the basis for implementation and user interaction
such as tab-page switching effect can be achieved by a mouse click
event in jQuery
jQuery event is a package of JavaScript events, popular events are classified as follows:
(1) Base Events
· Mouse events
, keyboard events
, and form events
(2) Compound events are a combination of multiple events
, mouse cursor hover
, and continuous
mouse click events.
Mouse events are events that occur when the user moves or clicks the mouse on the document. Commonly used mouse The events are:
Example: realize the main navigation special effect
Take mouseoverO as an example to realize the special effect when the mouse moves over.
Code display:
<!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 type="text/javascript" src="js/jquery-1.8.3.js"></script>
<style>
li{
list-style: none;
float: left;
text-decoration: none;
padding: 0px 10px;
}
.showl{
background-color: blueviolet;
}
</style>
</head>
<body>
<script>
$(function(){
$("li").mouseover(function(){
//当鼠标移动到导航栏是触发
$(this).addClass("showl") //添加一个样式
})
$("li").mouseout(function(){
//当鼠标移出导航栏时触发
$(this).removeClass() //移除样式
})
})
</script>
<ul>
<li>首页</li>
<li>电器</li>
<li>服饰</li>
<li>生活用品</li>
</ul>
</body>
</html>
Keyboard events An event
is generated every time the user presses or releases a key on the keyboard. Commonly used keyboard events are:
Take keydown () as an example to achieve special effects when keying.
Code display:
<!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 type="text/javascript" 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"){
//如果是回车键
alert("确认要提交吗?")
}
})
})
</script>
用户名<input type="text" name="userName" /><br>
密码<input type="password" name="pwd" /><br>
<input type="submit" value="提交"><br>
<span id="show"></span>
</body>
</html>
Form event
When an element gains focus, it will trigger a focus event. When it loses focus, it will trigger a blur event. For details, see the following table:
Code display:
Take focus () as an example. The special effect
binding event when the focus is obtained is not only bound
by the event name. In addition to certain events, you can also use the bind() method. The
bind() method can also bind methods for multiple events
<!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 type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<script>
$(function(){
// $("#show").bind("click",function(){
// $("p").css("background-color","red")
// })
$("p").bind({
mouseover:function(){
$("p").css("color","red")
},mouseout:function(){
$("p").css("color","black")
}
})
})
</script>
<h1>壹基金</h1>
<h3>简介</h3>
<p>2007年，李连杰先生创立启动了壹基金。深圳壹基金公益基金会2010年12月3日再深圳注册成立，是中国第一家民间公募基金会。
</p>
<h3>战略及策略</h3>
<p>壹基金的公益愿景为尽执所能，人人公益""。壹基金战略横式为“个平台+三个领城、即搭建专业远明的查基金公益平台。
</p>
<h3>公益活动</h3>
<ul>
<li>为爱同行</li>
<li>关注自闭儿童</li>
<li>雅安地震救援</li>
</ul>
<button id="show">点我变颜色</button>
</body>
</html>
Remove event
Remove event uses the unbind() method, the syntax is as follows:
when unbind() has no parameters, it means to remove all bound events.
Mouse cursor hover event
hover() method is equivalent to mouseover and mouseout events Combination
code display:
<!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 type="text/javascript" src="js/jquery-3.4.1.js"></script>
<style>
li{
list-style: none;
float: left;
text-decoration: none;
padding: 0px 10px;
}
#show li{
list-style: none;
float: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#dian").hover(function(){
$("#show").css("display","block")
},function(){
$("#show").css("display","none")
})
})
</script>
<ul>
<li>我的订单</li>
<li id="dian">我的易美惠
<ul id="show" style="display: none;">
<li>我的优惠券</li>
<li>收藏夹</li>
<li>短消息</li>
</ul>
</li>
<li>网站导航</li>
</ul>
</body>
</html>