綁定其實(shí)就是把一些常規(guī)時(shí)間綁定到頁面，然后進(jìn)行各種常規(guī)操作
解綁就是接觸綁定，綁定的事件失效
要注意，iQuery中的 .事件 如(.click())其實(shí)就是單個(gè)的綁定事件的簡寫(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之后又一個(gè)優(yōu)秀的JavaScript庫，它是一個(gè)由 John Resig 創(chuàng)建于2006年1月的開源項(xiàng)目。jQuery憑借簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動(dòng)畫和開發(fā)Ajax。它獨(dú)特而又優(yōu)雅的代碼風(fēng)格改變了JavaScript程序員的設(shè)計(jì)思路和編寫程序的方式。 </div> </div> </body> <script language="JavaScript"> //當(dāng)鼠標(biāo)單次點(diǎn)擊h5標(biāo)題時(shí),顯示答案;當(dāng)鼠標(biāo)雙次點(diǎn)擊h5標(biāo)題時(shí),隱藏答案// $("h5").click(function(){// if($("div[class=content]").is(":hidden")){// $("div[class=content]").show();// }else{// $("div[class=content]").hide();// }// }) // //動(dòng)態(tài)效果// $("#start").click(function(){// /*// * 動(dòng)態(tài)綁定點(diǎn)擊事件:綁定單個(gè)事件// * 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(){// /*// * 動(dòng)態(tài)解綁定點(diǎn)擊事件// * unbind(type,fn)// * * type:(可選)指定要解綁的事件名稱// * * fn:(可選)回調(diào)函數(shù)// */// $("h5").unbind();// }); // $("h5").mouseover(function(){// $("div[class=content]").show();// }).mouseout(function(){// $("div[class=content]").hide();// }); //動(dòng)態(tài)效果 $("#start").click(function(){ /* * 綁定事件:綁定多個(gè)事件 * * 事件名稱之間,用空格隔開 */ $("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)為空時(shí):解綁定所有事件 * * 指定單個(gè)事件:解綁指定的單個(gè)事件 * * 指定多個(gè)事件:解綁指定的多個(gè)事件 */ $("h5").unbind("mouseover mouseout"); }); </script></html>
新聞熱點(diǎn)
疑難解答
圖片精選
