DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery學習總結之jQuery事件
jQuery學習總結之jQuery事件
編輯:JQuery特效代碼     

首先,我們來看一個有用的實例,來加深以前所掌握的知識,其中有些是在前邊出現過的。

復制代碼 代碼如下:
<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()方法,感覺是不是很棒。

現在開始本篇的主要內容:事件。大家可能已經注意到了,上邊已經在多處用到了事件。其中,document.ready就是一個事件,當文檔准備好了,它告訴jQuery可以執行事件了,鼠標移動、點擊、文本框焦點離開等都是事件。

在過去,我們經常看到:

復制代碼 代碼如下:
<div onclick="alert('租房貴');" id="divRent">在北京</div>

這種寫法。從現在開始,大家應該拋棄這種寫法。實現js代碼和html的分離,這樣頁面整潔了,效率也會更高。現在的寫法,將會變成:

jQuery("#divRent").click(function() {
  alert("租房貴");
});

既然是總結,我還是像前三篇那樣,用實例來記錄盡可能多的事件方法,方便大家在需要的時候查閱。

以下是自己在學習過程中遇到的:

1、one()事件,綁定要執行一次的事件

復制代碼 代碼如下:
<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樣式不熟悉,可以看看第二篇總結。此例當焦點聚焦在本文框時,背景色變為黃色,離開時又變回白色。這樣做的目的,可以提高用戶體驗,我個人感覺。

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開發中隨處可見。

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文檔進行查閱。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved