淺談jQuery的bind和unbind事件(綁定和解綁事件)
綁定其實就是把一些常規(guī)時間綁定到頁面,然后進(jìn)行各種常規(guī)操作
解綁就是接觸綁定,綁定的事件失效
要注意,iQuery中的 .事件 如(.click())其實就是單個的綁定事件的簡寫(bind("click"))
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>02_事件綁定.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="JavaScript" src="../js/jquery-1.4.2.js"></script> <link rel="stylesheet" type="text/css" href="./css/style.css" rel="external nofollow" /> </head> <body> <div id="panel"> <input type="button" id="start" value="綁定事件"> <input type="button" id="stop" value="解綁事件"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是繼Prototype之后又一個優(yōu)秀的JavaScript庫,它是一個由 John Resig 創(chuàng)建于2006年1月的開源項目。jQuery憑借簡潔的語法和跨平臺的兼容性,極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動畫和開發(fā)Ajax。它獨特而又優(yōu)雅的代碼風(fēng)格改變了JavaScript程序員的設(shè)計思路和編寫程序的方式。 </div> </div> </body> <script language="JavaScript"> //當(dāng)鼠標(biāo)單次點擊h5標(biāo)題時,顯示答案;當(dāng)鼠標(biāo)雙次點擊h5標(biāo)題時,隱藏答案 // $("h5").click(function(){ // if($("div[class=content]").is(":hidden")){ // $("div[class=content]").show(); // }else{ // $("div[class=content]").hide(); // } // }) // //動態(tài)效果 // $("#start").click(function(){ // /* // * 動態(tài)綁定點擊事件:綁定單個事件 // * bind(type,data,fn) // * * type:指定要綁定的事件名稱 // * * data:(可選)作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象 // * * fn:回調(diào)函數(shù),function(){} // */ // $("h5").bind("click",function(){ // if($("div[class=content]").is(":hidden")){ // $("div[class=content]").show(); // }else{ // $("div[class=content]").hide(); // } // }); // // }); // $("#stop").click(function(){ // /* // * 動態(tài)解綁定點擊事件 // * unbind(type,fn) // * * type:(可選)指定要解綁的事件名稱 // * * fn:(可選)回調(diào)函數(shù) // */ // $("h5").unbind(); // }); // $("h5").mouseover(function(){ // $("div[class=content]").show(); // }).mouseout(function(){ // $("div[class=content]").hide(); // }); //動態(tài)效果 $("#start").click(function(){ /* * 綁定事件:綁定多個事件 * * 事件名稱之間,用空格隔開 */ $("h5").bind("mouseover mouseout",function(){ if($("div[class=content]").is(":hidden")){ $("div[class=content]").show(); }else{ $("div[class=content]").hide(); } }); }); $("#stop").click(function(){ /* * unbind(type) * * 默認(rèn)為空時:解綁定所有事件 * * 指定單個事件:解綁指定的單個事件 * * 指定多個事件:解綁指定的多個事件 */ $("h5").unbind("mouseover mouseout"); }); </script> </html>
以上這篇淺談jQuery的bind和unbind事件(綁定和解綁事件)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
- jQuery使用bind動態(tài)綁定事件無效的處理方法
- jQuery實現(xiàn)為動態(tài)添加的元素綁定事件實例分析
- jquery 給動態(tài)生成的標(biāo)簽綁定事件的幾種方法總結(jié)
- jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法
- jQuery動態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
- jQuery使用bind函數(shù)實現(xiàn)綁定多個事件的方法
- jQuery綁定事件方法及區(qū)別(bind,click,on,live,one)
- JQuery綁定事件四種實現(xiàn)方法解析
相關(guān)文章
jQuery實現(xiàn)的手風(fēng)琴側(cè)邊菜單效果
這篇文章主要介紹了jQuery實現(xiàn)的手風(fēng)琴側(cè)邊菜單效果,涉及jQuery事件響應(yīng)及元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-03-03jQuery UI插件自定義confirm確認(rèn)框的方法
這篇文章主要介紹了jQuery UI插件自定義confirm確認(rèn)框的方法,實例分析了jQuery的UI插件使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03Jquery實現(xiàn)無刷新DropDownList聯(lián)動實現(xiàn)代碼
隨著Jquery1.4的發(fā)布,Jquery運(yùn)用越來越多了,讓我們來實現(xiàn)以前經(jīng)常用到的DropDownList無刷新聯(lián)動。2010-03-03jquery.uploadView 實現(xiàn)圖片預(yù)覽上傳功能
圖片上傳,網(wǎng)上有好多版本,今天小編給大家分享jquery.uploadView 實現(xiàn)圖片預(yù)覽上傳功能,感興趣的的朋友一起看看吧2017-08-08jQuery實現(xiàn)自動切換播放的經(jīng)典滑動門效果
這篇文章主要介紹了jQuery實現(xiàn)自動切換播放的經(jīng)典滑動門效果,可實現(xiàn)tab自動定時切換的功能,涉及jQuery基于定時函數(shù)動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-09-09