網(wǎng)站首頁 編程語言 正文
jQuery事件
常用事件
jQuery事件是對JavaScript事件的封裝，常用事件分類：
1、基礎(chǔ)事件
- 鼠標(biāo)事件
- 鍵盤事件
- window事件
- 表單事件
2、復(fù)合事件
- 鼠標(biāo)光標(biāo)懸停
- 鼠標(biāo)連續(xù)點擊
鼠標(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>
運行效果：
鍵盤事件
用戶每次按下或者釋放鍵盤上的鍵時都會產(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()對事件進(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>
運行效果：
刪除事件
在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()方法時，鼠標(biāo)移入和移除的事件都被移除了。
將上述代碼中的off()方法添加一個參數(shù)，比如：
$('div').off('mouseenter');此時的運行效果如下：
復(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>
運行效果：
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>
運行效果：
jQuery動畫
jQuery動畫中相關(guān)函數(shù)可以說是為其添加了亮麗的一筆。我們可以通過簡單的函數(shù)實現(xiàn)很多特效，這在以往是需要編寫大量的JavaScript的動畫的相關(guān)知識。
思維導(dǎo)圖：
顯示隱藏
- 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>
運行效果：
原文鏈接：https://hh419.blog.csdn.net/article/details/127909156
相關(guān)推薦
- 2022-10-31 ?Go?語言實現(xiàn)?HTTP?文件上傳和下載_Golang
- 2022-12-23 C++中關(guān)于getchar()的使用方法_C 語言
- 2022-10-05 VScode中添加頭文件和源文件(C/C++)的方法_C 語言
- 2022-02-14 Uncaught TypeError: Failed to execute ‘a(chǎn)ppendChild
- 2022-07-01 使用python實現(xiàn)簡單去水印功能_python
- 2023-02-07 Pytorch中的廣播機(jī)制詳解(Broadcast)_python
- 2024-03-18 sql篇-輸入數(shù)據(jù)提示[HY000][1366] Incorrect string value: ‘
- 2022-10-31 Flask表單與表單驗證實現(xiàn)流程介紹_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區(qū)別，Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤：Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串（SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列，發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支
提供CDN加速