JQuery調(diào)用綁定click事件的3種寫法
更新時間:2015年03月28日 09:31:03 投稿:junjie
這篇文章主要介紹了JQuery調(diào)用綁定click事件的3種寫法,本文簡潔清晰的給出3種寫法的代碼示例,可以很方便的復制使用,需要的朋友可以參考下
第一種方式:
$(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>身份證號: <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>
相關(guān)文章
jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
這是一款使用jQuery和CSS3制作的效果非常炫酷的折疊卡片式下拉列表框特效,感興趣的小伙伴們可以參考一下2015-11-11基于jQuery.i18n實現(xiàn)web前端的國際化
這篇文章主要介紹了基于jQuery.i18n實現(xiàn)web前端的國際化,具有很好的參考價值,希望對大家有所幫助2018-05-05jQuery實現(xiàn)響應鼠標事件的圖片透明效果【附demo源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)響應鼠標事件的圖片透明效果,涉及jQuery鼠標事件及fadeTo函數(shù)的相關(guān)使用技巧,需要的朋友可以參考下2016-06-06