頁(yè)面加載時(shí)觸發(fā)ready()事件

ready()事件類似于onLoad()事件，但前者只要頁(yè)面的DOM結(jié)構(gòu)加載后便觸發(fā)，而后者必須在頁(yè)面全部元素加載成功才觸發(fā)，ready()可以寫多個(gè)，按順序執(zhí)行。此外，下列寫法是相等的：

$(document).ready(function(){})等價(jià)于$(function(){});

例如，當(dāng)觸發(fā)頁(yè)面的ready()事件時(shí)，在<div>元素中顯示一句話。如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，當(dāng)頁(yè)面的DOM框架完成加載后，便觸發(fā)ready()事件，在該事件中，通過(guò)id號(hào)為“tip”的元素，調(diào)用html()方法在頁(yè)面中顯示一段字符。

使用bind()方法綁定元素的事件

bind()方法綁定元素的事件非常方便，綁定前，需要知道被綁定的元素名，綁定的事件名稱，事件中執(zhí)行的函數(shù)內(nèi)容就可以，它的綁定格式如下：

$(selector).bind(event,[data] function)

參數(shù)event為事件名稱，多個(gè)事件名稱用空格隔開，function為事件執(zhí)行的函數(shù)。

例如，綁定按鈕的單擊事件，單擊按鈕時(shí)，該按鈕變?yōu)椴豢捎谩Ｈ缦聢D所示：

在瀏覽器中顯示的效果：

可以看出，由于使用bind()方法，綁定了按鈕的單擊事件，在該事件中將按鈕本身的“disabled”屬性值設(shè)為“true”，表示不可用，當(dāng)點(diǎn)擊時(shí)觸該事件。

使用bind()方法綁定元素的事件

bind()方法綁定元素的事件非常方便，綁定前，需要知道被綁定的元素名，綁定的事件名稱，事件中執(zhí)行的函數(shù)內(nèi)容就可以，它的綁定格式如下：

$(selector).bind(event,[data] function)

參數(shù)event為事件名稱，多個(gè)事件名稱用空格隔開，function為事件執(zhí)行的函數(shù)。

例如，綁定按鈕的單擊事件，單擊按鈕時(shí)，該按鈕變?yōu)椴豢捎谩Ｈ缦聢D所示：

在瀏覽器中顯示的效果：

可以看出，由于使用bind()方法，綁定了按鈕的單擊事件，在該事件中將按鈕本身的“disabled”屬性值設(shè)為“true”，表示不可用，當(dāng)點(diǎn)擊時(shí)觸該事件。

使用hover()方法切換事件

hover()方法的功能是當(dāng)鼠標(biāo)移到所選元素上時(shí)，執(zhí)行方法中的第一個(gè)函數(shù)，鼠標(biāo)移出時(shí)，執(zhí)行方法中的第二個(gè)函數(shù)，實(shí)現(xiàn)事件的切實(shí)效果，調(diào)用格式如下：

$(selector).hover(over，out);

over參數(shù)為移到所選元素上觸發(fā)的函數(shù)，out參數(shù)為移出元素時(shí)觸發(fā)的函數(shù)。

例如，當(dāng)鼠標(biāo)移到<div>元素上時(shí)，元素中的字體變成金黃色，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，使用hover()方法執(zhí)行兩個(gè)函數(shù)，當(dāng)鼠標(biāo)移在元素上時(shí)調(diào)用addClass()方法增加一個(gè)樣式，移出時(shí)，調(diào)用removeClass()方法移除該樣式。

使用toggle()方法綁定多個(gè)函數(shù)

toggle()方法可以在元素的click事件中綁定兩個(gè)或兩個(gè)以上的函數(shù)，同時(shí)，它還可以實(shí)現(xiàn)元素的隱藏與顯示的切換，綁定多個(gè)函數(shù)的調(diào)用格式如下：

$(selector).toggle(fun1(),fun2(),funN(),...)

其中，fun1，fun2就是多個(gè)函數(shù)的名稱

例如，使用toggle()方法，當(dāng)每次點(diǎn)擊<div>元素時(shí)，顯示不同內(nèi)容，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，每次點(diǎn)擊<div>元素時(shí)，都依次執(zhí)行toggle()方法綁定的函數(shù)，當(dāng)執(zhí)行到最后一個(gè)函數(shù)時(shí)，再次點(diǎn)擊將又返回執(zhí)行第一個(gè)函數(shù)。

注意：toggle()方法支持目前主流穩(wěn)定的jQuery版本1.8.2，在1.9.0之后的版本是不支持的。

使用unbind()方法移除元素綁定的事件

unbind()方法可以移除元素已綁定的事件，它的調(diào)用格式如下：

$(selector).unbind(event,fun)

其中參數(shù)event表示需要移除的事件名稱，多個(gè)事件名用空格隔開，fun參數(shù)為事件執(zhí)行時(shí)調(diào)用的函數(shù)名稱。

例如，點(diǎn)擊按鈕時(shí)，使用unbind()方法移除<div>元素中已綁定的“dblclick”事件，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，當(dāng)使用unbind()方法移除已綁定的“dblclick”事件時(shí)，再次雙擊<div>元素，樣式和文字都沒(méi)有任何變化，表明移除事件成功。

如果沒(méi)有規(guī)定參數(shù)，unbind() 方法會(huì)刪除指定元素的所有事件處理程序。

使用one()方法綁定元素的一次性事件

one()方法可以綁定元素任何有效的事件，但這種方法綁定的事件只會(huì)觸發(fā)一次，它的調(diào)用格式如下：

$(selector).one(event,[data],fun)

參數(shù)event為事件名稱，data為觸發(fā)事件時(shí)攜帶的數(shù)據(jù)，fun為觸發(fā)該事件時(shí)執(zhí)行的函數(shù)。

例如，使用one方法綁定<div>元素的單擊事件，在事件執(zhí)行的函數(shù)中，累計(jì)執(zhí)行的次數(shù)，并將該次數(shù)顯示在頁(yè)面中，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，由于使用了one()方法綁定<div>元素的單擊事件，因?yàn)槭录瘮?shù)只能執(zhí)行一次，執(zhí)行完成后，無(wú)論如何單擊，都不再觸發(fā)。

調(diào)用trigger()方法手動(dòng)觸發(fā)指定的事件

trigger()方法可以直接手動(dòng)觸發(fā)元素指定的事件，這些事件可以是元素自帶事件，也可以是自定義的事件，總之，該事件必須能執(zhí)行，它的調(diào)用格式為：

$(selector).trigger(event)

其中event參數(shù)為需要手動(dòng)觸發(fā)的事件名稱。

例如，當(dāng)頁(yè)面加載時(shí)，手動(dòng)觸發(fā)文本輸入框的“select”事件，使文本框的默認(rèn)值處于全部被選中的狀態(tài)，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，由于文本輸入框調(diào)用trigger()方法觸發(fā)了“select”事件，因此，當(dāng)頁(yè)面加載完成后，文本框中的默認(rèn)值處于全部被選中的狀態(tài)。

文本框的focus和blur事件

focus事件在元素獲取焦點(diǎn)時(shí)觸發(fā)，如點(diǎn)擊文本框時(shí)，觸發(fā)該事件；而blur事件則在元素丟失焦點(diǎn)時(shí)觸發(fā)，如點(diǎn)擊除文本框的任何元素，都會(huì)觸發(fā)該事件。

例如，在觸發(fā)文本框的“focus”事件時(shí)，<div>元素顯示提示內(nèi)容，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，當(dāng)點(diǎn)擊文本框時(shí)，觸發(fā)文本框的“focus”事件，在該事件中，頁(yè)面中的<div>元素顯示提示信息。

下拉列表框的change事件

當(dāng)一個(gè)元素的值發(fā)生變化時(shí)，將會(huì)觸發(fā)change事件，例如在選擇下拉列表框中的選項(xiàng)時(shí)，就會(huì)觸change事件。

例如，當(dāng)在頁(yè)面選擇下拉列表框中的選項(xiàng)時(shí)，將在<div>元素中顯示所選擇的選項(xiàng)內(nèi)容，如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，由于使用bind()方法綁定了下拉列表的“change”事件，因此，當(dāng)選擇列表中的選項(xiàng)時(shí)，在<div>元素中顯示所選擇的選項(xiàng)內(nèi)容。

調(diào)用live()方法綁定元素的事件

與bind()方法相同，live()方法與可以綁定元素的可執(zhí)行事件，除此相同功能之外，live()方法還可以綁定動(dòng)態(tài)元素，即使用代碼添加的元素事件，格式如下：

$(selector).live(event,[data],fun)

參數(shù)event為事件名稱，data為觸發(fā)事件時(shí)攜帶的數(shù)據(jù)，fun為觸發(fā)該事件時(shí)執(zhí)行的函數(shù)。

例如，使用live()方法綁定，頁(yè)面中按鈕元素的單擊事件，而這個(gè)按鈕是通過(guò)追加的方式添加至頁(yè)面的。如下圖所示：

在瀏覽器中顯示的效果：

從圖中可以看出，雖然按鈕元素是在事件綁定聲明之后，并且是通過(guò)追加的方式添加至頁(yè)面的，但由于使用的是live()方法綁定元素的事件，因此，仍然生效。

注意：從 jQuery 1.7 開始，不再建議使用 .live() 方法。1.9不支持.live()，本節(jié)代碼編輯器里的js引用版本改為了1.8。

總結(jié)

以上是生活随笔為你收集整理的jQuery 学习笔记（三）——事件与应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。