jQuery學習總結之jQuery事件
首先，我們來看一個有用的實例，來加深以前所掌握的知識，其中有些是在前邊出現(xiàn)過的。
<img id="imgGoogle" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="google.com" />
<input type="button" id="btnHide" value="隱藏圖片" />
jQuery(document).ready(function() {
jQuery("#btnHide").click(function() {
jQuery("#imgGoogle").hide("1000");
});
});
當點擊隱藏圖片時，google的logo圖片將在一秒鐘進行隱藏。這里我們用到了hide()方法，當然也可不指定時間，如果要顯示圖片的話應該使用show()方法，感覺是不是很棒。
現(xiàn)在開始本篇的主要內容：事件。大家可能已經注意到了，上邊已經在多處用到了事件。其中，document.ready就是一個事件，當文檔準備好了，它告訴jQuery可以執(zhí)行事件了，鼠標移動、點擊、文本框焦點離開等都是事件。
在過去，我們經?？吹剑?/p>
<div onclick="alert('租房貴');" id="divRent">在北京</div>
這種寫法。從現(xiàn)在開始，大家應該拋棄這種寫法。實現(xiàn)js代碼和html的分離，這樣頁面整潔了，效率也會更高?，F(xiàn)在的寫法，將會變成：
jQuery("#divRent").click(function() {
alert("租房貴");
});
既然是總結，我還是像前三篇那樣，用實例來記錄盡可能多的事件方法，方便大家在需要的時候查閱。
以下是自己在學習過程中遇到的：
1、one()事件，綁定要執(zhí)行一次的事件
<div id="divRent">人在北京</div>
jQuery("#divRent").one("click", function() {
alert("租房貴");
});
以上綁定一次單擊事件，第二次點擊時，不會再彈出提示。
2、focus()和blur()事件
<input id="tTest" type="text" />
jQuery("#tTest").focus(function() {
jQuery(this).css("background", "yellow");
}).blur(function() {
jQuery(this).css("background", "white");
});
此例實用到了鏈式寫法，相信不難理解。如果對jQuery操作css樣式不熟悉，可以看看第二篇總結。此例當焦點聚焦在本文框時，背景色變?yōu)辄S色，離開時又變回白色。這樣做的目的，可以提高用戶體驗，我個人感覺。
3、keydown()和keyup()事件
<input type="text" id="tTest" />
<label id="lResult"></label>
jQuery("#tTest").keyup(function() {
jQuery("#lResult").html(jQuery(this).val());
});
當鍵彈起時（這里感覺不好表達^_^），在label中將會顯示文本框中的內容。操作元素屬性部分可以看看第三篇總結。
4、submit()事件
<form id="form2" runat="server">
<input id="text" type="text" />
<asp:button id="btnTest" onclick="btnTest_Click" runat="server" text="測試">
</asp:button>
</form>
jQuery("#form1").submit(function() {
if (jQuery.trim(jQuery("#text").val()).length == 0) {
return false;
}
});
可以看出，本實例使用了服務器控件。實質上是一樣的，最終會進行表單提交。點擊按鈕時，進行表單提交。如果文本框內容為空時，返回false，從而不進行提交；否則，進行提交。此類應用在web開發(fā)中隨處可見。
5、hover()事件
<div id="divHover">hover me</div>
jQuery("#divHover").hover(function() {
jQuery(this).css("background", "yellow");
}, function() {
jQuery(this).css("background", "red");
});
鼠標移動到div上時，div背景色變成黃色，移出背景色變成紅色。
以上幾種事件是比較常見的，也是用的比較多的。當然本篇總結的只是一小部分，學習中遇到問題還得用jQuery文檔進行查閱。
- jQuery異步加載數(shù)據(jù)并添加事件示例
- jQuery響應鼠標事件并隱藏與顯示input默認值
- jquery bind(click)傳參讓列表中每行綁定一個事件
- JQuery實現(xiàn)表格動態(tài)增加行并對新行添加事件
- jquery阻止后續(xù)事件只執(zhí)行第一個事件
- jquery中的常用事件bind、hover、toggle等示例介紹
- jQuery新的事件綁定機制on()示例應用
- JQuery1.8 判斷元素是否綁定事件的方法
- jquery 為a標簽綁定click事件示例代碼
- 淺談 jQuery 事件源碼定位問題
- jquery 新建的元素事件綁定問題解決方案
- jQuery移除元素自動解綁事件實現(xiàn)思路及代碼
- jQuery事件用法實例匯總
相關文章
jquery插件star-rating.js實現(xiàn)星級評分特效
Bootstrap Star Rating是一個簡單而強大的jQuery插件實現(xiàn)星級分數(shù)評級。支持像分數(shù)星填充和RTL輸入先進的功能。在利用純CSS-3造型使控制重點開發(fā)。該插件使用引導標記和造型默認情況下，但它可以覆蓋與其他任何CSS的標記。2015-04-04
JQuery+drag.js上傳圖片并且實現(xiàn)圖片拖曳
這篇文章主要介紹了JQuery+drag.js上傳圖片并且實現(xiàn)圖片拖曳,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
用戶登錄是許多網站必備的功能。有一種方式就是不管在網站的哪個頁面，點擊登錄按鈕就會彈出一個遮罩層，顯示用戶登錄的對話框。本文將推薦一個帶二維碼的登錄彈出層，可拖動、關閉，有需要的朋友可以參考一下。2016-12-12
這篇文章主要介紹了使用js顯示當前時間示例,這里也用到了jquery，讓得把它也要引入到頁面中2014-03-03
jQuery實現(xiàn)點擊任意位置彈出層外關閉彈出層效果
在之前做項目的時候經常會在主頁面上點擊某個按鈕，右側彈出一個div輸出對應內容的詳細信息，怎么實現(xiàn)的呢，今天小編給大家分享通過jquery實現(xiàn)點擊任意位置彈出層外關閉彈出層效果，感興趣的朋友一起看看吧2016-10-10
jquery怎樣實現(xiàn)ajax聯(lián)動框(二)
ajax聯(lián)動框想必大家早有所耳聞，接下來將介紹jquery實現(xiàn)另一種形式的聯(lián)動框，右邊的聯(lián)動框用jquery生成，仿照上篇的js方法修改的，感興趣的你可以參考下希望可以幫助到你2013-03-03
這篇文章主要介紹了用jquery寫的菜單從左往右滑動出現(xiàn)的效果,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)鼠標拖拽登錄框移動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了jQuery實現(xiàn)div拖拽效果的方法,結合實例形式分析了jQuery響應鼠標事件實現(xiàn)頁面元素樣式變換的技巧與相關注意事項,需要的朋友可以參考下2016-02-02
很多朋友對jquery select的操作很有興趣，但網上的東西太多，所以腳本之家特別將Jquery Select操作方法整理下，方便大家查找。2010-05-05