JQuery入門(mén)——用映射方式綁定不同事件應(yīng)用示例
更新時(shí)間：2013年02月05日 16:09:31 作者：
通過(guò)映射的方式，給對(duì)象綁定多個(gè)事件,可能有很多的童鞋們不從使用過(guò)，不過(guò)，沒(méi)有關(guān)系本文將一一為您詳細(xì)介紹，感興趣的朋友可不要錯(cuò)過(guò)了啊，希望本文對(duì)你有所幫助
1、通過(guò)映射的方式，給對(duì)象綁定多個(gè)事件。
2、示例代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>映射方式綁定不同事件</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".txt").bind({focus:function(){
$("#divTip").show().html("執(zhí)行的是focus事件");
},
change:function(){
$("#divTip").show().html("執(zhí)行的是change事件");
}
})
})
</script>
</head>
<body>
<div>姓名：<input type="text" class="txt"/></div>
<div id="divTip" class="clsTip"></div>
</body>
</html>
3、效果圖預(yù)覽：
將光標(biāo)置于文本框中點(diǎn)擊顯示效果如下：
在文本框中輸入內(nèi)容然后將光標(biāo)單擊其他空白頁(yè)面效果如下：
您可能感興趣的文章:
- JQuery入門(mén)——用bind方法綁定事件處理函數(shù)應(yīng)用介紹
- JQuery入門(mén)——事件切換之hover()方法應(yīng)用介紹
- JQuery入門(mén)——事件切換之toggle()方法應(yīng)用介紹
- JQuery入門(mén)——移除綁定事件unbind方法概述及應(yīng)用
- JQuery入門(mén)——用one()方法綁定事件處理函數(shù)(僅觸發(fā)一次)
- jquery入門(mén)—選擇器實(shí)現(xiàn)隔行變色實(shí)例代碼
- JQuery入門(mén)—編寫(xiě)一個(gè)簡(jiǎn)單的JQuery應(yīng)用案例
- JQuery入門(mén)—JQuery程序的代碼風(fēng)格詳細(xì)介紹
- jquery入門(mén)必備的基本認(rèn)識(shí)及實(shí)例(整理)
相關(guān)文章
基于JQuery和CSS3實(shí)現(xiàn)仿Apple TV海報(bào)背景視覺(jué)差特效源碼分享
這是一款效果非常炫酷的jQuery和CSS3仿Apple TV海報(bào)背景視覺(jué)差特效。該視覺(jué)差特效在使用鼠標(biāo)在屏幕上下左右移動(dòng)的時(shí)候，海報(bào)中的各種元素以不同的速度運(yùn)動(dòng)，形成視覺(jué)差效果，并且還帶有一些流光特效。2015-09-09
這篇文章介紹了使用Jquery操作Cookies的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
用JavaScript解析XML數(shù)據(jù)是常見(jiàn)的編程任務(wù)，JavaScript能做的，JQuery當(dāng)然也能做。下面我們來(lái)總結(jié)幾個(gè)使用JQuery解析XML的例子2014-03-03
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
本文是對(duì)Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
Jquery圖形報(bào)表插件 jqplot簡(jiǎn)介及參數(shù)詳解
jqPlot是 一款基于jquery類庫(kù)的圖標(biāo)繪制插件。通過(guò)jqPlot可以再網(wǎng)頁(yè)中繪制線狀、柱狀、餅狀等多種樣式圖表。而且，jqPlot具有插件可擴(kuò)展性 (Pluggability)，你可以編寫(xiě)自己的圖表樣式2012-10-10
基于jQuey實(shí)現(xiàn)鼠標(biāo)滑過(guò)變色(整行變色)
相信大家在一些網(wǎng)站都看到過(guò)這種效果吧，當(dāng)鼠標(biāo)放在新聞列表一行的時(shí)候，整行就會(huì)變色，雖然使用CSS也能夠?qū)崿F(xiàn)此種功能，但是由于眾多瀏覽器版本對(duì)于CSS3并沒(méi)有良好的支持，所以在當(dāng)前情況下，使用jQuery實(shí)現(xiàn)此種功能是一個(gè)不錯(cuò)的選擇2015-12-12
jQuery中delegate和on的用法與區(qū)別詳細(xì)解析
本篇文章主要是對(duì)jQuery中delegate和on的用法與區(qū)別進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要介紹了jQuery前端開(kāi)發(fā)35個(gè)小技巧的相關(guān)資料，非常實(shí)用,需要的朋友可以參考下2016-05-05
jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變?cè)卮笮〉姆椒?附demo源碼下載)
這篇文章主要介紹了jquery插件jquery.dragscale.js實(shí)現(xiàn)拖拽改變?cè)卮笮〉姆椒?涉及jquery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-02-02
jquery實(shí)現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件
這篇文章主要介紹了jquery實(shí)現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件,可實(shí)現(xiàn)滑動(dòng)選擇的效果,需要的朋友可以參考下2015-06-06