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