jQuery事件与特效

import java.lx

于 2022-09-29 20:50:25 发布

阅读量366

点赞数 1

文章标签： jquery javascript 前端学习

本文链接：https://blog.csdn.net/qq_51810428/article/details/127078277

版权

jQuery中的事件

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

基础事件

鼠标事件

键盘事件

window事件

表单事件

复合事件

鼠标光标悬停

鼠标连续点击

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

鼠标事件方法的区别

方法	相同点	不同点
mouseover( )	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时：触发mouseover( ) 不触发mouseenter
mouseenter( )
mouseout( )	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时：触发mouseout 不触发mouseleave
mouseleave( )

键盘事件

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

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

绑定事件与移除事件

绑定事件（由于jQuery版本的不同，函数也不一样，示例使用3.6.1版本）

绑定单个事件

同时绑定多个事件

移除事件（示例同上）

移除所绑定的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			div {
				width: 300px;
				height: 200px;
				border: 1px solid #f00;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script>
		
		$(function(){
			//使用on()绑定一个事件
			// $('div').on('mouseover',function(){
			// 	$(this).css('background-color','#ccc');
			// });
			
			
			//使用on()绑定一个事件
			$('div').on({
				'mouseover':function(){
					$(this).css('background-color','#ccc');
				},
				'mouseout':function(){
					$(this).css('background-color','#f00');
				}
			});
			
			//使用off()移除div元素上的所有事件
			// $('div').off();
			//使用off()移除div元素上的鼠标移出事件
			$('div').off('mouseout','');
	
		});
	</script>
</html>

复合事件

hover()方法

hover()方法相当于mouseover与mouseout事件的组合

语法：

hover(enter,leave);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			div {
				width: 300px;
				height: 200px;
				border: 1px solid #f00;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	<script>
		$(function(){
			$('div').hover(function(){
				$('div').css('background-color','#ccc');
				
			},function(){
				$('div').css('background-color','#00f');
			});
		});
	</script>
</html>

toggle()方法

toggle()方法用于模拟鼠标连续click事件

语法：

toggle(fn1,fn2,...,fnN);

toggle()方法不带参数，与show( )和hide( )方法作用一样

语法：

toggle( );

toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件

toggle( )实现事件触发对象在显示和隐藏状态之间切换

toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<p>我是段落标签</p>
		<button>显示和隐藏p元素</button>
	</body>
	<script>
		$(function(){
			//获取button元素并添加点击事件
			$('button').click(function(){
				//获取p元素
				$('p').toggle();
			});
		})
	</script>
</html>

jQuery动画效果

控制元素的显示及隐藏

show() 控制元素的显示，hide( )控制元素的隐藏

语法：

$(selector).show([speed],[callback])
$(selector).hide([speed],[callback])

改变元素的透明度

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

语法：

$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])

改变元素的高度

slideDown() 可以使元素逐步延伸显示

slideUp()则使元素逐步缩短直至隐藏

语法：

$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback])

自定义动画

语法：

$(selector). animate({params},speed,callback)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.12.4.js"></script>
		<style>
			div {
				width: 200px;
				height: 100px;
				background-color: aqua;
			}
			.div1{
				position: fixed;
				left: 0px;
				top: 0px;
			}
			.div2{
				position: fixed;
				left: 0px;
				top: 185px;
			}
			.div3{
				position: fixed;
				left: 0px;
				top: 345px;
			}
			.btn01{
				position: fixed;
				left: 10px;
				top: 112px;
			}
			.btn02{
				position: fixed;
				left: 54px;
				top: 112px;
			}
			
			.btn03{
				position: fixed;
				left: 10px;
				top: 288px;
			}
			.btn04{
				position: fixed;
				left: 54px;
				top: 288px;
			}
			
			.btn05{
				position: fixed;
				left: 54px;
				top: 320px;
			}
		</style>
	</head>
	<body>
	<!-- 	<div></div>
		<button>隐藏div</button> -->
		
		<div class="div1"></div>
		<button class="btn01">淡入</button>
		<button class="btn02">淡出</button>
		<div class="div2"></div>
		<button class="btn03">缩小</button>
		<button class="btn04">变高</button>
		<div class="div3"></div>
		<button class="btn05">动画</button>

	</body>
	<script>
		$(function() {
			// $('button').click(function() {
			// 	$('div').hide(5000, function() {
			// 		alert('div隐藏完毕');
			// 	});
			// });
			
			
			$('.btn02').click(function(){
				$('.div1').fadeIn(3000,'');
			});
			
			$('.btn01').click(function(){
				$('.div1').fadeOut(3000,'');
			});
			
			$('.btn03').click(function(){
				$('.div2').slideUp(3000,'');
			});
			
			$('.btn04').click(function(){
				$('.div2').slideDown(3000,'');
			});
			
			$('.btn05').click(function(){
				$('.div3').animate({'width': '400px',
				'height': '200px'},3000,'');
			});
			
		});
	</script>
</html>