jQuery的事件处理
脚本语言有了事件就有了“灵魂”,可见事件对于脚本语言是多么的重要。这是因为事件使得页面具有动态性和响应性。如果没有事件,将很难完成页面与用户之间的交互。
jQuery有效地简化了JavaScript的编程。jQuery的事件机制是事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
- 什么是jQuery的事件机制:
jQuery的事件机制在jQuery框架中起着重要的作用。jQuery的事件处理方法是jQuery中的核心函数。通过jQuery的事件处理机制,可以创造自定义的行为,比如改变样式、效果显示、提交等,使网页效果更加丰富。
jQuery的事件处理机制包括页面加载、事件绑定、事件委派、事件切换四种机制。
-切换事件:
在一个元素上绑定了两个以上的事件,在各个事件之间进行的切换动作。
如:当鼠标放置在图片上时触发一个事件,当鼠标单击后又触发一个事件,可以用切换事件来实现。
在jQuery中,有两种方法用于事件的切换:hover()、toggle()。
当需要设置在鼠标悬停和鼠标移出的事件中进行切换时,使用Hover()方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".div1").hover(function(){
$(".clsContent").show();
});
});
</script>
</head>
<body>
<div class="clsContent" style="display: none;">陌上人如玉</div>
<div class="div1" style="background: blueviolet;height: 100px;width: 200px;position: absolute;"></div>
</body>
</html>
网页显示效果为:
图1
切换事件可以绑定两个或更多函数。当指定元素被点击时,在两个或多个函数之间轮流切换。
如果规定了两个以上的函数,则toggle()方法将切换 所有函数。例如:如果存在三个韩顺,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数,以此类推。
- 页面加载响应事件:
jQuery中的$(document).ready()事件是页面加载响应事件。ready()是jQuery事件模块中最重要的一个函数。这个方法可以看作是对window.onload注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有的JavaScript函数都需要在那一刻执行。ready()函数仅能用于当前文档,因此无需选择器。
ready()函数的语法格式有如下三种:
$(document).ready(function);
$().ready(function);
$(fucntion);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn1").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>陌上人如玉</p>
<button class="btn1">点击</button>
</body>
</html>
网页显示效果为:
图2
- jQuery中的事件函数
日常开发中常见的键盘操作包括
keydown() 按下键盘上某个按键时触发
keyup() 按下某个按键并产生字符时触发
keypress() 释放某个按键时触发
完整的按键过程应该分为两步:首先按键被按下;然后按键被释放并复位。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input").keydown(function(){
$("input").css("background-color","yellow");
});
$("input").keyup(function(){
$("input").css("background-color","red");
});
});
</script>
</head>
<body>
Enter your name:<input type="text" />
<p>当发生keydown和keyup事件时,输入域会 改变颜色。</p>
</body>
</html>
网页显示效果为:
图3
keypress()事件与keydown()事件类似。当按键被按下时,会发生该事件。它发生在当前获得焦点的元素上。不过,与Keydown事件不同,每插入一个字符,就会发生keypress()事件。keypress()方法触发keypress()事件,或规定当发生keypress事件时运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var i=0;
$(document).ready(function() {
$("input").keypress(function(){
$("span").text(i+=1);
});
});
</script>
</head>
<body>
Enter your name:<input type="text" />
<p>Keypresses:<span>0</span></p>
</body>
</html>
网页显示效果为:
图4
- 鼠标操作事件:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var i=0;
$(document).ready(function(){
$(document).mousemove(function(e) {
$("span").text( "(" + e.pageX + "," + e.pageY + ")");
});
});
</script>
</head>
<body>
<p>鼠标当前坐标:<span></span>.</p>
</body>
</html>
网页显示效果为:
图5
使用mouseover和mouseout函数:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function() {
$("p").css("background-color","yellow");
});
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4")
});
});
</script>
</head>
<body>
<p style="background-color: #E9E9E4;">请把鼠标指针移动到这个段落上</p>
</body>
</html>
网页显示效果为:
图6
click()单击事件
dblclick()双击事件
jQuery的功能函数
jQuery提供了对元素进行遍历、筛选、合并等操作的函数。
<!DOCTYPE html>
<html>
<head>
<title>合并数组</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
var first = ['A','B','C','D'];
var second = ['E','F','G','H'];
$("p:eq(0)").text("数组a:" + first.join());
$("p:eq(1)").text("数组b:" + second.join());
$("p:eq(2)").text("合并数组:" + ($.merge($.merge([],first),second)).join());
});
</script>
</head>
<body>
<p></p><p></p><p></p>
</body>
</html>
网页显示效果为:
图7
对于数组和对象的操作,主要包含元素的遍历、筛选、合并。
(1) each()方法用于为每个匹配元素规定运行的函数。可以使用each()方法来遍历数组和对象。
<!DOCTYPE html>
<html>
<head>
<title>合并数组</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text());
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>123</li>
<li>789</li>
<li>345</li>
<li>wrt</li>
</ul>
</body>
</html>
网页显示效果为:
图8
(2) grep()方法用于数组元素过滤筛选。
grep(array,fn,invert)
array:待过滤数组。
fn:过滤函数。
<!DOCTYPE html>
<html>
<head>
<title>合并数组</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var Array = [1,2,3,4,5,6,7];
var Result = $.grep(Array,function(value){
return (value>2);
});
document.write("原数组:" + Array.join() + "<br>");
document.write("筛选大于2的结果:" + Result.join());
</script>
</head>
<body>
</body>
</html>
网页显示效果为:
图9
jQuery插件的开发与使用
编写插件的目的是给已有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护。
jQuery插件就是JS包。
拖动方块插件:
<!DOCTYPE html>
<html>
<head>
<title>合并数组</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<style type="text/css">
.block{
border: 2px solid #760022;
background-color: #ffb5bb;
width: 80px;
height: 25px;
margin: 5px;
float: left;
padding: 20px;
text-align: center;
font-size: 14px;
}
</style>
<script type="text/javascript">
$(function(){
for(var i=0; i<2; i++){
$(document.body).append($("<div class='block'>拖块" + i.toString() + "</div>").css("opacity",0.6));
}
$(".block").draggable();
});
</script>
</head>
<body>
</body>
</html>
网页显示效果为:
图10