JQuery調(diào)用綁定click事件的3種寫法
更新時(shí)間:2015年03月28日 09:31:03 投稿:junjie
這篇文章主要介紹了JQuery調(diào)用綁定click事件的3種寫法,本文簡(jiǎn)潔清晰的給出3種寫法的代碼示例,可以很方便的復(fù)制使用,需要的朋友可以參考下
第一種方式:
$(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); });
第二種方式:
$('#clickmebind').bind("click", function(){ alert("Hello World bind"); });
第三種方式:
$('#clickmeon').on('click', function(){ alert("Hello World on"); }); });
注意:第三種方式只適用于jquery 1.7以上的版本
源碼如下:
<!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=gb2312" /> <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/jquery.metadata.js"></script> <script type="text/javascript" src="js/messages_zh.js"></script> <style type="text/css"> #frm label.error { color: Red; } </style> </head> <script type="text/javascript"> $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); $('#clickmebind').bind("click", function(){ alert("Hello World bind"); }); $('#clickmeon').on('click', function(){ alert("Hello World on"); }); }); </script> <body> <label></label> <form id="frm" name="frm" method="post" action=""><label>用 戶 名: <input type="text" name="username" id="username" /> </label> <p> <label>郵 編 :<label></label></label> <label> <input type="text" name="postcode" id="postcode" /> <br /> </label> </p> <p><label>數(shù) 字 : <input type="text" name="number" id="number" /> </label> <br /><label>身份證號(hào): <input type="text" name="identifier" id="identifier" /> </label> <label> <input type="button" name="clickme" id="clickme" value="click me" /> </label> <label> <input type="button" name="clickmebind" id="clickmebind" value="clickme_bind" /> </label> <label> <input type="button" name="clickmeon" id="clickmeon" value="clickme_on" /> </label> </p> </form> </body> </html>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)獲取及設(shè)置CSS樣式操作詳解
- jQuery常用樣式操作實(shí)例分析(獲取、設(shè)置、追加、刪除、判斷等)
- JQueryDOM之樣式操作
- jQuery中click事件的定義和用法
- JQuery給元素綁定click事件多次執(zhí)行的解決方法
- Jquery為DIV添加click事件的簡(jiǎn)單實(shí)例
- jQuery之選項(xiàng)卡的簡(jiǎn)單實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)選項(xiàng)卡切換效果簡(jiǎn)單演示
- JQuery Tab選項(xiàng)卡效果代碼改進(jìn)版
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用示例
相關(guān)文章
jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
這是一款使用jQuery和CSS3制作的效果非常炫酷的折疊卡片式下拉列表框特效,感興趣的小伙伴們可以參考一下2015-11-11基于jQuery.i18n實(shí)現(xiàn)web前端的國(guó)際化
這篇文章主要介紹了基于jQuery.i18n實(shí)現(xiàn)web前端的國(guó)際化,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2018-05-05jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)事件的圖片透明效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)事件的圖片透明效果,涉及jQuery鼠標(biāo)事件及fadeTo函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下2016-06-06基于JQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05