jQuery事件與動畫超詳細講解
jQuery事件
常用事件
jQuery事件是對JavaScript事件的封裝,常用事件分類:
1、基礎(chǔ)事件
- 鼠標事件
- 鍵盤事件
- window事件
- 表單事件
2、復合事件
- 鼠標光標懸停
- 鼠標連續(xù)點擊
鼠標事件
案例代碼:
<!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>
運行效果:
鍵盤事件
用戶每次按下或者釋放鍵盤上的鍵時都會產(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>
運行效果:
綁定事件
在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()來刪除事件,該方法可以接收可選的參數(shù),表示刪除某單個事件;也可以不設(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>
運行效果:
用off()方法時,鼠標移入和移除的事件都被移除了。
將上述代碼中的off()方法添加一個參數(shù),比如:
$('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()函數(shù)模擬鼠標移入移出 $('button').hover(function(){ $('div').hide(); },function(){ $('div').show(); }); </script> </html>
運行效果:
toggle()方法
用于模擬鼠標連續(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>
運行效果:
jQuery動畫
jQuery動畫中相關(guān)函數(shù)可以說是為其添加了亮麗的一筆。我們可以通過簡單的函數(shù)實現(xiàn)很多特效,這在以往是需要編寫大量的JavaScript的動畫的相關(guān)知識。
思維導圖:
顯示隱藏
- show() 顯示
- hide() 隱藏
- toggle() 顯示隱藏切換
對于動畫和特效而言,元素的顯示和隱藏可以說是使用很頻繁的特效。
在普通的JavaScript編程中,實現(xiàn)元素的顯示或隱藏通常是利用對應(yīng)CSS代碼中的display屬性或visibility屬性。而在jQuery中提供了 s h o w ( ) show() show()和 h i d e ( ) hide() hide()兩個方法,用于直接實現(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>點擊一下</button> <div></div> </body> <script> $('button').click(function(){ $('div').show(3000,function(){ alert('我已經(jīng)完全顯示起來了'); }); }); </script> </html>
運行效果:
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>點我一下</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>動畫效果</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('我已經(jīng)完全隱藏起來了'); }); }); </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('我已經(jīng)完全隱藏起來了'); }); }); </script> </html>
運行效果:
自定義動畫
考慮到框架的通用性以及代碼文件的大小,jQuery沒有涵蓋所有的動畫效果。但它提供了animate()方法,能夠讓開發(fā)者自定義動畫。
常用形式:
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>開始動畫</button> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>
運行效果:
到此這篇關(guān)于jQuery事件與動畫超詳細講解的文章就介紹到這了,更多相關(guān)jQuery事件與動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JQuery 實現(xiàn)在同一頁面錨點鏈接之間的平滑滾動
JQuery 原來比我想象的要強大的多,本文用 JQuery 實現(xiàn)錨點鏈接之間的平滑滾動,在同一頁面的錨點鏈接之間實現(xiàn)平滑的滾動2014-10-10jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR錯誤
今天測試偶然發(fā)現(xiàn)jquery.bgiframe.js在IE9環(huán)境下提示錯誤,于是很是好奇,想辦法知道究竟,于是搜索了一下,現(xiàn)在與大家分享希望可以幫助你們2013-01-01jquery的冒泡事件的阻止與允許(三種實現(xiàn)方法)
冒泡或默認的事件發(fā)生,在某些時候是不需要的,在此就需要一些可以阻止冒泡和默認的事件的方法,本文介紹三種方法做到不同程度的阻止,感興趣的朋友可以了解下,或許對你了解冒泡事件有所幫助2013-02-02