jquery事件綁定方法介紹
更新時(shí)間：2022年05月04日 11:37:47 作者：.NET開(kāi)發(fā)菜鳥(niǎo)
這篇文章介紹了jquery事件綁定的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、bind()
bing()用來(lái)綁定事件，例如：
二、unbind()
unbind()用來(lái)解除事件的綁定。例如：
三、on()
on()方法用來(lái)綁定事件，例如：
四、off()
off()方法用來(lái)解除事件的綁定，例如：
注意：
建議用on()方法綁定事件，效率更高。
五、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件綁定</title>
<!--引入jQuery-->
<script src="../jquery-3.3.1.js"></script>
<!--javascript-->
<script>
$(function(){
// 正常情況下的鼠標(biāo)移入背景色變?yōu)榛疑?，移出時(shí)變?yōu)榘咨?
// 鼠標(biāo)移入
/* $("#menu li").mouseover(function(){
$(this).css("background-color","gray");
});
// 鼠標(biāo)移出
$("#menu li").mouseout(function(){
$(this).css("background-color","white");
}); */
//bind()綁定事件
$("#menu li").bind("mouseover",function(){
$(this).css("background-color","gray");
});
$("#menu li").bind("mouseout",function(){
$(this).css("background-color","white");
});
// bind()綁定多個(gè)事件
/* $("#menu li").bind("click mouseover",function(){
$(this).css("background-color","gray");
}); */
// bind()綁定多個(gè)事件
/* $("#menu li").bind({
click:function(){$(this).css("background-color","#ccc");},
mouseover:function(){$(this).css("background-color","yellow");}
}); */
// 解除綁定事件
//$("#menu li").unbind(); // 解除所有的事件
//$("#menu li").unbind("click");// 只解除click事件，保留鼠標(biāo)移入事件
// on()綁定事件
// 處理添加背景色效果
$("#menu").on("mouseover","li",{},function(){
$(this).css("background-color","#ccc");
});
$("#menu").on("mouseout","li",{},function(){
$(this).css("background-color","yellow");
});
// off()解除綁定
$("#menu").off("mouseout","li"); // 只移除moustout事件
});
</script>
</head>
<body>
<input type="button" value="添加" />
<ul id="menu">
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</ul>
</body>
</html>到此這篇關(guān)于jquery事件綁定的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
- jQuery實(shí)現(xiàn)的事件綁定功能基本示例
- jQuery的三種bind/One/Live/On事件綁定使用方法
- jQuery 全選 全不選 事件綁定的實(shí)現(xiàn)代碼
- jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)
- jquery移除了live()、die(),新版事件綁定on()、off()的方法
- 關(guān)于Jquery中的事件綁定總結(jié)
- jquery事件綁定解綁機(jī)制源碼解析
- jQuery事件綁定用法詳解
- 深入理解jQuery事件綁定
- jQuery事件綁定on()與彈窗實(shí)現(xiàn)代碼
- jQuery事件綁定用法詳解(附bind和live的區(qū)別)
- jQuery實(shí)現(xiàn)按鈕只點(diǎn)擊一次后就取消點(diǎn)擊事件綁定的方法
- JQuery中DOM事件綁定用法詳解
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jQuery事件綁定與解除綁定實(shí)現(xiàn)方法
- jquery中click等事件綁定及移除的幾種方法小結(jié)
相關(guān)文章
每天都在與DOM打交道而且暈頭轉(zhuǎn)向，不過(guò)，自打咱認(rèn)識(shí)了jQuery： 是操作屬性也不煩了，插入新元素也不暈了，連移動(dòng)元素及包裝元素咱也不抽筋了。。2010-01-01
大部分jQuery插件都是這種類(lèi)型的插件，由于這種插件是將對(duì)象方法封裝起來(lái)，在jQuery選擇器獲取jQuery對(duì)象過(guò)程中進(jìn)行操作，從而發(fā)揮jQuery強(qiáng)大的選擇器優(yōu)勢(shì)2012-09-09
jQuery數(shù)據(jù)類(lèi)型小結(jié)(14個(gè))
jQuery除了包含原生JS中的內(nèi)置數(shù)據(jù)類(lèi)型(built-in datatype)，還包括一些擴(kuò)展的數(shù)據(jù)類(lèi)型(virtual types)，如Selectors、Events等，通過(guò)本文給大家分享14個(gè)jquery數(shù)據(jù)類(lèi)型，感興趣的朋友一起學(xué)習(xí)吧2016-01-01
jQuery實(shí)現(xiàn)的簡(jiǎn)單在線(xiàn)計(jì)算器功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單在線(xiàn)計(jì)算器功能,結(jié)合完整實(shí)例形式分析了jQuery實(shí)現(xiàn)簡(jiǎn)單四則運(yùn)算的相關(guān)操作技巧,需要的朋友可以參考下2017-05-05
基于jquery的讓textarea自適應(yīng)高度的插件
jquery extension - auto height text area2010-08-08
jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果
這篇文章主要為大家詳細(xì)介紹了jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了jQuery選擇器querySelector的使用指南的相關(guān)資料,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery的元素篩選，并舉例進(jìn)行說(shuō)明，希望對(duì)大家有所幫助2016-11-11
這是一個(gè)加了點(diǎn)淡入淡出效果的頂部tooltip控件，會(huì)自動(dòng)消失,小功能大家參考使用吧2013-12-12
這篇文章主要介紹了JQuery radio（單選按鈕）操作方法匯總,本文講解了獲取選中值、設(shè)置選中值、根據(jù)Value值設(shè)置選中、刪除Radio、遍歷等內(nèi)容,需要的朋友可以參考下2015-04-04