淺談jQuery的bind和unbind事件(綁定和解綁事件)
更新時間:2017年03月02日 09:04:41 投稿:jingxian
下面小編就為大家?guī)硪黄獪\談jQuery的bind和unbind事件(綁定和解綁事件)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
綁定其實就是把一些常規(guī)時間綁定到頁面,然后進行各種常規(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)雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。 </div> </div> </body> <script language="JavaScript"> //當鼠標單次點擊h5標題時,顯示答案;當鼠標雙次點擊h5標題時,隱藏答案 // $("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) * * 默認為空時:解綁定所有事件 * * 指定單個事件:解綁指定的單個事件 * * 指定多個事件:解綁指定的多個事件 */ $("h5").unbind("mouseover mouseout"); }); </script> </html>
以上這篇淺談jQuery的bind和unbind事件(綁定和解綁事件)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應用示例
- jQuery使用bind動態(tài)綁定事件無效的處理方法
- jQuery實現(xiàn)為動態(tài)添加的元素綁定事件實例分析
- jquery 給動態(tài)生成的標簽綁定事件的幾種方法總結(jié)
- jQuery動態(tài)添加li標簽并添加屬性和綁定事件方法
- jQuery動態(tài)添加元素無法觸發(fā)綁定事件的解決方法分析
- jQuery使用bind函數(shù)實現(xiàn)綁定多個事件的方法
- jQuery綁定事件方法及區(qū)別(bind,click,on,live,one)
- JQuery綁定事件四種實現(xiàn)方法解析
相關文章
Jquery實現(xiàn)無刷新DropDownList聯(lián)動實現(xiàn)代碼
隨著Jquery1.4的發(fā)布,Jquery運用越來越多了,讓我們來實現(xiàn)以前經(jīng)常用到的DropDownList無刷新聯(lián)動。2010-03-03jquery.uploadView 實現(xiàn)圖片預覽上傳功能
圖片上傳,網(wǎng)上有好多版本,今天小編給大家分享jquery.uploadView 實現(xiàn)圖片預覽上傳功能,感興趣的的朋友一起看看吧2017-08-08jQuery實現(xiàn)自動切換播放的經(jīng)典滑動門效果
這篇文章主要介紹了jQuery實現(xiàn)自動切換播放的經(jīng)典滑動門效果,可實現(xiàn)tab自動定時切換的功能,涉及jQuery基于定時函數(shù)動態(tài)操作頁面元素的相關技巧,需要的朋友可以參考下2015-09-09