jQuery學習總結之jQuery事件_jquery

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

複製程式碼 程式碼如下:

jQuery(document).ready(function() {
  jQuery("#btnHide").click(function() {
    jQuery("#imgGoogle").hide("1000");
  });
});

當點擊隱藏圖片時，google的logo圖片將在一秒鐘進行隱藏。這裡我們用到了hide()方法，當然也可不指定時間，如果要顯示圖片的話應該使用show()方法，感覺是不是很棒。

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

在過去，我們常看到：

複製程式碼 程式碼如下:

在北京

這種寫法。從現在開始，大家應該拋棄這種寫法。實作js程式碼和html的分離，這樣頁面整齊了，效率也會更高。現在的寫法，將會變成：

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

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

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

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

複製程式碼 程式碼如下:

人在北京

複製程式碼 程式碼如下:

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

以上綁定一次點擊事件，第二次點擊時，不會再彈出提示。

2、focus()和blur()事件

複製程式碼 程式碼如下:

複製程式碼 程式碼如下:

jQuery("#tTest").focus(function() {
    jQuery(this).css("background", "yellow");
}).blur(function() {
    jQuery(this).css("background", "white");
});

此例實用到了鍊式寫法，相信不難理解。如果對jQuery操作css樣式不熟悉，可以看看第二篇總結。此例當焦點聚焦在本文框時，背景色變為黃色，離開時又變回白色。這樣做的目的，可以提高使用者體驗，我個人感覺。

3、keydown()和keyup()事件

複製程式碼 程式碼如下:

複製程式碼 程式碼如下:

jQuery("#tTest").keyup(function() {
    jQuery("#lResult").html(jQuery(this).val());
});

當鍵彈起時（這裡感覺不好表達^_^），在label中將會顯示文字方塊中的內容。操作元素屬性部分可以看看第三篇總結。

4、submit()事件

複製程式碼 程式碼如下:

   
   
   

複製程式碼 程式碼如下:

jQuery("#form1").submit(function() {
    if (jQuery.trim(jQuery("#text").val()).length == 0) {
        return false;
    }
});

可以看出，本實例使用了伺服器控制項。實質上是一樣的，最終會進行表單提交。點選按鈕時，進行表單提交。如果文字方塊內容為空時，返回false，從而不進行提交；否則，進行提交。此類應用程式在web開發中隨處可見。

5、hover()事件

複製程式碼 程式碼如下:

hover me

複製程式碼 程式碼如下:

jQuery("#divHover").hover(function() {
    jQuery(this).css("background", "yellow");
}, function() {
    jQuery(this).css("background", "red");
});

滑鼠移到div上時，div背景色變成黃色，移出背景色變成紅色。

以上幾種事件是比較常見的，也是用的比較多的。當然這篇總結的只是一小部分，學習中遇到問題還得用jQuery文件進行查閱。