jQuery事件与动画超详细讲解

jQuery事件

常用事件

jQuery事件是对JavaScript事件的封装,常用事件分类:

1、基础事件

  • 鼠标事件
  • 键盘事件
  • window事件
  • 表单事件

2、复合事件

  • 鼠标光标悬停
  • 鼠标连续点击

鼠标事件

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>鼠标事件</title>
	<script src="js/jQuery-3.6.1.js"></script>
	<style>
	div {
	width: 500px;
	height: 300px;
	border: 1px solid #f00;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
	<script>
	$(function() {
	//给div元素绑定click事件
	$('div').click(function(){
	$('div').css('background-color','#ccc');
	});
	//给div元素绑定mouseover事件
	$('div').mouseover(function(){
	$('div').css('border-radius','50px');
	});
	//给div元素绑定mouseout事件
	$('div').mouseout(function(){
	$('div').css('border-radius','0px');
	});
	//给div元素绑定鼠标单击事件
	$('div').dblclick(function(){
	$('div').css('border-color','#0f0');
	});
	});
	</script>
</html>

运行效果:

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件,常用键盘事件如下:

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/jQuery-3.6.1.js"></script>
	<style>
	div {
	width: 500px;
	height: 300px;
	border: 1px solid #f00;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
	<script>
	$(function() {
	//给div元素绑定keydown事件
	$(document).keydown(function(event) {
	if (event.key == 'p') {
	$('div').css('background-color', '#ccc');
	}
	});
	//给div元素绑定keyup事件
	$(document).keyup(function(event) {
	if (event.key == 'p') {
	$('div').css('background-color', '#0f0');
	}
	});
	//给div元素绑定keypress事件
	$(document).keypress(function(event) {
	if (event.key == 'o') {
	$('div').css('background-color', '#00f');
	}
	});
	});
	</script>
</html>

运行效果:

绑定事件

在jQuery中通过on()对事件进行绑定,相当于标准DOM的addEventListener(),使用方法也基本相同。

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title>绑定和移除事件</title>
	<script src="js/jQuery-3.6.1.js"></script>
	<style>
	div {
	width: 500px;
	height: 300px;
	border: 1px solid #f00;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
	<script>
	$(function() {
	$('div').on({
	'mouseenter': function() {
	$('div').css('background-color', '#0f0');
	},
	'mouseleave': function() {
	$('div').css('border-radius', '50%');
	}
	});
	});
	</script>
</html>

运行效果:

删除事件

在jQuery中采用off()来删除事件,该方法可以接收可选的参数,表示删除某单个事件;也可以不设置任何参数,就表示移除元素上的所有事件。

无参数的案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title>绑定和移除事件</title>
	<script src="js/jQuery-3.6.1.js"></script>
	<style>
	div {
	width: 500px;
	height: 300px;
	border: 1px solid #f00;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
	<script>
	$(function() {
	$('div').on({
	'mouseenter': function() {
	$('div').css('background-color', '#0f0');
	},
	'mouseleave': function() {
	$('div').css('border-radius', '50%');
	}
	});
	//off():移除事件的函数,如果函数中没有参数,就表示移除元素上的所有事件
	$('div').off();
	});
	</script>
</html>

运行效果:

用off()方法时,鼠标移入和移除的事件都被移除了。

将上述代码中的off()方法添加一个参数,比如:

$('div').off('mouseenter');

此时的运行效果如下:

复合事件

hover()方法

相当于mouseover与mouseout事件的组合

语法:hover(enter,leave);

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>hover()</title>
	<script src="js/jQuery-3.6.1.js"></script>
	<style>
	div {
	width: 300px;
	height: 300px;
	background-color: aquamarine;
	}
	</style>
	</head>
	<body>
	<button>移入移出按钮</button>
	<div></div>
	</body>
	<script>
	//可以使用hover()函数模拟鼠标移入移出
	$('button').hover(function(){
	$('div').hide();
	},function(){
	$('div').show();
	});
	</script>
</html>

运行效果:

toggle()方法

用于模拟鼠标连续click事件

语法:toggle(fn1,fn2,…,fnN);

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>toggle()</title>
	<script src="js/jquery-1.8.3.min.js"></script>
	<style>
	div{
	width: 800px;
	height: 500px;
	border: 3px solid #f00;
	}
	</style>
	</head>
	<body>
	<div></div>
	</body>
	<script>
	$('div').toggle(function(){
	$('div').css('background-color','#f00');
	},function(){
	$('div').css('background-color','#0f0');
	},function(){
	$('div').css('background-color','#00f');
	});
	</script>
</html>

运行效果:

jQuery动画

jQuery动画中相关函数可以说是为其添加了亮丽的一笔。我们可以通过简单的函数实现很多特效,这在以往是需要编写大量的JavaScript的动画的相关知识。

思维导图:

显示隐藏

  • show() 显示
  • hide() 隐藏
  • toggle() 显示隐藏切换

对于动画和特效而言,元素的显示和隐藏可以说是使用很频繁的特效。

在普通的JavaScript编程中,实现元素的显示或隐藏通常是利用对应CSS代码中的display属性或visibility属性。而在jQuery中提供了 s h o w ( ) show() show()和 h i d e ( ) hide() hide()两个方法,用于直接实现元素的显示和隐藏。

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>显示隐藏</title>
	<script src="js/jQuery-3.6.1.js"></script>
	<style>
	div{
	width: 300px;
	height: 200px;
	background-color: #f00;
	display: none;
	}
	</style>
	</head>
	<body>
	<button>点击一下</button>
	<div></div>
	</body>
	<script>
	$('button').click(function(){
	$('div').show(3000,function(){
	alert('我已经完全显示起来了');
	});
	});
	</script>
</html>

运行效果:

jQuery中还提供了toggle()方法,不带参数的它使得元素可以在show()和hide()之间切换。带参数的,我们在上面说过。

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>toggle()</title>
	<script src="js/jquery-1.8.3.min.js"></script>
	<style>
	div{
	width: 800px;
	height: 500px;
	border: 3px solid #f00;
	}
	</style>
	</head>
	<body>
	<button>点我一下</button>
	<div></div>
	</body>
	<script>
	$('div').toggle(function(){
	$('div').css('background-color','#f00');
	},function(){
	$('div').css('background-color','#0f0');
	},function(){
	$('div').css('background-color','#00f');
	});
	$('button').click(function(){
	$('div').toggle();
	});
	</script>
</html>

toggle()和toggleClass()总结:

淡入淡出

  • fadeIn() 显示
  • fadeOut() 隐藏
  • fadeTo(duration,opcity,callback) 自定义变化透明度,其中opacity的 取值范围为0.0~1.0

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>动画效果</title>
	<script src="js/jQuery-3.6.1.js"></script>
	<style>
	div{
	width: 300px;
	height: 200px;
	background-color: #f00;
	/* display: none; */
	}
	</style>
	</head>
	<body>
	<button>点击一下</button>
	<div></div>
	</body>
	<script>
	$('button').click(function(){
	$('div').fadeOut(3000,function(){
	alert('我已经完全隐藏起来了');
	});
	});
	</script>
</html>

运行效果:

幻灯片特效

  • slideUp()
  • slideDown()

模拟PPT中的幻灯片“拉窗帘”特效。

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>动画效果</title>
	<script src="js/jQuery-3.6.1.js"></script>
	<style>
	div{
	width: 300px;
	height: 200px;
	background-color: #f00;
	/* display: none; */
	}
	</style>
	</head>
	<body>
	<button>点击一下</button>
	<div></div>
	</body>
	<script>
	$('button').click(function(){
	$('div').slideUp(3000,function(){
	alert('我已经完全隐藏起来了');
	});
	});
	</script>
</html>

运行效果:

自定义动画

考虑到框架的通用性以及代码文件的大小,jQuery没有涵盖所有的动画效果。但它提供了animate()方法,能够让开发者自定义动画。

常用形式:

animate(params,[duration],[easing],[callback]);

需要特别指出,params中的变量名要遵循JavaScript对变量名的要求,因此不能出现连字符“-”。例如CSS中的属性名padding-left就要改为paddingLeft,也就是遵循“小驼峰命名”规则。另外,params表示的属性只能是CSS中用数值表示的属性,例如width、top、opacity等,像backgroundColor这样的属性不被animate()支持。

案例代码:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script>
	$(document).ready(function() {
	$("button").click(function() {
	$("div").animate({
	left: '250px'
	});
	});
	});
	</script>
	</head>
	<body>
	<button>开始动画</button>
	<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
	</div>
	</body>
</html>

运行效果:

作者:Java Fans原文地址:https://hh419.blog.csdn.net/article/details/127909156

%s 个评论

要回复文章请先登录注册