網站首頁 編程語言 正文
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>
運行效果：
原文鏈接：https://hh419.blog.csdn.net/article/details/127909156
相關推薦
- 2022-06-27 Python數據類型和常用操作_python
- 2022-09-24 Python?tkinter?多選按鈕控件?Checkbutton方法_python
- 2023-05-23 Python實現指定數組下標值正序與倒序排序算法功能舉例_python
- 2022-07-30 react組件的生命周期
- 2021-12-19 C/C++?Qt?TabWidget?實現多窗體創建詳解_C 語言
- 2024-03-15 Gitea Webhook報錯 webhook.ALLOWED_HOST_LIST setting
- 2022-10-13 react-router?v6實現動態路由實例_React
- 2022-04-09 Object 轉Map，Map轉Object方式總結
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速