jQuery事件與動畫超詳細講解

2022-12-15 14:00:12

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>

執行效果：