jQuery的事件處理你知道多少
更新時(shí)間：2022年02月23日 17:10:53 作者：Han_Zhou_Z
這篇文章主要為大家詳細(xì)介紹了jQuery的事件處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
一、jQuery的事件處理
1、頁(yè)面載入事件
$(document).ready() --- onload
2、事件綁定（bind）
bind(type,[data],fn)
type：表示事件類(lèi)型(click、mouseover、mouseout...)
[data]：可選參數(shù),表示傳遞給事件對(duì)象的額外數(shù)據(jù)
fn：是一個(gè)函數(shù)(事件處理函數(shù)),當(dāng)事件發(fā)生時(shí)執(zhí)行的程序
為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)事件處理器函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<button id="btn">確定</button>
<script>
$(function(){
$('#btn').bind('click',function(){//可以給按鈕綁定其他事件
alert('事件綁定')
})
})
</script>
</body>
</html>顯示效果：點(diǎn)擊確定按鈕之后，出現(xiàn)彈窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<img src="../img/1.jpg" alt="" width="150" height="200">
<script>
$(function(){
//通過(guò)鼠標(biāo)的懸停、離開(kāi)事件來(lái)改變img的圖像
$('img').bind('mouseover',function(){
$(this).attr({src:'../img/2.jpg'})//this表示的是img這個(gè)元素
})
$('img').bind('mouseout',function(){
$(this).attr({src:'../img/1.jpg'})
})
})
</script>
</body>
</html>
顯示效果：當(dāng)鼠標(biāo)懸停在圖片上時(shí)，顯示的是一個(gè)圖片。當(dāng)鼠標(biāo)離開(kāi)這個(gè)圖片時(shí)，顯示的是另一張圖片。反復(fù)交替，沒(méi)有限制。
3、反綁定事件（unbind）
unbind([type],[data])：刪除綁定的事件
（1）不帶參數(shù)：刪除元素上綁定的所有事件
（2）帶參數(shù)：[type]表示事件類(lèi)型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<img src="../img/1.jpg" alt="" width="150" height="200">
<script>
$(function(){
//通過(guò)鼠標(biāo)的懸停、離開(kāi)事件來(lái)改變img的圖像
$('img').bind('mouseover',function(){
$(this).attr({src:'../img/2.jpg'})//this表示的是img這個(gè)元素
})
$('img').bind('mouseout',function(){
$(this).attr({src:'../img/1.jpg'})
})
$('img').unbind('mouseout')//解綁
})
</script>
</body>
</html>顯示效果：鼠標(biāo)離開(kāi)圖片之后，圖片不會(huì)變成1.jpg
4、一次性事件綁定（one）
綁定的事件只能執(zhí)行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<img src="../img/1.jpg" alt="" width="150" height="200">
<script>
$(function(){
//通過(guò)鼠標(biāo)的懸停、離開(kāi)事件來(lái)改變img的圖像
$('img').bind('mouseover',function(){
$(this).attr({src:'../img/2.jpg'})//this表示的是img這個(gè)元素
})
//一次性事件綁定
$('img').one('mouseout',function(){
$(this).attr({src:'../img/1.jpg'})
})
})
</script>
</body>
</html>顯示效果：鼠標(biāo)離開(kāi)圖片后，圖片會(huì)變成1.jpg，但是這種變化只會(huì)執(zhí)行一次。第二次離開(kāi)圖片時(shí)，就不會(huì)變成1.jpg。
5、模擬鼠標(biāo)懸停（hover）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../jq/jquery.js"></script></head><body> <div style="width: 200px; height: 200px; background-color: red;"></div> <script> $(function(){ $('div').hover(function(){ $(this).css('backgroundColor','pink') }) }) </script></body></html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jq/jquery.js"></script>
</head>
<body>
<div style="width: 200px; height: 200px; background-color: red;"></div>
<script>
$(function(){
$('div').hover(function(){
$(this).css('backgroundColor','pink')
})
})
</script>
</body>
</html>顯示效果：鼠標(biāo)懸停在圖片上時(shí)，圖片由紅色變?yōu)榉凵?。離開(kāi)圖片時(shí)并不會(huì)變回原來(lái)的紅色。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
有時(shí)候需要設(shè)置iframe的src屬性，下面是基于jquery的實(shí)現(xiàn)代碼。2010-11-11
這篇文章主要介紹了jQuery中的select操作詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
jQuery實(shí)現(xiàn)簡(jiǎn)易的天天愛(ài)消除小游戲
貌似最近騰訊手機(jī)游戲天天愛(ài)消除挺火的，我也是粉絲之一，最近對(duì)javascript一直比較感興趣然后想用js仿造一個(gè)，應(yīng)該不是太難，2015-10-10
海量經(jīng)典的jQuery插件帖 可以根據(jù)需要選擇使用2010-01-01
jquery實(shí)現(xiàn)倒計(jì)時(shí)代碼分享
最近做的項(xiàng)目，需要倒計(jì)時(shí)，翻了翻資料，寫(xiě)了出來(lái)，分享給大家，歡迎拍磚，jquery庫(kù)自己記得引用哈2014-06-06
對(duì)象不支持indexOf屬性或方法的解決方法(必看)
下面小編就為大家?guī)?lái)一篇對(duì)象不支持indexOf屬性或方法的解決方法(必看)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
JQury slideToggle閃爍問(wèn)題及解決辦法
在使用slideToggle 的時(shí)候經(jīng)常會(huì)遇到列表收起時(shí)候閃爍的問(wèn)題,一般IE瀏覽器會(huì)有這個(gè)問(wèn)題，其他瀏覽器比如火狐不會(huì)出現(xiàn)閃爍.2011-07-07
jQuery 底層 AJAX 實(shí)現(xiàn)。簡(jiǎn)單易用的高層實(shí)現(xiàn)見(jiàn) $.get, $.post 等。$.ajax() 返回其創(chuàng)建的 XMLHttpRequest 對(duì)象。大多數(shù)情況下你無(wú)需直接操作該函數(shù)，除非你需要操作不常用的選項(xiàng)，以獲得更多的靈活性，本文給大家介紹jquery ajax用法詳解，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)
本篇文章主要介紹了jQuery調(diào)用RESTful WCF示例代碼(GET方法/POST方法)，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要介紹了jQuery實(shí)現(xiàn)的漂亮表單效果代碼,實(shí)例分析了jquery模擬快遞表單效果的實(shí)現(xiàn)方法,整體效果美觀大方,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08