這篇文章主要為大家展示了“如何實現jQuery添加刪除按鈕Click事件”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“如何實現jQuery添加刪除按鈕Click事件”這篇文章吧。
如下圖所示,勾選“I have read and accept.”復選框,Login按鈕才會相應click事件,登陸成功后切換到歡迎畫面。
通常情況我們是怎么實現的呢,很多同學會想到用javascript設置按鈕的disabled屬性。這當然是一種不錯的方法,不過我們用JQuery的話,代碼會更簡潔,同時我們的逼格也上去了,哈哈。
對于按鈕來說,JQuery提供了bind()方法和unbind()方法,使我們可以隨時隨地,根據需要給按鈕添加或刪除Click事件。
詳細代碼如下:
<html> <style type="text/css"> .hide { display: none; } .show { display: block; } </style> <script language=JavaScript src="js/jquery.min.js" type=text/javascript></script> <script> $(document).ready(function() { $('#logoutBtn').addClass('hide'); $('#logoutBtn').bind('click', function() { $('#title').html('Agreements<br>1. ...<br>2. ...<br>3. ...'); $('#loginBtn').removeClass('hide').addClass('show'); $('#confirm').removeClass('hide').addClass('show'); $('#logoutBtn').removeClass('show').addClass('hide'); }); }); function doCheck() { if ($("input[type='checkbox']").is(':checked')) { $('#loginBtn').bind('click', function() { $('#title').text('Welcome to our site!'); $('#loginBtn').removeClass('show').addClass('hide'); $('#confirm').removeClass('show').addClass('hide'); $('#logoutBtn').removeClass('hide').addClass('show'); }); } else { $('#loginBtn').unbind('click'); } } </script> <body> <p id="title"> Agreements<br>1. ...<br>2. ...<br>3. ... </p> <div id="confirm"> <input id="cbx" type="checkbox" onclick="doCheck()" />I have read and accept. </div> <input id="loginBtn" type="button" value="Login" /> <input id="logoutBtn" type="button" value="Logout" /> </body> </html>
代碼中還用到JQuery的幾個方法,簡單說明一下:
html()方法:設置被選擇元素的html內容,相當于document.getElementById(“#xxx”).innerHTML=”xxx”。
text()方法:設置被選擇元素的文本內容,相當于document.getElementById(“#xxx”).innerText=”xxx”。
removeClass():被選擇元素移除一個CSS樣式。
addClass():被選擇元素添加一個CSS樣式。
$(“input[type='checkbox']”).is(‘:checked'):判斷復選框是否選中。
以上是“如何實現jQuery添加刪除按鈕Click事件”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)網站建設公司行業(yè)資訊頻道!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站chinadenli.net,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
文章名稱:如何實現jQuery添加刪除按鈕Click事件-創(chuàng)新互聯(lián)
文章分享:http://chinadenli.net/article20/ddigjo.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供Google、網站策劃、微信公眾號、網站改版、外貿網站建設、標簽優(yōu)化
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)