《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》課件 CH08 jQuery事件_第1頁(yè)
《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》課件 CH08 jQuery事件_第2頁(yè)
《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》課件 CH08 jQuery事件_第3頁(yè)
《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》課件 CH08 jQuery事件_第4頁(yè)
《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》課件 CH08 jQuery事件_第5頁(yè)
已閱讀5頁(yè)，還剩125頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

JavaScript與jQuery

網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版學(xué)校名稱(chēng)：XXXX主講教師：XXXX第8章jQuery事件 本章學(xué)習(xí)目標(biāo) 了解jQuery事件的基礎(chǔ)語(yǔ)法格式； 掌握常見(jiàn)jQuery文檔/窗口事件的用法； 掌握常見(jiàn)jQuery鍵盤(pán)事件的用法； 掌握常見(jiàn)jQuery鼠標(biāo)事件的用法； 掌握常見(jiàn)jQuery表單事件的用法； 掌握jQuery事件綁定與解除的用法； 掌握jQuery臨時(shí)事件的用法。目錄8.1jQuery事件概述 8.2常用jQuery事件 8.3jQuery事件綁定與解除8.4階段案例：鼠標(biāo)懸停切換圖片 8.1jQuery事件概述8.1.1事件的含義 8.1.2jQuery事件語(yǔ)法格式 8.1.1事件的含義事件指的是HTML頁(yè)面對(duì)不同用戶(hù)操作動(dòng)作的響應(yīng)。當(dāng)用戶(hù)做某個(gè)特定操作時(shí)將觸發(fā)頁(yè)面對(duì)應(yīng)的事件，例如點(diǎn)擊按鈕、移動(dòng)鼠標(biāo)、提交表單等?？梢允孪葹橹付ǖ氖录远x需要運(yùn)行的腳本程序，事件被觸發(fā)時(shí)將自動(dòng)執(zhí)行這段代碼。8.1.2jQuery事件語(yǔ)法格式在jQuery中，事件的語(yǔ)法格式如下：其中$(selector)可以是事件允許的jQuery選擇器，action需要替換為被監(jiān)聽(tīng)的事件名稱(chēng)。$(selector).action(function(){//事件觸發(fā)后需要執(zhí)行的自定義腳本代碼});8.1.2jQuery事件語(yǔ)法格式例如，為段落元素<p>添加鼠標(biāo)點(diǎn)擊事件click，其jQuery代碼如下:上述代碼中的關(guān)鍵詞click表示鼠標(biāo)左鍵單擊事件，當(dāng)用戶(hù)使用鼠標(biāo)點(diǎn)擊了段落元素時(shí)將執(zhí)行其中的alert()語(yǔ)句。$("p").click(function(){alert("段落元素被鼠標(biāo)點(diǎn)擊了！");});8.2常用jQuery事件常用jQuery事件根據(jù)其性質(zhì)可以歸納為以下四類(lèi)：文檔/窗口事件：頁(yè)面文檔或?yàn)g覽器窗口發(fā)生變化時(shí)所觸發(fā)的事件；鍵盤(pán)事件：用戶(hù)操作鍵盤(pán)所觸發(fā)的事件； 鼠標(biāo)事件：用戶(hù)操作鼠標(biāo)所觸發(fā)的事件； 表單事件：用戶(hù)操作表單所觸發(fā)的事件。8.2常用jQuery事件8.2.1文檔/窗口事件 8.2.2鍵盤(pán)事件 8.2.3鼠標(biāo)事件 8.2.4表單事件 8.2.1文檔/窗口事件jQuery常見(jiàn)文檔/窗口事件如表所示。8.2.1文檔/窗口事件1. ready()事件ready()事件又稱(chēng)為準(zhǔn)備就緒事件，該事件只在文檔準(zhǔn)備就緒時(shí)觸發(fā)，因此其選擇器只能是$(document)。一般來(lái)說(shuō)，為了避免文檔在準(zhǔn)備就緒前就執(zhí)行了其他jQuery代碼而導(dǎo)致錯(cuò)誤，所有的jQuery函數(shù)都需要寫(xiě)在文檔準(zhǔn)備就緒（documentready）函數(shù)中。8.2.1文檔/窗口事件1. ready()事件其語(yǔ)法格式如下：其中function為必填參數(shù)，表示文檔加載完畢后需要運(yùn)行的函數(shù)。$(document).ready(function)8.2.1文檔/窗口事件1. ready()事件例如：上述代碼表示在頁(yè)面加載完畢時(shí)執(zhí)行alert()語(yǔ)句跳出提示框。$(document).ready(function(){alert("頁(yè)面已經(jīng)準(zhǔn)備就緒！");});8.2.1文檔/窗口事件1. ready()事件在實(shí)際使用時(shí)，文檔準(zhǔn)備就緒函數(shù)function的內(nèi)部代碼可以更為豐富，例如可以是多個(gè)獨(dú)立的jQuery語(yǔ)句或者jQuery函數(shù)的調(diào)用組合而成。瀏覽器會(huì)按照先后順序執(zhí)行其內(nèi)部的全部代碼。8.2.1文檔/窗口事件1. ready()事件由于ready()事件只用于當(dāng)前文檔，因此也可以省略選擇器將其精簡(jiǎn)為以下兩種格式：需要注意是，ready()事件不要與<body>元素的onload屬性一起使用，以免產(chǎn)生沖突。$().ready(function)或者$(function)8.2.1文檔/窗口事件1. ready()事件【例8-1】jQueryready()事件的簡(jiǎn)單應(yīng)用8.2.1文檔/窗口事件2. load()事件當(dāng)頁(yè)面中指定的元素被加載完畢時(shí)會(huì)觸發(fā)load()事件。該事件通常用于監(jiān)聽(tīng)具有可加載內(nèi)容的元素，例如圖像元素<img>、內(nèi)聯(lián)框架<iframe>等。其語(yǔ)法格式如下：其中參數(shù)function為必填內(nèi)容，表示元素加載完畢時(shí)需要執(zhí)行的函數(shù)。$(selector).load(function)8.2.1文檔/窗口事件2. load()事件例如：上述代碼表示當(dāng)圖像元素<img>中的圖片資源加載完畢時(shí)彈出提示框。$("img").load(function(){alert("圖像已經(jīng)加載完畢！");});8.2.1文檔/窗口事件2. load()事件【例8-2】jQueryload()事件的簡(jiǎn)單應(yīng)用8.2.1文檔/窗口事件3. unload()事件當(dāng)用戶(hù)離開(kāi)當(dāng)前頁(yè)面時(shí)會(huì)觸發(fā)unload()事件，該事件只適用于window對(duì)象?？赡軐?dǎo)致觸發(fā)unload()事件的行為如下： 關(guān)閉整個(gè)瀏覽器或當(dāng)前頁(yè)面； 在當(dāng)前頁(yè)面的瀏覽器地址欄中輸入新的URL地址并進(jìn)行訪(fǎng)問(wèn)； 使用瀏覽器上的前進(jìn)或后退按鈕；點(diǎn)擊瀏覽器上的刷新按鈕或當(dāng)前瀏覽器支持快捷方式刷新頁(yè)面； 點(diǎn)擊當(dāng)前頁(yè)面中的某個(gè)超鏈接導(dǎo)致跳轉(zhuǎn)新頁(yè)面。8.2.1文檔/窗口事件3. unload()事件其語(yǔ)法格式如下：其中參數(shù)function為必填內(nèi)容，表示離開(kāi)頁(yè)面時(shí)需要執(zhí)行的函數(shù)。$(window).unload(function)8.2.1文檔/窗口事件3. unload()事件例如：$(window).unload(function(){

alert("您已經(jīng)離開(kāi)當(dāng)前頁(yè)面，再見(jiàn)！");});8.2.1文檔/窗口事件3. unload()事件需要注意是，在實(shí)踐中發(fā)現(xiàn)在不同瀏覽器中unload()事件的兼容情況不是很理想，例如在IE9+或Chrome瀏覽器中僅有刷新會(huì)觸發(fā)該事件，關(guān)閉瀏覽器時(shí)無(wú)任何響應(yīng)。與此同時(shí)，jQuery官方也宣布在jQuery3.0之后的版本將徹底取消對(duì)unload()事件的支持，因此不建議將該事件運(yùn)用于未來(lái)的實(shí)踐開(kāi)發(fā)中。8.2.1文檔/窗口事件3. unload()事件【例8-3】jQueryunload()事件的簡(jiǎn)單應(yīng)用8.2.2鍵盤(pán)事件鍵盤(pán)按鍵的敲擊可以分解為兩個(gè)過(guò)程：1.按鍵被按下去；2.按鍵被松開(kāi)。這兩個(gè)動(dòng)作分別觸發(fā)或組合的jQuery鍵盤(pán)事件如表所示。8.2.2鍵盤(pán)事件以上三種鍵盤(pán)事件的選擇器均可以是$(document)或者文檔中的HTML元素。如果直接在文檔上設(shè)置，則無(wú)論元素是否獲取了焦點(diǎn)都會(huì)觸發(fā)該事件；如果是指定了選擇器，則必須在該選擇器指定的元素獲得焦點(diǎn)的狀態(tài)下才會(huì)觸發(fā)該事件。8.2.2鍵盤(pán)事件1. keydown()事件當(dāng)鍵盤(pán)上的按鍵處于按下?tīng)顟B(tài)時(shí)將觸發(fā)keydown()事件，其語(yǔ)法格式如下：$(selector).keydown(function)8.2.2鍵盤(pán)事件1. keydown()事件例如：上述代碼表示當(dāng)用戶(hù)在表單的文本框<input>元素中輸入內(nèi)容時(shí)觸發(fā)keydown()事件。$("input:text").keydown(function(){alert("按鍵被按下！");});8.2.2鍵盤(pán)事件2.keyup()事件當(dāng)鍵盤(pán)上已經(jīng)被按下去的按鍵處于被釋放的狀態(tài)將觸發(fā)keyup()事件，其語(yǔ)法格式如下：$(selector).keyup(function)8.2.2鍵盤(pán)事件2.keyup()事件例如：上述代碼表示當(dāng)用戶(hù)在表單的文本框<input>元素中輸入內(nèi)容并在松開(kāi)按鍵時(shí)觸發(fā)keyup()事件。$("input:text").keyup(function(){alert("按鍵被釋放！");});8.2.2鍵盤(pán)事件3.keypress()事件當(dāng)鍵盤(pán)上的按鍵處于按下并快速釋放時(shí)將觸發(fā)keypress()事件，其語(yǔ)法格式如下：簡(jiǎn)而言之，keypress()事件可以看作是快速實(shí)現(xiàn)keydown()和keyup()事件的一個(gè)組合，表示鍵盤(pán)被敲擊。$(selector).keypress(function)8.2.2鍵盤(pán)事件3.keypress()事件例如：上述代碼表示當(dāng)用戶(hù)在表單的文本框<input>元素中輸入內(nèi)容時(shí)觸發(fā)keypress()事件。$("input:text").keypress(function){alert("按鍵被敲擊！");}8.2.2鍵盤(pán)事件【例8-4】jQuery鍵盤(pán)事件的簡(jiǎn)單應(yīng)用8.2.3鼠標(biāo)事件jQuery常見(jiàn)鼠標(biāo)事件如表所示。注：鼠標(biāo)事件的選擇器可以是文檔中的任意HTML元素。8.2.3鼠標(biāo)事件1. click()事件當(dāng)用戶(hù)使用鼠標(biāo)左鍵點(diǎn)擊（單擊）網(wǎng)頁(yè)文檔中的任意HTML元素時(shí)均可以觸發(fā)click()事件，其語(yǔ)法格式如下：$(selector).click(function)8.2.3鼠標(biāo)事件1. click()事件以按鈕<button>元素為例，被鼠標(biāo)左鍵點(diǎn)擊后彈出警告框的代碼如下：當(dāng)click()事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("button").click(function(){alert("click事件被觸發(fā)！");});8.2.3鼠標(biāo)事件2. dblclick()事件當(dāng)用戶(hù)使用鼠標(biāo)左鍵雙擊網(wǎng)頁(yè)文檔中的任意HTML元素時(shí)均可以觸發(fā)dblclick()事件，其語(yǔ)法格式如下：$(selector).dblclick(function)8.2.3鼠標(biāo)事件2. dblclick()事件以按鈕<button>元素為例，被鼠標(biāo)左鍵雙擊后彈出警告框的代碼如下：當(dāng)dblclick()事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("button").dblclick(function(){alert("dblclick事件被觸發(fā)！");});8.2.3鼠標(biāo)事件3. hover()事件當(dāng)用戶(hù)將鼠標(biāo)懸停在網(wǎng)頁(yè)文檔中的任意HTML元素上時(shí)將會(huì)觸發(fā)hover()事件，其語(yǔ)法格式如下：$(selector).hover(function)8.2.3鼠標(biāo)事件3. hover()事件以段落元素<p>為例，鼠標(biāo)懸停在該元素上時(shí)彈出警告框的代碼如下：當(dāng)hover()事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("p").hover(function(){alert("hover事件被觸發(fā)！");});8.2.3鼠標(biāo)事件【例8-5】jQuery鼠標(biāo)事件click()、dbclick()與hover()的簡(jiǎn)單應(yīng)用8.2.3鼠標(biāo)事件4. mousexxx()系列事件以關(guān)鍵詞mouse開(kāi)頭的一系列鼠標(biāo)事件是根據(jù)鼠標(biāo)移動(dòng)方向或效果來(lái)區(qū)分的，其語(yǔ)法格式如下：$(selector).mousexxx(function)8.2.3鼠標(biāo)事件4. mousexxx()系列事件其中xxx替換成具體的動(dòng)作效果，可替換的關(guān)鍵詞如下：down：鼠標(biāo)按鍵被按下；up：鼠標(biāo)按鍵被釋放，與down相反；move：鼠標(biāo)處于移動(dòng)狀態(tài)；enter：鼠標(biāo)進(jìn)入指定元素；leave：鼠標(biāo)離開(kāi)指定元素，與enter相反；out：鼠標(biāo)離開(kāi)指定元素或其子元素；over：鼠標(biāo)穿過(guò)指定元素或其子元素，與out相反。8.2.3鼠標(biāo)事件4. mousexxx()系列事件【例8-6】jQuery鍵盤(pán)事件mouse系列的簡(jiǎn)單應(yīng)用18.2.3鼠標(biāo)事件4. mousexxx()系列事件【例8-7】jQuery鍵盤(pán)事件mouse系列的簡(jiǎn)單應(yīng)用28.2.3鼠標(biāo)事件4. mousexxx()系列事件【例8-8】jQuery鍵盤(pán)事件mouse系列的簡(jiǎn)單應(yīng)用38.2.3鼠標(biāo)事件4. mousexxx()系列事件【例8-9】jQuery鍵盤(pán)事件mouse系列的簡(jiǎn)單應(yīng)用48.2.3鼠標(biāo)事件5. toggle()事件toggle()事件可以看作是一種特殊的鼠標(biāo)點(diǎn)擊事件，可以一次綁定兩個(gè)或兩個(gè)以上函數(shù)。當(dāng)元素被鼠標(biāo)點(diǎn)擊時(shí)，會(huì)按照先后順序每次只觸發(fā)其中一個(gè)函數(shù)。8.2.3鼠標(biāo)事件5. toggle()事件其語(yǔ)法格式如下：其中function1-N可以替換成需要觸發(fā)的若干個(gè)函數(shù)，函數(shù)之間用逗號(hào)隔開(kāi)即可。$(selector).toggle(function1,function2,…functionN)8.2.3鼠標(biāo)事件5. toggle()事件以按鈕<button>的toggle()事件為例，綁定三個(gè)自定義函數(shù)的語(yǔ)法格式如下：$("button").toggle( function(){ alert("toggle事件首次被觸發(fā)，運(yùn)行該函數(shù)。"); }, function(){ alert("toggle事件第二次被觸發(fā)，運(yùn)行該函數(shù)。"); }, function(){ alert("toggle事件第三次被觸發(fā)，運(yùn)行該函數(shù)。"); });8.2.3鼠標(biāo)事件5. toggle()事件每次點(diǎn)擊該按鈕都會(huì)觸發(fā)一次toggle事件，按照點(diǎn)擊的次數(shù)會(huì)依次運(yùn)行其中的第一、二、三個(gè)函數(shù)，當(dāng)最后一個(gè)函數(shù)被執(zhí)行則下一次觸發(fā)該toggle事件將重新運(yùn)行第一個(gè)函數(shù)的內(nèi)容。8.2.3鼠標(biāo)事件5. toggle()事件特別需要注意的是：toggle()事件在jQuery1.8版之后已過(guò)期。因此這里僅作大致了解，不再進(jìn)行完整示例，也請(qǐng)讀者在實(shí)際開(kāi)發(fā)過(guò)程中請(qǐng)慎用該事件。8.2.4表單事件jQuery常見(jiàn)表單事件如表所示。8.2.4表單事件1. blur()事件當(dāng)某個(gè)處于選中狀態(tài)的元素失去焦點(diǎn)時(shí)將觸發(fā)blur()事件，其語(yǔ)法格式如下：該事件的選擇器初期只能是表單元素，目前已經(jīng)適用于任意HTML元素。通過(guò)鼠標(biāo)點(diǎn)擊元素以外的位置，或者鍵盤(pán)Tab按鍵等方式均可以令元素失去焦點(diǎn)。$(selector).blur(function)8.2.4表單事件1. blur()事件以表單中的<input>元素為例，失去焦點(diǎn)時(shí)彈出警告框的代碼如下：當(dāng)blur()事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("input").blur(function(){alert("blur事件被觸發(fā)！");});8.2.4表單事件2. focus()事件當(dāng)某個(gè)處于未選中狀態(tài)的元素獲得焦點(diǎn)時(shí)將觸發(fā)focus()事件，其語(yǔ)法格式如下：該事件的選擇器初期只能是表單元素或超鏈接元素，目前已經(jīng)適用于任意HTML元素。通過(guò)鼠標(biāo)點(diǎn)擊元素、鍵盤(pán)Tab按鍵切換等方式均可以令元素獲得焦點(diǎn)。$(selector).focus(function)8.2.4表單事件2. focus()事件同樣以表單中的<input>元素為例，獲得焦點(diǎn)時(shí)彈出警告框的代碼如下：當(dāng)focus()事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("input").focus(function(){alert("focus事件被觸發(fā)！");});8.2.4表單事件【例8-10】jQuery表單事件blur()和focus()的簡(jiǎn)單應(yīng)用8.2.4表單事件3. change()事件當(dāng)輸入框或下拉菜單中的內(nèi)容發(fā)生變化時(shí)將觸發(fā)change()事件，其語(yǔ)法格式如下：其選擇器可以是表單中的輸入框<input>、多行文本框<textarea>或者下拉菜單<select>。$(selector).change(function)8.2.4表單事件3. change()事件其觸發(fā)效果不同之處總結(jié)如下：選擇器為<input>或<textarea>：用戶(hù)更改輸入框中的內(nèi)容然后讓該輸入框失去焦點(diǎn)才觸發(fā)change()事件；選擇器為<select>：用戶(hù)選擇不同的選項(xiàng)時(shí)觸發(fā)change()事件。8.2.4表單事件3. change()事件以下拉菜單<select>元素為例，選項(xiàng)被切換后彈出警告框的代碼如下：當(dāng)change事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("select").change(function(){alert("change事件被觸發(fā)！");});8.2.4表單事件4. select()事件當(dāng)文本輸入框中有文字內(nèi)容被選中時(shí)，將觸發(fā)該元素的select()事件。其語(yǔ)法格式如下：其選擇器只能是單行文本框<inputtype="text">或多行文本框<textarea>。$(selector).select(function)8.2.4表單事件4. select()事件以表單中的<input>元素為例，被鼠標(biāo)選中文本內(nèi)容后彈出警告框的代碼如下：當(dāng)select事件被觸發(fā)時(shí)，會(huì)執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("input").select(function(){alert("select事件被觸發(fā)！");});8.2.4表單事件【例8-11】jQuery表單事件change()和select()的簡(jiǎn)單應(yīng)用8.2.4表單事件5. submit()事件當(dāng)用戶(hù)嘗試提交表單時(shí)將觸發(fā)表單元素<form>的submit()事件，其語(yǔ)法格式如下：顯然，該事件的選擇器只能是表單元素<form>。$(selector).submit(function)8.2.4表單事件5. submit()事件用戶(hù)有兩種提交表單的方式：點(diǎn)擊特定的提交按鈕或者使用鍵盤(pán)上的Enter鍵。特定的提交按鈕包括：<inputtype="submit">、<inputtype="image">以及<buttontype="submit">；使用Enter鍵的前提是表單中只有一個(gè)文本域，或者表單中包含了提交按鈕。8.2.4表單事件5. submit()事件以id="form01"的<form>元素為例，用戶(hù)提交表單時(shí)彈出警告框的代碼如下：與其他表單事件不同之處在于，其中function(e)中的參數(shù)e為必填內(nèi)容。也可以用其他自定義變量名稱(chēng)代替，例如event也較為常見(jiàn)。$("#form01").submit(function(e){alert("click事件被觸發(fā)！");});8.2.4表單事件5. submit()事件由于submit()事件會(huì)在表單正式提交給服務(wù)器之前觸發(fā)，因此常用其進(jìn)行有效性檢測(cè)：當(dāng)表單中填寫(xiě)的內(nèi)容驗(yàn)證不通過(guò)時(shí)顯示提示語(yǔ)句，并停止表單提交的動(dòng)作；當(dāng)內(nèi)容驗(yàn)證通過(guò)時(shí)繼續(xù)完成表單提交的動(dòng)作。8.2.4表單事件5. submit()事件【例8-12】jQuery事件submit()的簡(jiǎn)單應(yīng)用8.3jQuery事件綁定與解除在jQuery中，HTML元素的事件監(jiān)聽(tīng)是可以通過(guò)特定的方法來(lái)綁定或者解除的。本章節(jié)將介紹如何為指定的HTML元素綁定事件、解除事件以及追加臨時(shí)事件。8.3jQuery事件綁定與解除8.3.1jQuery事件綁定 8.3.2jQuery事件解除 8.3.3jQuery臨時(shí)事件 8.3.1jQuery事件綁定

目前jQuery常用的事件綁定方法如表所示。需要注意的是，在jQuery3.0之后的版本將徹底取消對(duì)bind()和delegate()方法的支持，因此在未來(lái)的實(shí)踐開(kāi)發(fā)中建議使用on()來(lái)替換前兩種方法。8.3.1jQuery事件綁定1. bind()方法bind()方法可以用于給指定的元素綁定一個(gè)或多個(gè)事件，其語(yǔ)法格式如下：參數(shù)解釋如下：

event：必填參數(shù)，用于指定事件名稱(chēng)。例如"click"。

data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。

function：必填參數(shù)，用于規(guī)定事件觸發(fā)時(shí)的執(zhí)行函數(shù)。$(selector).bind(event,[data,]function)8.3.1jQuery事件綁定1. bind()方法例如，為按鈕<button>元素綁定點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：$("button").bind("click",function(){alert("按鈕的點(diǎn)擊事件被觸發(fā)！");})8.3.1jQuery事件綁定1. bind()方法如果指定元素綁定的多個(gè)事件需要調(diào)用同一個(gè)函數(shù)，可以將這些事件名稱(chēng)用空格隔開(kāi)后并列添加在參數(shù)event中，例如：$("button").bind("clickdblclickmouseenter",function(){alert("按鈕的單擊/雙擊/鼠標(biāo)進(jìn)入事件被觸發(fā)！");})8.3.1jQuery事件綁定1. bind()方法如果需要為指定元素同時(shí)綁定多個(gè)事件并觸發(fā)不同的函數(shù)，其語(yǔ)法格式如下：該方法可以分別為每個(gè)事件單獨(dú)綁定函數(shù)，使用起來(lái)更為靈活。$(selector).bind({event1:function1,event2:function2,…eventN:functionN})8.3.1jQuery事件綁定1. bind()方法例如，為按鈕<button>元素同時(shí)綁定單擊、雙擊和鼠標(biāo)懸停事件，并實(shí)現(xiàn)不同的觸發(fā)效果。其代碼如下：上述代碼表示單擊、雙擊或鼠標(biāo)懸停于按鈕時(shí)網(wǎng)頁(yè)背景色分別更換為紅色、黃色或藍(lán)色。$("button").bind({ "click":function(){$("body").css("background-color","red");}, "dblclick":function(){$("body").css("background-color","yellow");}, "mouseover":function(){$("body").css("background-color","blue");}});8.3.1jQuery事件綁定2. delegate()方法delegate()方法可以用于給指定元素的子元素綁定一個(gè)或多個(gè)事件，其語(yǔ)法格式如下：$(selector).delegate(childSelector,event,[data,]function)8.3.1jQuery事件綁定2. delegate()方法參數(shù)解釋如下：

childSelector：必填參數(shù)，用于規(guī)定需要綁定事件的一個(gè)或多個(gè)子元素。

event：必填參數(shù)，用于指定需要綁定給子元素的一個(gè)或多個(gè)事件名稱(chēng)，例如"click"。如果有多個(gè)事件同時(shí)綁定需要用空格隔開(kāi)。例如"clickdblclickmouseover"。

data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。

function：可選參數(shù)，用于規(guī)定需要綁定的事件觸發(fā)時(shí)的執(zhí)行函數(shù)。8.3.1jQuery事件綁定2. delegate()方法例如，在id="test"的<div>元素中包含一個(gè)子元素<button>，其HTML頁(yè)面代碼如下：此時(shí)可以使用delegate()方法指定<div>元素，然后為其中的子元素<button>綁定事件。<divid="test"><button>我是按鈕子元素</button></div>8.3.1jQuery事件綁定2. delegate()方法以鼠標(biāo)左鍵點(diǎn)擊事件為例，jQuery代碼如下：上述代碼通過(guò)id="test"的<div>元素來(lái)準(zhǔn)確定位其中的子元素，此時(shí)綁定事件不會(huì)影響到在該<div>元素以外的其他任何<button>元素。$("#test").delegate("button","click",function(){alert("按鈕被點(diǎn)擊！");});8.3.1jQuery事件綁定2. delegate()方法delegate()方法的優(yōu)勢(shì)在于其還可以為指定元素的未來(lái)子元素（解釋?zhuān)杭串?dāng)前尚未創(chuàng)建，后續(xù)通過(guò)代碼動(dòng)態(tài)添加的子元素）綁定事件。8.3.1jQuery事件綁定3. on()方法on()方法是jQuery1.7版之后新增的內(nèi)容，可以用于給指定元素的子元素綁定一個(gè)或多個(gè)事件，包含了bind()和delegate()方法的全部功能。其語(yǔ)法格式如下：$(selector).on(event,[childSelector,][data,]function)8.3.1jQuery事件綁定3. on()方法參數(shù)解釋如下：event：必填參數(shù)，用于指定需要綁定給指定元素的一個(gè)或多個(gè)事件名稱(chēng)，例如"click"。如果有多個(gè)事件同時(shí)綁定需要用空格隔開(kāi)。例如"clickdblclickmouseover"。childSelector：可選參數(shù)，用于規(guī)定需要綁定事件的子元素，如果沒(méi)有可以不填。data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。function：可選參數(shù)，用于規(guī)定需要綁定的事件觸發(fā)時(shí)的執(zhí)行函數(shù)。8.3.1jQuery事件綁定3. on()方法將bind()方法改寫(xiě)為on()方法只需要修改方法名稱(chēng)，其他參數(shù)無(wú)需變化。例如，改用on()方法為按鈕<button>元素綁定點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：$("button").on("click",function(){alert("按鈕的點(diǎn)擊事件被觸發(fā)！");})8.3.1jQuery事件綁定3. on()方法將delegate()方法改寫(xiě)為on()方法時(shí)，需要注意子元素參數(shù)的位置：delegate()方法中的子元素參數(shù)在事件名稱(chēng)參數(shù)之前，而on()方法正相反。8.3.1jQuery事件綁定3. on()方法例如，改用on()方法指定id="test"的<div>元素，然后為其中的子元素<button>綁定事件。以鼠標(biāo)左鍵點(diǎn)擊事件為例，jQuery代碼如下：$("#test").on("click","button",function(){alert("按鈕被點(diǎn)擊！");});8.3.1jQuery事件綁定3. on()方法【例8-13】jQuery事件綁定on()方法的簡(jiǎn)單應(yīng)用8.3.2jQuery事件解除目前jQuery常用的事件解除方法如表所示。需要注意的是，在jQuery3.0之后的版本將徹底取消對(duì)unbind()和undelegate()方法的支持，因此建議在未來(lái)的實(shí)踐開(kāi)發(fā)中使用off()來(lái)替換前兩種方法。8.3.2jQuery事件解除1. unbind()方法unbind()方法可以用于給指定的元素解除事件觸發(fā)效果，其語(yǔ)法格式如下：$(selector).unbind([event][,function])8.3.2jQuery事件解除1. unbind()方法參數(shù)解釋如下：

event：可選參數(shù)，用于指定需要解除的一個(gè)或多個(gè)事件名稱(chēng)，例如"click"或"clickdblclickmouseover"。如果該參數(shù)不填寫(xiě)，則表示解除指定元素的全部事件。

function：可選參數(shù)，用于規(guī)定需要解除的事件觸發(fā)時(shí)的執(zhí)行函數(shù)。8.3.2jQuery事件解除1. unbind()方法例如，為按鈕<button>元素解除點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：$("button").unbind("click",function(){alert("按鈕的點(diǎn)擊事件被解除！");});8.3.2jQuery事件解除2. undelegate()方法delegate()方法可以用于給指定元素的子元素綁定一個(gè)或多個(gè)事件，其語(yǔ)法格式如下：$(selector).undelegate([childSelector,][event,][function])8.3.2jQuery事件解除2. undelegate()方法參數(shù)解釋如下：childSelector：可選參數(shù)，用于規(guī)定需要綁定事件的一個(gè)或多個(gè)子元素。event：可選參數(shù)，用于指定需要解除的一個(gè)或多個(gè)事件名稱(chēng)，例如"click"或"clickdblclickmouseover"。function：可選參數(shù)，用于規(guī)定需要解除的事件觸發(fā)時(shí)的執(zhí)行函數(shù)。注：如果不填寫(xiě)任何參數(shù)，則表示解除之前使用delegate()方法綁定的全部事件。8.3.2jQuery事件解除2. undelegate()方法例如，在id="test"的<div>元素中包含一個(gè)子元素<button>，其HTML頁(yè)面代碼如下：<divid="test"><button>我是按鈕子元素</button></div>8.3.2jQuery事件解除2. undelegate()方法使用undelegate()方法為其中的子元素<button>解除全部事件，代碼如下：$("#test").undelegate("button");8.3.2jQuery事件解除2. undelegate()方法如果只希望解除子元素<button>的click()事件，代碼修改如下：需要注意的是，udelegate()方法主要是用于解除之前使用delegate()方法綁定的事件，不能用于解除使用其他方法（例如bind()方法）的綁定事件。$("#test").undelegate("button","click");8.3.2jQuery事件解除3. off()方法off()方法是jQuery1.7版之后新增的內(nèi)容，可以用于給指定元素的子元素解除一個(gè)或多個(gè)事件，包含了unbind()和undelegate()方法的全部功能。其語(yǔ)法格式如下：$(selector).off(event,[childSelector,][data,]function)8.3.2jQuery事件解除3. off()方法參數(shù)解釋如下：event：必填參數(shù)，用于指定需要給指定元素解綁的一個(gè)或多個(gè)事件名稱(chēng)，例如"click"。如果有多個(gè)事件同時(shí)解綁需要用空格隔開(kāi)。例如"clickdblclickmouseover"。childSelector：可選參數(shù)，用于規(guī)定需要解綁事件的子元素，如果沒(méi)有可以不填。data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。function：可選參數(shù)，用于規(guī)定需要解綁的事件觸發(fā)時(shí)的執(zhí)行函數(shù)。8.3.2jQuery事件解除3. off()方法將unbind()方法改寫(xiě)為off()方法只需要修改方法名稱(chēng)，其他參數(shù)無(wú)需變化。例如，改用off()方法為按鈕<button>元素解綁點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：$("button").off("click",function(){alert("按鈕的點(diǎn)擊事件被解除！");})8.3.2jQuery事件解除3. off()方法將undelegate()方法改寫(xiě)為off()方法時(shí)，需要注意子元素參數(shù)的位置：undelegate()方法中的子元素參數(shù)在事件名稱(chēng)參數(shù)之前，而off()方法正相反。8.3.2jQuery事件解除3. off()方法例如，改用off()方法指定id="test"的<div>元素，然后為其中的子元素<button>解除事件。以鼠標(biāo)左鍵點(diǎn)擊事件為例，jQuery代碼如下：$("#test").off("click","button",function(){alert("按鈕的點(diǎn)擊事件被解除！");});8.3.2jQuery事件解除3. off()方法【例8-14】jQuery事件解除off()方法的簡(jiǎn)單應(yīng)用8.3.3jQuery臨時(shí)事件在某些特殊情況下，為元素綁定的事件僅需要執(zhí)行一次就必須解除綁定，此類(lèi)情況我們將其稱(chēng)為元素的臨時(shí)事件。8.3.3jQuery臨時(shí)事件例如，為按鈕<button>元素綁定臨時(shí)的點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：上述代碼使用了on()方法為按鈕進(jìn)行了click()事件的綁定，當(dāng)click()事件首次被觸發(fā)時(shí)立刻調(diào)用off()方法解綁事件。$("button").on("click",function(){alert("按鈕的點(diǎn)擊事件被觸發(fā)！");$(this).off("click");})8.3.3jQuery臨時(shí)事件事實(shí)上，在jQuery中已經(jīng)提供了專(zhuān)門(mén)的one()方法來(lái)代替on()和off()方法處理此類(lèi)情況。one()方法綁定的事件在觸發(fā)一次之后將自動(dòng)解除。其語(yǔ)法格式如下：$(selector).one(event,[childSelector,][data,]function)8.3.3jQuery臨時(shí)事件參數(shù)解釋如下：event：必填參數(shù)，用于指定需要綁定給指定元素的一個(gè)或多個(gè)事件名稱(chēng)，例如"click"。如果有多個(gè)事件同時(shí)綁定需要用空格隔開(kāi)。例如"clickdblclickmouseover"。childSelector：可選參數(shù)，用于規(guī)定需要綁定事件的子元素，如果沒(méi)有可以不填。data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。function：可選參數(shù)，用于規(guī)定需要綁定的事件觸發(fā)時(shí)需要執(zhí)行的函數(shù)。8.3.3jQuery臨時(shí)事件例如，使用one()方法修改上一段示例代碼，更新后的代碼如下：上述代碼只能被執(zhí)行一次，然后就會(huì)自行解除click()事件的綁定。用這種方式只需要定義綁定的事件即可，無(wú)需特意在處理之后追加事件解綁的腳本代碼。$("button").one("click",function(){alert("按鈕的點(diǎn)擊事件被觸發(fā)！");})8.3.3jQuery臨時(shí)事件【例8-15】jQuery臨時(shí)事件one()方法的簡(jiǎn)單應(yīng)用8.4階段案例：鼠標(biāo)懸停切換圖片8.4.1案例需求8.4.2界面設(shè)計(jì)8.4.3邏輯實(shí)現(xiàn)8.4.4案例思考8.4.1案例需求背景介紹：鼠標(biāo)懸停切換圖片特效是通過(guò)用戶(hù)鼠標(biāo)的選擇來(lái)顯示指定圖片內(nèi)容，該版塊也常用于網(wǎng)站首頁(yè)，例如商品展示、旅游景點(diǎn)介紹等。8.4.1案例需求功能要求：使用jQuery實(shí)現(xiàn)鼠標(biāo)懸停手動(dòng)切換展示圖片特效，如圖所示。當(dāng)用戶(hù)將鼠標(biāo)懸浮于左側(cè)的文字上時(shí)文字變成紅色，并且右側(cè)圖片自動(dòng)切換到對(duì)應(yīng)的畫(huà)面。8.4.2界面設(shè)計(jì)本項(xiàng)目的主要內(nèi)容分為兩個(gè)版塊：左側(cè)的列表標(biāo)簽<ul>用于顯示文字標(biāo)題，右側(cè)的<img>標(biāo)簽用于顯示圖片。結(jié)構(gòu)如圖所示。8.4.2界面設(shè)計(jì)創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如SliderDemo.html。在HTML5中使用<divclass="sliderWrap">元素將這兩個(gè)版塊嵌套在內(nèi)部，相關(guān)代碼如下：1. <body>2. <!--標(biāo)題-->3. <h3>jQuery鼠標(biāo)懸停切換圖片</h3>4. <!--水平線(xiàn)-->5. <hr>6. <!--圖片輪播區(qū)域-->7. <divclass="sliderWrap">8. <ulid="slider">9. <li>意大利威尼斯</li>10. <hr>11. <li>希臘愛(ài)琴海</li>12. <hr>13. <li>巴黎盧浮宮</li>14. <hr>15. <li>印度泰姬陵</li>16. <hr>17. <li>英國(guó)巨石陣</li>18. <hr>19. </ul>20. <imgid="pptImage"src="image/2.jpg"/>21. </div>在<ul>標(biāo)簽內(nèi)部將列表選項(xiàng)標(biāo)簽<li>與水平線(xiàn)標(biāo)簽<hr>交替使用，形成帶有水平線(xiàn)修飾效果的文字標(biāo)題。在<img>標(biāo)簽上設(shè)置初始顯示的圖片來(lái)源為本地image目錄下的2.jpg。8.4.2界面設(shè)計(jì)本示例使用CSS外部樣式表規(guī)定頁(yè)面樣式。在本地css文件夾中創(chuàng)建slider.css文件，并在<head>首尾標(biāo)簽中聲明對(duì)CSS文件的引用。相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>jQuery鼠標(biāo)懸停切換圖片</title>4. <linkrel="stylesheet"href="css/slider.css">5. </head>8.4.2界面設(shè)計(jì)在CSS外部樣式表中為<body>標(biāo)簽設(shè)置總體樣式，相關(guān)CSS代碼如下：1. /*整體背景樣式*/2. body{3. background-color:silver;/*背景顏色銀色*/4. text-align:center;/*文本居中*/5. }8.4.2界面設(shè)計(jì)為class="sliderWrap"的<div>標(biāo)簽設(shè)置樣式，相關(guān)CSS代碼如下：1. /*圖片輪播區(qū)域樣式設(shè)置*/2. .sliderWrap{3. width:800px;/*寬度800px*/4. height:400px;/*高度400px*/5. padding:0px;/*各邊內(nèi)邊距0*/6. margin:auto;/*各邊外邊距auto*/7. }8.4.2界面設(shè)計(jì)接下來(lái)設(shè)置頁(yè)面上展示的圖片樣式，相關(guān)CSS代碼如下：1. /*圖片樣式設(shè)置*/2. .sliderWrapimg{3. float:left;/*左浮動(dòng)*/4. height:100%;/*高度100%*/5. width:80%;/*寬度80%*/6. }8.4.2界面設(shè)計(jì)在CSS外部樣式表中為列表元素<ul>設(shè)置樣式效果，相關(guān)CSS代碼如下：1. /*列表元素樣式設(shè)置*/2. ul#slider{3. list-style:none;/*去掉裝飾點(diǎn)*/4. float:left;/*左浮動(dòng)*/5. height:100%;/*高度100%*/6. width:20%;/*寬度20%

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論