版權(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)行訪問(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. <!--水平線-->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>與水平線標(biāo)簽<hr>交替使用，形成帶有水平線修飾效果的文字標(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%*/7. background-color:#F2F2F2;/*背景顏色灰色*/8. margin:0;/*清除外邊距*/9. padding:0;/*清除內(nèi)邊距*/10. }8.4.2界面設(shè)計(jì)在CSS外部樣式表中為列表選項(xiàng)元素<li>設(shè)置樣式效果，相關(guān)CSS代碼如下：1. /*列表選項(xiàng)元素樣式設(shè)置*/2. ul#sliderli{3. margin-top:25%;/*外邊距頂部25%*/4. margin-left:10px;/*外邊距左側(cè)10px*/5. padding-left:10px;/*內(nèi)邊距左側(cè)10px*/6. text-align:left;/*文本左對(duì)齊*/7. }8. ul#sliderli:hover{9. color:red;/*鼠標(biāo)懸浮時(shí)文本變成紅色*/10. }8.4.2界面設(shè)計(jì)為了使標(biāo)題之間的水平線不要頂格顯示，在CSS外部樣式表中設(shè)置其寬度為80%，相關(guān)CSS代碼如下：此時(shí)CSS樣式設(shè)置就全部完成了，運(yùn)行效果如圖所示。1. /*水平線樣式設(shè)置*/2. hr{3. width:80%;/*寬度80%*/4. }8.4.3邏輯實(shí)現(xiàn)圖片切換效果需要使用到j(luò)Query的相關(guān)功能，因此首先在<head>標(biāo)簽中添加對(duì)于jQuery的調(diào)用。相關(guān)HTML5代碼修改后如下：1. <head>2. <metacharset="utf-8">3. <title>jQuery鼠標(biāo)懸停切換圖片</title>4. <linkrel="stylesheet"href="css/slider.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. </head>8.4.3邏輯實(shí)現(xiàn)在<script>中使用$("#sliderli").hover()監(jiān)聽(tīng)<li>元素的鼠標(biāo)懸浮事件，相關(guān)代碼如下：1. <script>2. $("#sliderli").hover(function(){3. //獲取當(dāng)前鼠標(biāo)懸浮的列表項(xiàng)索引值（從0開(kāi)始計(jì)數(shù)）4. vari=$("#sliderli").index(this);5. //更新頁(yè)面上的圖片6. $("#pptImage").attr("src","image/"+i+".jpg");7. });8. </script>8.4.3邏輯實(shí)現(xiàn)在<script>中使用$("#sliderli").hover()監(jiān)聽(tīng)<li>元素的鼠標(biāo)懸浮事件，相關(guān)代碼如下：1. <script>2. $("#sliderli").hover(function(){3. //獲取當(dāng)前鼠標(biāo)懸浮的列表項(xiàng)索引值（從0開(kāi)始計(jì)數(shù)）4. vari=$("#sliderli").index(this);5. //更新頁(yè)面上的圖片6. $("#pptImage").attr("src","image/"+i+".jpg");7. });8. </script>上述代碼表示，當(dāng)鼠標(biāo)懸浮在某一個(gè)<li>元素上時(shí)，更換id="pptImage"的<img>元素圖片來(lái)源。其中圖片文件位置本地image目錄中，文件名稱(chēng)由索引值i傳遞。因?yàn)樗饕凳菑?開(kāi)始計(jì)數(shù)，所以后臺(tái)存放的圖片文件名按照順序改成0.jpg-4.jpg。8.4.3邏輯實(shí)現(xiàn)此時(shí)本項(xiàng)目就已經(jīng)全部完成了，運(yùn)行效果如圖所示。由于第三張圖片為默認(rèn)初始顯示效果，這里不再重復(fù)展示。8.4.4案例思考【拓展練習(xí)】如果圖片名稱(chēng)沒(méi)有按照數(shù)組下標(biāo)的規(guī)律命名要如何顯示？【進(jìn)階改造】將風(fēng)景圖片換成新聞圖片，改造成新聞?shì)啿ソM件。本章小結(jié)本章小結(jié)本章主要介紹了jQuery事件的概念與常見(jiàn)用法。常用的jQuery事件根據(jù)類(lèi)型可分為文檔/窗口事件、鍵盤(pán)事件、鼠標(biāo)事件和表單事件。HTML元素的事件監(jiān)聽(tīng)也可以通過(guò)特定的方法來(lái)綁定或者解除，在jQuery1.7之后的版本中推薦使用on()和off()方法代替之前所有的事件綁定和解綁方法。本章階段案例介紹了鼠標(biāo)懸停切換圖片的動(dòng)態(tài)效果，使用jQuery事件綁定技術(shù)為列表項(xiàng)綁定了hover事件監(jiān)聽(tīng)和圖片來(lái)源的切換。Thankyou！JavaScript與jQuery
網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版學(xué)校名稱(chēng)：XXXX主講教師：XXXX第9章jQuery特效 本章學(xué)習(xí)目標(biāo) 掌握jQuery隱藏/顯示相關(guān)函數(shù)hide()、show()和toggle()的用法； 掌握jQuery淡入/淡出相關(guān)函數(shù)fadeIn()、fadeOut()、fadeToggle()、fadeTo()的用法； 掌握jQuery滑動(dòng)相關(guān)函數(shù)slideDown()、slideUp()、slideToggle()的用法； 掌握jQuery動(dòng)畫(huà)（Animation）的用法； 掌握jQuery方法鏈接（Chaining）的用法； 掌握jQuery停止動(dòng)畫(huà)相關(guān)函數(shù)stop()的用法。目錄9.1jQuery隱藏和顯示
9.2jQuery淡入和淡出
9.3jQuery滑動(dòng)
9.4jQuery動(dòng)畫(huà) 9.5jQuery方法鏈接 9.6jQuery停止動(dòng)畫(huà)9.7階段案例：動(dòng)態(tài)下拉菜單特效 9.1jQuery隱藏和顯示jQuery可以控制元素的隱藏和顯示，包括自定義變化效果的持續(xù)時(shí)間。其中hide()方法用于隱藏指定的元素，show()方法用于顯示指定的元素。9.1jQuery隱藏和顯示9.1.1jQueryhide() 9.1.2jQueryshow() 9.1.3jQuerytoggle()9.1.1jQueryhide()jQueryhide()方法用于隱藏指定的HTML元素。其語(yǔ)法結(jié)構(gòu)如下：$(selector).hide([duration][,callback]);9.1.1jQueryhide()該方法中selector參數(shù)位置可以是任意有效的選擇器，hide()方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置隱藏動(dòng)作的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為隱藏動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。9.1.1jQueryhide()使用不帶任何參數(shù)的hide()方法，可實(shí)現(xiàn)無(wú)動(dòng)畫(huà)效果的隱藏動(dòng)作。該方法能立刻隱藏處于顯示狀態(tài)的元素，相當(dāng)于將指定元素的CSS屬性設(shè)置為“display:none”。例如：該代碼表示立刻隱藏文檔中所有的段落元素<p>及其內(nèi)部所有內(nèi)容。$("p").hide();9.1.1jQueryhide()帶有duration參數(shù)值的jQueryhide()方法擁有動(dòng)畫(huà)效果。該參數(shù)默認(rèn)單位為毫秒，數(shù)值越大代表持續(xù)時(shí)間越長(zhǎng)，則動(dòng)畫(huà)效果越慢。其中“fast”默認(rèn)持續(xù)時(shí)間是200毫秒，而“slow”默認(rèn)是600毫秒。9.1.2jQueryshow()jQueryshow()方法用于顯示指定元素。其語(yǔ)法結(jié)構(gòu)如下：$(selector).show([duration][,callback]);9.1.2jQueryshow()同jQueryhide()方法類(lèi)似，該方法中selector參數(shù)位置可以是任意有效的選擇器，show()方法中的兩個(gè)參數(shù)均為可選，duration參數(shù)用于設(shè)置顯示的持續(xù)時(shí)間，可填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為顯示動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。9.1.2jQueryshow()使用不帶任何參數(shù)的show()方法，可實(shí)現(xiàn)無(wú)動(dòng)畫(huà)效果的顯示動(dòng)作。該方法能立刻顯示處于隱藏狀態(tài)的元素。例如：該代碼表示立刻顯示文檔中所有的段落元素<p>及其內(nèi)部所有內(nèi)容。$("p").show();9.1.2jQueryshow()帶有duration參數(shù)值的jQueryshow()方法擁有動(dòng)畫(huà)效果。該參數(shù)默認(rèn)單位為毫秒，數(shù)值越大代表持續(xù)時(shí)間越長(zhǎng)，則動(dòng)畫(huà)效果越慢。其中“fast”默認(rèn)持續(xù)時(shí)間是200毫秒，而“slow”默認(rèn)是600毫秒。9.1.2jQueryshow()【例9-1】jQuery隱藏和顯示的應(yīng)用9.1.3jQuerytoggle()jQuerytoggle()方法用于切換元素的隱藏和顯示。該方法可以替代hide()和show()方法單獨(dú)使用，用于顯示已隱藏的元素，或隱藏正在顯示的元素。9.1.3jQuerytoggle()【例9-2】jQuery隱藏/顯示切換的應(yīng)用9.2jQuery淡入和淡出9.2.1jQueryfadeIn() 9.2.2jQueryfadeOut() 9.2.3jQueryfadeToggle() 9.2.4jQueryfadeTo()
9.2jQuery淡入和淡出jQuery可以控制元素的透明度，使元素顏色加深或者淡化。相關(guān)方法有如下4種：fadeIn()：通過(guò)更改元素的透明度逐漸加深元素顏色，直至元素完全顯現(xiàn)，又稱(chēng)為淡入。fadeOut()：通過(guò)更改元素的透明度逐漸淡化元素顏色，直至元素完全隱藏，又稱(chēng)為淡出。fadeToggle()：元素淡出淡入效果切換，可用于淡入隱藏的元素，也可用于淡出可見(jiàn)的元素fadeTo()：用于將元素變?yōu)橹付ǖ耐该鞫龋〝?shù)值介于0-1之間）9.2.1jQueryfadeIn()jQueryfadeIn()方法用于實(shí)現(xiàn)元素的淡入效果，即將原先隱藏的元素逐漸顯示出來(lái)。其語(yǔ)法結(jié)構(gòu)如下：$(selector).fadeIn([duration][,callback])9.2.1jQueryfadeIn()該方法中selector參數(shù)位置可以是任意有效的選擇器，fadeIn()方法中的兩個(gè)參數(shù)均為可選參數(shù)。參數(shù)duration用于規(guī)定淡入效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeIn()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。9.2.2jQueryfadeOut()jQueryfadeOut()用于實(shí)現(xiàn)元素的淡出效果，即將原先存在的元素逐漸隱藏起來(lái)。其語(yǔ)法結(jié)構(gòu)如下：$(selector).fadeOut([duration][,callback])9.2.2jQueryfadeOut()與fadeIn()方法類(lèi)似，該方法中selector參數(shù)位置可以是任意有效的選擇器，fadeOut()方法中的兩個(gè)參數(shù)也均為可選參數(shù)。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeOut()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。9.2.2jQueryfadeOut()【例9-3】jQuery淡入和淡出的應(yīng)用9.2.3jQueryfadeToggle()jQueryfadeToggle()方法用于切換元素的淡出淡入效果。其語(yǔ)法結(jié)構(gòu)如下：$(selector).fadeToggle([duration][,callback])9.2.3jQueryfadeToggle()該方法中selector參數(shù)位置可以是任意有效的選擇器。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是fadeToggle()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱(chēng)。9.2.3jQueryfadeToggle()【例9-4】jQuery淡出/淡入切換的應(yīng)用9.2.4jQueryfadeTo()jQueryfadeTo()方法用于指定漸變效果的透明度，透明度的數(shù)值介于0至1之間。其語(yǔ)法結(jié)構(gòu)如下：$(selector).fadeTo(duration,opacity[,callback])9.2.4jQueryfadeTo()該方法中selector參數(shù)位置可以是任意有效的選擇器。fadeTo()方法中的參數(shù)解釋如下：duration：該參數(shù)為必填內(nèi)容，表示透明度漸變的持續(xù)時(shí)間，其默認(rèn)單位為毫秒，可填入“fast”或“slow”分別代表200毫秒和600毫秒的持續(xù)時(shí)間，也可填入自定義的數(shù)值，填入的數(shù)值越大代表持續(xù)時(shí)間越長(zhǎng)，因此動(dòng)畫(huà)效果越緩慢；opacity：該參數(shù)為必填內(nèi)容，用于設(shè)置元素的透明度。透明度的數(shù)值必須在0至1之間，數(shù)值越小透明度越高，0為完全透明，1為非透明；callback：該參數(shù)為可選內(nèi)容，用于指定當(dāng)前效果結(jié)束后的下一個(gè)函數(shù)名稱(chēng)，如果沒(méi)有可以省略不填。9.2.4jQueryfadeTo()【例9-5】jQuery設(shè)置淡入/淡出漸變值9.3jQuery滑動(dòng)jQuery的滑動(dòng)共有3種方法效果：slideDown()：向下滑動(dòng)元素slideUp()：向上滑動(dòng)元素slideToggle()：切換向上和向下滑動(dòng)元素9.3jQuery滑動(dòng)9.3.1jQueryslideDown() 9.3.2jQueryslideUp() 9.3.3jQueryslideToggle()
9.3.1jQueryslideDown()jQueryslideDown()方法用于向下滑動(dòng)元素。其語(yǔ)法結(jié)構(gòu)如下：該方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置向下滑動(dòng)效果的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為滑動(dòng)動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。$(selector).slideDown([duration][,callback])9.3.1jQueryslideDown()jQueryslideDown()方法中的duration參數(shù)默認(rèn)單位為毫秒，數(shù)值越大則動(dòng)畫(huà)效果越慢。其中“fast”默認(rèn)為200毫秒，“slow”默認(rèn)為600毫秒，duration參數(shù)值省略的情況下默認(rèn)持續(xù)時(shí)間為400毫秒。9.3.2jQueryslideUp()jQueryslideUp()方法用于向上滑動(dòng)元素。其語(yǔ)法結(jié)構(gòu)如下：該方法中的兩個(gè)參數(shù)均為可選。其中duration參數(shù)用于設(shè)置向上滑動(dòng)效果的持續(xù)時(shí)間，可以填入“slow”、“fast”或者具體的時(shí)間長(zhǎng)度（單位默認(rèn)為毫秒）；callback參數(shù)為滑動(dòng)動(dòng)作執(zhí)行完成后需要下一步執(zhí)行的函數(shù)名稱(chēng)，若無(wú)后續(xù)函數(shù)可省略不填。$(selector).slideUp([duration][,callback])9.3.2jQueryslideUp()jQueryslideUp()方法中的duration參數(shù)默認(rèn)單位為毫秒，數(shù)值越大則動(dòng)畫(huà)效果越慢。其中“fast”默認(rèn)為200毫秒，“slow”默認(rèn)為600毫秒，duration參數(shù)值省略的情況下默認(rèn)持續(xù)時(shí)間為400毫秒。9.3.2jQueryslideUp()【例9-6】jQuery滑動(dòng)的應(yīng)用9.3.3jQueryslideToggle()jQueryslideToggle()方法用于切換滑動(dòng)方向，其語(yǔ)法結(jié)構(gòu)如下：該方法中selector參數(shù)位置可以是任意有效的選擇器。其中可選參數(shù)duration用于規(guī)定淡出效果的時(shí)長(zhǎng)，可填入“fast”、“slow”或具體時(shí)長(zhǎng)數(shù)值（單位為毫秒）；可選參數(shù)callback指的是slideToggle()方法完成時(shí)需要執(zhí)行的下一個(gè)函數(shù)名稱(chēng)。$(selector).slideToggle([duration][,callback])9.3.3jQueryslideToggle()【例9-7】jQuery滑動(dòng)方向切換的應(yīng)用9.4jQuery動(dòng)畫(huà)9.4.1改變?cè)鼗緦傩?9.4.2改變?cè)匚恢?9.4.3動(dòng)畫(huà)隊(duì)列 9.4jQuery動(dòng)畫(huà)jQueryanimate()方法通過(guò)更改元素的CSS屬性值實(shí)現(xiàn)動(dòng)畫(huà)效果。其語(yǔ)法結(jié)構(gòu)如下：其中params參數(shù)為必填，duration和callback參數(shù)為可選。$(selector).animate({params}[,duration][,callback])9.4jQuery動(dòng)畫(huà)參數(shù)的具體解釋如下：params參數(shù)表示形成動(dòng)畫(huà)的CSS屬性，允許同時(shí)實(shí)現(xiàn)多個(gè)屬性的改變；duration參數(shù)表示規(guī)定的效果時(shí)長(zhǎng)，默認(rèn)單位為毫秒，可以填入”slow”、”fast”或具體數(shù)值。其中“fast”表示持續(xù)時(shí)間為200毫秒，“slow”表示為600毫秒。若填入具體數(shù)值，則數(shù)值越大動(dòng)畫(huà)效果越緩慢；callback參數(shù)表示動(dòng)畫(huà)完成后需要執(zhí)行的函數(shù)名稱(chēng)，若無(wú)下一步需執(zhí)行的函數(shù)可省略不填。9.4.1改變?cè)鼗緦傩詊Queryanimate()方法可以用于實(shí)現(xiàn)絕大部分CSS屬性的變化，例如元素的寬度、高度、透明度等。但是jQuery核心庫(kù)中并沒(méi)有包含色彩變化效果，因此如果要實(shí)現(xiàn)顏色動(dòng)畫(huà)，需要在jQuery的官方網(wǎng)站另外下載色彩動(dòng)畫(huà)的相關(guān)插件。9.4.1改變?cè)鼗緦傩援?dāng)CSS屬性名稱(chēng)中包含連字符“-”時(shí)，需要使用Camel標(biāo)記法（注：又稱(chēng)為駝峰標(biāo)記法，其特點(diǎn)是首個(gè)單詞小寫(xiě)、接下來(lái)的單詞都以首字母大寫(xiě)的一種形式。）進(jìn)行重新改寫(xiě)。例如，字體大小在CSS屬性中寫(xiě)為“font-size”，如需在jQueryanimate()中使用則必須改寫(xiě)為“fontSize”。9.4.1改變?cè)鼗緦傩詊Queryanimate()方法可作用于各種HTML元素，如段落元素<p>、標(biāo)題元素<h1>、塊元素<div>等。以一個(gè)簡(jiǎn)單的<div>元素為例，并為其配置測(cè)試按鈕，代碼如下：<buttonid="btn"type="button">開(kāi)始動(dòng)畫(huà)效果</button><br><div>你好，jQuery動(dòng)畫(huà)！</div>9.4.1改變?cè)鼗緦傩詾?lt;div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫(xiě)法如下：這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為黃色。<style> div{width:200px;height:200px;background-color:yellow}</style>9.4.1改變?cè)鼗緦傩詾?lt;div>元素設(shè)置動(dòng)畫(huà)效果，當(dāng)點(diǎn)擊按鈕時(shí)執(zhí)行該動(dòng)畫(huà)內(nèi)容。$("#btn").click(function(){$("div").animate({ width:"400px", fontSize:"30px", opacity:0.25 },2000);});此段代碼表示，當(dāng)點(diǎn)擊id為“btn”的按鈕時(shí)激發(fā)<div>元素的動(dòng)畫(huà)效果，在2秒的持續(xù)時(shí)間內(nèi)<div>元素的寬度從200像素變?yōu)?00像素，字體大小從默認(rèn)值變?yōu)?0像素，透明度從默認(rèn)值1變?yōu)?.25。9.4.1改變?cè)鼗緦傩浴纠?-8】jQuery簡(jiǎn)單動(dòng)畫(huà)效果9.4.2改變?cè)匚恢胘Queryanimate()方法也可以通過(guò)使用CSS屬性中的方位值left、right、top和bottom改變?cè)匚恢脤?shí)現(xiàn)移動(dòng)效果。由于這些屬性值均為相對(duì)值，而在HTML中所有元素的position屬性值均默認(rèn)為靜態(tài)（static）無(wú)法移動(dòng)的，因此需要事先設(shè)置指定元素的position為relative、absolute或者fixed方能生效。9.4.2改變?cè)匚恢靡砸粋€(gè)簡(jiǎn)單的<div>元素為例，并為其配置測(cè)試按鈕，代碼如下：<buttonid="btn"type="button">開(kāi)始移動(dòng)</button><br><div>你好，jQuery動(dòng)畫(huà)！</div>9.4.2改變?cè)匚恢脼?lt;div>元素設(shè)置一些初始屬性，在內(nèi)部樣式表中相關(guān)代碼寫(xiě)法如下：這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設(shè)置為綠色，元素初始位置為相對(duì)位置。<style>div{width:100px;height:100px;background-color:green;color:white;position:relative}</style>9.4.2改變?cè)匚恢脼?lt;div>元素設(shè)置動(dòng)畫(huà)效果，當(dāng)點(diǎn)擊按鈕時(shí)執(zhí)行該動(dòng)畫(huà)內(nèi)容。上述代碼表示當(dāng)點(diǎn)擊id為"btn"的按鈕時(shí)激發(fā)<div>元素的動(dòng)畫(huà)效果。在2秒的持續(xù)時(shí)間內(nèi)<div>元素從初始位置向右平移200像素，并且同時(shí)向下垂直移動(dòng)100像素。其中l(wèi)eft:"+=200"和top:"+=100"為相對(duì)值寫(xiě)法，表示相對(duì)于初始位置的移動(dòng)效果并省略了單位像素（px）。$("#btn").click(function(){$("div").animate({ left:"+=200",top:"+=100" },2000);});});9.4.2改變?cè)匚恢谩纠?-9】jQuery位置移動(dòng)動(dòng)畫(huà)效果9.4.3動(dòng)畫(huà)隊(duì)列jQuery可以為多個(gè)連續(xù)的animate()方法創(chuàng)建動(dòng)畫(huà)隊(duì)列，然后依次執(zhí)行隊(duì)列中的每一項(xiàng)動(dòng)畫(huà)從而實(shí)現(xiàn)更加復(fù)雜的動(dòng)畫(huà)效果。在同一個(gè)animate()方法中描述的多個(gè)動(dòng)畫(huà)效果會(huì)同時(shí)發(fā)生，但在不同的animate()方法中描述的動(dòng)畫(huà)效果會(huì)按照動(dòng)畫(huà)隊(duì)列中的先后次序發(fā)生。
溫馨提示
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年魚(yú)塘綜合利用租賃協(xié)議2篇
- 2024年甲乙雙方關(guān)于2024年奧運(yùn)會(huì)贊助權(quán)益分配的合同
- 2025年度蜜蜂產(chǎn)業(yè)聯(lián)盟合作協(xié)議范本3篇
- 2025年度博物館館藏品安全保管與修復(fù)服務(wù)合同3篇
- 2024年規(guī)范版夜間出租車(chē)租賃合同版
- 臨沂大學(xué)《民航服務(wù)英語(yǔ)（一）》2023-2024學(xué)年第一學(xué)期期末試卷
- 上海出版印刷高等專(zhuān)科學(xué)?！洞髮W(xué)英語(yǔ)四》2023-2024學(xué)年第一學(xué)期期末試卷
- 2024年連鎖加盟合同樣本
- 鄭州職業(yè)技術(shù)學(xué)院《高級(jí)程序語(yǔ)言設(shè)計(jì)》2023-2024學(xué)年第一學(xué)期期末試卷
- 鄭州工商學(xué)院《病原生物學(xué)B》2023-2024學(xué)年第一學(xué)期期末試卷
- 2024年國(guó)家公務(wù)員錄用考試公共基礎(chǔ)知識(shí)復(fù)習(xí)題庫(kù)2500題及答案
- DB3309T 98-2023 登步黃金瓜生產(chǎn)技術(shù)規(guī)程
- DBJ41-T 108-2011 鋼絲網(wǎng)架水泥膨脹珍珠巖夾芯板隔墻應(yīng)用技術(shù)規(guī)程
- 2025年學(xué)長(zhǎng)引領(lǐng)的讀書(shū)會(huì)定期活動(dòng)合同
- 水利工程全生命周期管理-洞察分析
- 2024年物業(yè)公司服務(wù)質(zhì)量保證合同條款
- JJF(陜) 049-2021 變壓器交流阻抗參數(shù)測(cè)試儀校準(zhǔn)規(guī)范
- 詞語(yǔ)理解-2025年中考語(yǔ)文專(zhuān)項(xiàng)復(fù)習(xí)（遼寧專(zhuān)用）（原卷版）
- 娛樂(lè)場(chǎng)所突發(fā)事件應(yīng)急措施及疏散預(yù)案（三篇）
- 八大危險(xiǎn)作業(yè)安全培訓(xùn)考核試卷
- 老年焦慮癥的護(hù)理
評(píng)論
0/150
提交評(píng)論