jQuery事件與動(dòng)畫超詳細(xì)講解
jQuery事件
常用事件
jQuery事件是對JavaScript事件的封裝，常用事件分類：
1、基礎(chǔ)事件
- 鼠標(biāo)事件
- 鍵盤事件
- window事件
- 表單事件
2、復(fù)合事件
- 鼠標(biāo)光標(biāo)懸停
- 鼠標(biāo)連續(xù)點(diǎn)擊
鼠標(biāo)事件
案例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠標(biāo)事件</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元素綁定鼠標(biāo)單擊事件
$('div').dblclick(function(){
$('div').css('border-color','#0f0');
});
});
</script>
</html>
運(yùn)行效果：
鍵盤事件
用戶每次按下或者釋放鍵盤上的鍵時(shí)都會產(chǎn)生事件，常用鍵盤事件如下：
案例代碼：
<!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>
運(yùn)行效果：
綁定事件
在jQuery中通過on()對事件進(jìn)行綁定，相當(dāng)于標(biāo)準(zhǔn)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>
運(yùn)行效果：
刪除事件
在jQuery中采用off()來刪除事件，該方法可以接收可選的參數(shù)，表示刪除某單個(gè)事件；也可以不設(shè)置任何參數(shù)，就表示移除元素上的所有事件。
無參數(shù)的案例代碼：
<!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():移除事件的函數(shù)，如果函數(shù)中沒有參數(shù)，就表示移除元素上的所有事件
$('div').off();
});
</script>
</html>
運(yùn)行效果：
用off()方法時(shí)，鼠標(biāo)移入和移除的事件都被移除了。
將上述代碼中的off()方法添加一個(gè)參數(shù)，比如：
$('div').off('mouseenter');此時(shí)的運(yùn)行效果如下：
復(fù)合事件
hover()方法
相當(dāng)于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()函數(shù)模擬鼠標(biāo)移入移出
$('button').hover(function(){
$('div').hide();
},function(){
$('div').show();
});
</script>
</html>
運(yùn)行效果：
toggle()方法
用于模擬鼠標(biāo)連續(xù)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>
運(yùn)行效果：
jQuery動(dòng)畫
jQuery動(dòng)畫中相關(guān)函數(shù)可以說是為其添加了亮麗的一筆。我們可以通過簡單的函數(shù)實(shí)現(xiàn)很多特效，這在以往是需要編寫大量的JavaScript的動(dòng)畫的相關(guān)知識。
思維導(dǎo)圖：
顯示隱藏
- show() 顯示
- hide() 隱藏
- toggle() 顯示隱藏切換
對于動(dòng)畫和特效而言，元素的顯示和隱藏可以說是使用很頻繁的特效。
在普通的JavaScript編程中，實(shí)現(xiàn)元素的顯示或隱藏通常是利用對應(yīng)CSS代碼中的display屬性或visibility屬性。而在jQuery中提供了 s h o w ( ) show() show()和 h i d e ( ) hide() hide()兩個(gè)方法，用于直接實(shí)現(xiàn)元素的顯示和隱藏。
案例代碼：
<!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>點(diǎn)擊一下</button>
<div></div>
</body>
<script>
$('button').click(function(){
$('div').show(3000,function(){
alert('我已經(jīng)完全顯示起來了');
});
});
</script>
</html>
運(yùn)行效果：
jQuery中還提供了toggle()方法，不帶參數(shù)的它使得元素可以在show()和hide()之間切換。帶參數(shù)的，我們在上面說過。
案例代碼：
<!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>點(diǎn)我一下</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()總結(jié)：
淡入淡出
- fadeIn() 顯示
- fadeOut() 隱藏
- fadeTo(duration,opcity,callback) 自定義變化透明度，其中opacity的 取值范圍為0.0~1.0
案例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動(dòng)畫效果</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>點(diǎn)擊一下</button>
<div></div>
</body>
<script>
$('button').click(function(){
$('div').fadeOut(3000,function(){
alert('我已經(jīng)完全隱藏起來了');
});
});
</script>
</html>
運(yùn)行效果：
幻燈片特效
- slideUp()
- slideDown()
模擬PPT中的幻燈片“拉窗簾”特效。
案例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動(dòng)畫效果</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>點(diǎn)擊一下</button>
<div></div>
</body>
<script>
$('button').click(function(){
$('div').slideUp(3000,function(){
alert('我已經(jīng)完全隱藏起來了');
});
});
</script>
</html>
運(yùn)行效果：
自定義動(dòng)畫
考慮到框架的通用性以及代碼文件的大小，jQuery沒有涵蓋所有的動(dòng)畫效果。但它提供了animate()方法，能夠讓開發(fā)者自定義動(dòng)畫。
常用形式：
animate(params,[duration],[easing],[callback]);
需要特別指出，params中的變量名要遵循JavaScript對變量名的要求，因此不能出現(xiàn)連字符“-”。例如CSS中的屬性名padding-left就要改為paddingLeft，也就是遵循“小駝峰命名”規(guī)則。另外，params表示的屬性只能是CSS中用數(shù)值表示的屬性，例如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>開始動(dòng)畫</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
運(yùn)行效果：
到此這篇關(guān)于jQuery事件與動(dòng)畫超詳細(xì)講解的文章就介紹到這了,更多相關(guān)jQuery事件與動(dòng)畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JQuery 實(shí)現(xiàn)在同一頁面錨點(diǎn)鏈接之間的平滑滾動(dòng)
JQuery 原來比我想象的要強(qiáng)大的多，本文用 JQuery 實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)，在同一頁面的錨點(diǎn)鏈接之間實(shí)現(xiàn)平滑的滾動(dòng)2014-10-10
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯(cuò)誤
今天測試偶然發(fā)現(xiàn)jquery.bgiframe.js在IE9環(huán)境下提示錯(cuò)誤，于是很是好奇，想辦法知道究竟，于是搜索了一下，現(xiàn)在與大家分享希望可以幫助你們2013-01-01
這篇文章主要是對jQuery控制iFrame的實(shí)例代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
jquery 表單進(jìn)行客戶端驗(yàn)證demo
用jquery對表單進(jìn)行客戶端驗(yàn)證demo ，學(xué)習(xí)jquery的朋友可以參考下。2009-08-08
這篇文章介紹了解決IE9下JQuery發(fā)送ajax請求失效的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
相信大部份人都會把這2個(gè)的用法搞錯(cuò)。仔細(xì)查看下API文檔就可以知道。eq返回的是一個(gè)jquery對象，get返回的是一個(gè)html 對象數(shù)組。2011-04-04
jquery的冒泡事件的阻止與允許(三種實(shí)現(xiàn)方法)
冒泡或默認(rèn)的事件發(fā)生,在某些時(shí)候是不需要的,在此就需要一些可以阻止冒泡和默認(rèn)的事件的方法,本文介紹三種方法做到不同程度的阻止，感興趣的朋友可以了解下，或許對你了解冒泡事件有所幫助2013-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要展示了jQuery網(wǎng)頁版打磚塊小游戲源碼，大家都一定玩過打磚塊這款小游戲，今天我們不僅要玩轉(zhuǎn)它，還要實(shí)現(xiàn)打磚塊小游戲，感興趣的小伙伴們可以參考一下2015-08-08