版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
JavaScript與jQuery
網頁前端開發(fā)與設計-第2版學校名稱：XXXX主講教師：XXXX第8章jQuery事件 本章學習目標 了解jQuery事件的基礎語法格式； 掌握常見jQuery文檔/窗口事件的用法； 掌握常見jQuery鍵盤事件的用法； 掌握常見jQuery鼠標事件的用法； 掌握常見jQuery表單事件的用法； 掌握jQuery事件綁定與解除的用法； 掌握jQuery臨時事件的用法。目錄8.1jQuery事件概述 8.2常用jQuery事件 8.3jQuery事件綁定與解除8.4階段案例：鼠標懸停切換圖片 8.1jQuery事件概述8.1.1事件的含義 8.1.2jQuery事件語法格式 8.1.1事件的含義事件指的是HTML頁面對不同用戶操作動作的響應。當用戶做某個特定操作時將觸發(fā)頁面對應的事件，例如點擊按鈕、移動鼠標、提交表單等?？梢允孪葹橹付ǖ氖录远x需要運行的腳本程序，事件被觸發(fā)時將自動執(zhí)行這段代碼。8.1.2jQuery事件語法格式在jQuery中，事件的語法格式如下：其中$(selector)可以是事件允許的jQuery選擇器，action需要替換為被監(jiān)聽的事件名稱。$(selector).action(function(){//事件觸發(fā)后需要執(zhí)行的自定義腳本代碼});8.1.2jQuery事件語法格式例如，為段落元素<p>添加鼠標點擊事件click，其jQuery代碼如下:上述代碼中的關鍵詞click表示鼠標左鍵單擊事件，當用戶使用鼠標點擊了段落元素時將執(zhí)行其中的alert()語句。$("p").click(function(){alert("段落元素被鼠標點擊了！");});8.2常用jQuery事件常用jQuery事件根據其性質可以歸納為以下四類：文檔/窗口事件：頁面文檔或瀏覽器窗口發(fā)生變化時所觸發(fā)的事件；鍵盤事件：用戶操作鍵盤所觸發(fā)的事件； 鼠標事件：用戶操作鼠標所觸發(fā)的事件； 表單事件：用戶操作表單所觸發(fā)的事件。8.2常用jQuery事件8.2.1文檔/窗口事件 8.2.2鍵盤事件 8.2.3鼠標事件 8.2.4表單事件 8.2.1文檔/窗口事件jQuery常見文檔/窗口事件如表所示。8.2.1文檔/窗口事件1. ready()事件ready()事件又稱為準備就緒事件，該事件只在文檔準備就緒時觸發(fā)，因此其選擇器只能是$(document)。一般來說，為了避免文檔在準備就緒前就執(zhí)行了其他jQuery代碼而導致錯誤，所有的jQuery函數都需要寫在文檔準備就緒（documentready）函數中。8.2.1文檔/窗口事件1. ready()事件其語法格式如下：其中function為必填參數，表示文檔加載完畢后需要運行的函數。$(document).ready(function)8.2.1文檔/窗口事件1. ready()事件例如：上述代碼表示在頁面加載完畢時執(zhí)行alert()語句跳出提示框。$(document).ready(function(){alert("頁面已經準備就緒！");});8.2.1文檔/窗口事件1. ready()事件在實際使用時，文檔準備就緒函數function的內部代碼可以更為豐富，例如可以是多個獨立的jQuery語句或者jQuery函數的調用組合而成。瀏覽器會按照先后順序執(zhí)行其內部的全部代碼。8.2.1文檔/窗口事件1. ready()事件由于ready()事件只用于當前文檔，因此也可以省略選擇器將其精簡為以下兩種格式：需要注意是，ready()事件不要與<body>元素的onload屬性一起使用，以免產生沖突。$().ready(function)或者$(function)8.2.1文檔/窗口事件1. ready()事件【例8-1】jQueryready()事件的簡單應用8.2.1文檔/窗口事件2. load()事件當頁面中指定的元素被加載完畢時會觸發(fā)load()事件。該事件通常用于監(jiān)聽具有可加載內容的元素，例如圖像元素<img>、內聯(lián)框架<iframe>等。其語法格式如下：其中參數function為必填內容，表示元素加載完畢時需要執(zhí)行的函數。$(selector).load(function)8.2.1文檔/窗口事件2. load()事件例如：上述代碼表示當圖像元素<img>中的圖片資源加載完畢時彈出提示框。$("img").load(function(){alert("圖像已經加載完畢！");});8.2.1文檔/窗口事件2. load()事件【例8-2】jQueryload()事件的簡單應用8.2.1文檔/窗口事件3. unload()事件當用戶離開當前頁面時會觸發(fā)unload()事件，該事件只適用于window對象?？赡軐е掠|發(fā)unload()事件的行為如下： 關閉整個瀏覽器或當前頁面； 在當前頁面的瀏覽器地址欄中輸入新的URL地址并進行訪問； 使用瀏覽器上的前進或后退按鈕；點擊瀏覽器上的刷新按鈕或當前瀏覽器支持快捷方式刷新頁面； 點擊當前頁面中的某個超鏈接導致跳轉新頁面。8.2.1文檔/窗口事件3. unload()事件其語法格式如下：其中參數function為必填內容，表示離開頁面時需要執(zhí)行的函數。$(window).unload(function)8.2.1文檔/窗口事件3. unload()事件例如：$(window).unload(function(){
alert("您已經離開當前頁面，再見！");});8.2.1文檔/窗口事件3. unload()事件需要注意是，在實踐中發(fā)現(xiàn)在不同瀏覽器中unload()事件的兼容情況不是很理想，例如在IE9+或Chrome瀏覽器中僅有刷新會觸發(fā)該事件，關閉瀏覽器時無任何響應。與此同時，jQuery官方也宣布在jQuery3.0之后的版本將徹底取消對unload()事件的支持，因此不建議將該事件運用于未來的實踐開發(fā)中。8.2.1文檔/窗口事件3. unload()事件【例8-3】jQueryunload()事件的簡單應用8.2.2鍵盤事件鍵盤按鍵的敲擊可以分解為兩個過程：1.按鍵被按下去；2.按鍵被松開。這兩個動作分別觸發(fā)或組合的jQuery鍵盤事件如表所示。8.2.2鍵盤事件以上三種鍵盤事件的選擇器均可以是$(document)或者文檔中的HTML元素。如果直接在文檔上設置，則無論元素是否獲取了焦點都會觸發(fā)該事件；如果是指定了選擇器，則必須在該選擇器指定的元素獲得焦點的狀態(tài)下才會觸發(fā)該事件。8.2.2鍵盤事件1. keydown()事件當鍵盤上的按鍵處于按下狀態(tài)時將觸發(fā)keydown()事件，其語法格式如下：$(selector).keydown(function)8.2.2鍵盤事件1. keydown()事件例如：上述代碼表示當用戶在表單的文本框<input>元素中輸入內容時觸發(fā)keydown()事件。$("input:text").keydown(function(){alert("按鍵被按下！");});8.2.2鍵盤事件2.keyup()事件當鍵盤上已經被按下去的按鍵處于被釋放的狀態(tài)將觸發(fā)keyup()事件，其語法格式如下：$(selector).keyup(function)8.2.2鍵盤事件2.keyup()事件例如：上述代碼表示當用戶在表單的文本框<input>元素中輸入內容并在松開按鍵時觸發(fā)keyup()事件。$("input:text").keyup(function(){alert("按鍵被釋放！");});8.2.2鍵盤事件3.keypress()事件當鍵盤上的按鍵處于按下并快速釋放時將觸發(fā)keypress()事件，其語法格式如下：簡而言之，keypress()事件可以看作是快速實現(xiàn)keydown()和keyup()事件的一個組合，表示鍵盤被敲擊。$(selector).keypress(function)8.2.2鍵盤事件3.keypress()事件例如：上述代碼表示當用戶在表單的文本框<input>元素中輸入內容時觸發(fā)keypress()事件。$("input:text").keypress(function){alert("按鍵被敲擊！");}8.2.2鍵盤事件【例8-4】jQuery鍵盤事件的簡單應用8.2.3鼠標事件jQuery常見鼠標事件如表所示。注：鼠標事件的選擇器可以是文檔中的任意HTML元素。8.2.3鼠標事件1. click()事件當用戶使用鼠標左鍵點擊（單擊）網頁文檔中的任意HTML元素時均可以觸發(fā)click()事件，其語法格式如下：$(selector).click(function)8.2.3鼠標事件1. click()事件以按鈕<button>元素為例，被鼠標左鍵點擊后彈出警告框的代碼如下：當click()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("button").click(function(){alert("click事件被觸發(fā)！");});8.2.3鼠標事件2. dblclick()事件當用戶使用鼠標左鍵雙擊網頁文檔中的任意HTML元素時均可以觸發(fā)dblclick()事件，其語法格式如下：$(selector).dblclick(function)8.2.3鼠標事件2. dblclick()事件以按鈕<button>元素為例，被鼠標左鍵雙擊后彈出警告框的代碼如下：當dblclick()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("button").dblclick(function(){alert("dblclick事件被觸發(fā)！");});8.2.3鼠標事件3. hover()事件當用戶將鼠標懸停在網頁文檔中的任意HTML元素上時將會觸發(fā)hover()事件，其語法格式如下：$(selector).hover(function)8.2.3鼠標事件3. hover()事件以段落元素<p>為例，鼠標懸停在該元素上時彈出警告框的代碼如下：當hover()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("p").hover(function(){alert("hover事件被觸發(fā)！");});8.2.3鼠標事件【例8-5】jQuery鼠標事件click()、dbclick()與hover()的簡單應用8.2.3鼠標事件4. mousexxx()系列事件以關鍵詞mouse開頭的一系列鼠標事件是根據鼠標移動方向或效果來區(qū)分的，其語法格式如下：$(selector).mousexxx(function)8.2.3鼠標事件4. mousexxx()系列事件其中xxx替換成具體的動作效果，可替換的關鍵詞如下：down：鼠標按鍵被按下；up：鼠標按鍵被釋放，與down相反；move：鼠標處于移動狀態(tài)；enter：鼠標進入指定元素；leave：鼠標離開指定元素，與enter相反；out：鼠標離開指定元素或其子元素；over：鼠標穿過指定元素或其子元素，與out相反。8.2.3鼠標事件4. mousexxx()系列事件【例8-6】jQuery鍵盤事件mouse系列的簡單應用18.2.3鼠標事件4. mousexxx()系列事件【例8-7】jQuery鍵盤事件mouse系列的簡單應用28.2.3鼠標事件4. mousexxx()系列事件【例8-8】jQuery鍵盤事件mouse系列的簡單應用38.2.3鼠標事件4. mousexxx()系列事件【例8-9】jQuery鍵盤事件mouse系列的簡單應用48.2.3鼠標事件5. toggle()事件toggle()事件可以看作是一種特殊的鼠標點擊事件，可以一次綁定兩個或兩個以上函數。當元素被鼠標點擊時，會按照先后順序每次只觸發(fā)其中一個函數。8.2.3鼠標事件5. toggle()事件其語法格式如下：其中function1-N可以替換成需要觸發(fā)的若干個函數，函數之間用逗號隔開即可。$(selector).toggle(function1,function2,…functionN)8.2.3鼠標事件5. toggle()事件以按鈕<button>的toggle()事件為例，綁定三個自定義函數的語法格式如下：$("button").toggle( function(){ alert("toggle事件首次被觸發(fā)，運行該函數。"); }, function(){ alert("toggle事件第二次被觸發(fā)，運行該函數。"); }, function(){ alert("toggle事件第三次被觸發(fā)，運行該函數。"); });8.2.3鼠標事件5. toggle()事件每次點擊該按鈕都會觸發(fā)一次toggle事件，按照點擊的次數會依次運行其中的第一、二、三個函數，當最后一個函數被執(zhí)行則下一次觸發(fā)該toggle事件將重新運行第一個函數的內容。8.2.3鼠標事件5. toggle()事件特別需要注意的是：toggle()事件在jQuery1.8版之后已過期。因此這里僅作大致了解，不再進行完整示例，也請讀者在實際開發(fā)過程中請慎用該事件。8.2.4表單事件jQuery常見表單事件如表所示。8.2.4表單事件1. blur()事件當某個處于選中狀態(tài)的元素失去焦點時將觸發(fā)blur()事件，其語法格式如下：該事件的選擇器初期只能是表單元素，目前已經適用于任意HTML元素。通過鼠標點擊元素以外的位置，或者鍵盤Tab按鍵等方式均可以令元素失去焦點。$(selector).blur(function)8.2.4表單事件1. blur()事件以表單中的<input>元素為例，失去焦點時彈出警告框的代碼如下：當blur()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("input").blur(function(){alert("blur事件被觸發(fā)！");});8.2.4表單事件2. focus()事件當某個處于未選中狀態(tài)的元素獲得焦點時將觸發(fā)focus()事件，其語法格式如下：該事件的選擇器初期只能是表單元素或超鏈接元素，目前已經適用于任意HTML元素。通過鼠標點擊元素、鍵盤Tab按鍵切換等方式均可以令元素獲得焦點。$(selector).focus(function)8.2.4表單事件2. focus()事件同樣以表單中的<input>元素為例，獲得焦點時彈出警告框的代碼如下：當focus()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("input").focus(function(){alert("focus事件被觸發(fā)！");});8.2.4表單事件【例8-10】jQuery表單事件blur()和focus()的簡單應用8.2.4表單事件3. change()事件當輸入框或下拉菜單中的內容發(fā)生變化時將觸發(fā)change()事件，其語法格式如下：其選擇器可以是表單中的輸入框<input>、多行文本框<textarea>或者下拉菜單<select>。$(selector).change(function)8.2.4表單事件3. change()事件其觸發(fā)效果不同之處總結如下：選擇器為<input>或<textarea>：用戶更改輸入框中的內容然后讓該輸入框失去焦點才觸發(fā)change()事件；選擇器為<select>：用戶選擇不同的選項時觸發(fā)change()事件。8.2.4表單事件3. change()事件以下拉菜單<select>元素為例，選項被切換后彈出警告框的代碼如下：當change事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("select").change(function(){alert("change事件被觸發(fā)！");});8.2.4表單事件4. select()事件當文本輸入框中有文字內容被選中時，將觸發(fā)該元素的select()事件。其語法格式如下：其選擇器只能是單行文本框<inputtype="text">或多行文本框<textarea>。$(selector).select(function)8.2.4表單事件4. select()事件以表單中的<input>元素為例，被鼠標選中文本內容后彈出警告框的代碼如下：當select事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。$("input").select(function(){alert("select事件被觸發(fā)！");});8.2.4表單事件【例8-11】jQuery表單事件change()和select()的簡單應用8.2.4表單事件5. submit()事件當用戶嘗試提交表單時將觸發(fā)表單元素<form>的submit()事件，其語法格式如下：顯然，該事件的選擇器只能是表單元素<form>。$(selector).submit(function)8.2.4表單事件5. submit()事件用戶有兩種提交表單的方式：點擊特定的提交按鈕或者使用鍵盤上的Enter鍵。特定的提交按鈕包括：<inputtype="submit">、<inputtype="image">以及<buttontype="submit">；使用Enter鍵的前提是表單中只有一個文本域，或者表單中包含了提交按鈕。8.2.4表單事件5. submit()事件以id="form01"的<form>元素為例，用戶提交表單時彈出警告框的代碼如下：與其他表單事件不同之處在于，其中function(e)中的參數e為必填內容。也可以用其他自定義變量名稱代替，例如event也較為常見。$("#form01").submit(function(e){alert("click事件被觸發(fā)！");});8.2.4表單事件5. submit()事件由于submit()事件會在表單正式提交給服務器之前觸發(fā)，因此常用其進行有效性檢測：當表單中填寫的內容驗證不通過時顯示提示語句，并停止表單提交的動作；當內容驗證通過時繼續(xù)完成表單提交的動作。8.2.4表單事件5. submit()事件【例8-12】jQuery事件submit()的簡單應用8.3jQuery事件綁定與解除在jQuery中，HTML元素的事件監(jiān)聽是可以通過特定的方法來綁定或者解除的。本章節(jié)將介紹如何為指定的HTML元素綁定事件、解除事件以及追加臨時事件。8.3jQuery事件綁定與解除8.3.1jQuery事件綁定 8.3.2jQuery事件解除 8.3.3jQuery臨時事件 8.3.1jQuery事件綁定
目前jQuery常用的事件綁定方法如表所示。需要注意的是，在jQuery3.0之后的版本將徹底取消對bind()和delegate()方法的支持，因此在未來的實踐開發(fā)中建議使用on()來替換前兩種方法。8.3.1jQuery事件綁定1. bind()方法bind()方法可以用于給指定的元素綁定一個或多個事件，其語法格式如下：參數解釋如下：
event：必填參數，用于指定事件名稱。例如"click"。
data：可選參數，用于規(guī)定需要傳遞給函數的額外數據。
function：必填參數，用于規(guī)定事件觸發(fā)時的執(zhí)行函數。$(selector).bind(event,[data,]function)8.3.1jQuery事件綁定1. bind()方法例如，為按鈕<button>元素綁定點擊事件（鼠標左鍵單擊），代碼如下：$("button").bind("click",function(){alert("按鈕的點擊事件被觸發(fā)！");})8.3.1jQuery事件綁定1. bind()方法如果指定元素綁定的多個事件需要調用同一個函數，可以將這些事件名稱用空格隔開后并列添加在參數event中，例如：$("button").bind("clickdblclickmouseenter",function(){alert("按鈕的單擊/雙擊/鼠標進入事件被觸發(fā)！");})8.3.1jQuery事件綁定1. bind()方法如果需要為指定元素同時綁定多個事件并觸發(fā)不同的函數，其語法格式如下：該方法可以分別為每個事件單獨綁定函數，使用起來更為靈活。$(selector).bind({event1:function1,event2:function2,…eventN:functionN})8.3.1jQuery事件綁定1. bind()方法例如，為按鈕<button>元素同時綁定單擊、雙擊和鼠標懸停事件，并實現(xiàn)不同的觸發(fā)效果。其代碼如下：上述代碼表示單擊、雙擊或鼠標懸停于按鈕時網頁背景色分別更換為紅色、黃色或藍色。$("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()方法可以用于給指定元素的子元素綁定一個或多個事件，其語法格式如下：$(selector).delegate(childSelector,event,[data,]function)8.3.1jQuery事件綁定2. delegate()方法參數解釋如下：
childSelector：必填參數，用于規(guī)定需要綁定事件的一個或多個子元素。
event：必填參數，用于指定需要綁定給子元素的一個或多個事件名稱，例如"click"。如果有多個事件同時綁定需要用空格隔開。例如"clickdblclickmouseover"。
data：可選參數，用于規(guī)定需要傳遞給函數的額外數據。
function：可選參數，用于規(guī)定需要綁定的事件觸發(fā)時的執(zhí)行函數。8.3.1jQuery事件綁定2. delegate()方法例如，在id="test"的<div>元素中包含一個子元素<button>，其HTML頁面代碼如下：此時可以使用delegate()方法指定<div>元素，然后為其中的子元素<button>綁定事件。<divid="test"><button>我是按鈕子元素</button></div>8.3.1jQuery事件綁定2. delegate()方法以鼠標左鍵點擊事件為例，jQuery代碼如下：上述代碼通過id="test"的<div>元素來準確定位其中的子元素，此時綁定事件不會影響到在該<div>元素以外的其他任何<button>元素。$("#test").delegate("button","click",function(){alert("按鈕被點擊！");});8.3.1jQuery事件綁定2. delegate()方法delegate()方法的優(yōu)勢在于其還可以為指定元素的未來子元素（解釋：即當前尚未創(chuàng)建，后續(xù)通過代碼動態(tài)添加的子元素）綁定事件。8.3.1jQuery事件綁定3. on()方法on()方法是jQuery1.7版之后新增的內容，可以用于給指定元素的子元素綁定一個或多個事件，包含了bind()和delegate()方法的全部功能。其語法格式如下：$(selector).on(event,[childSelector,][data,]function)8.3.1jQuery事件綁定3. on()方法參數解釋如下：event：必填參數，用于指定需要綁定給指定元素的一個或多個事件名稱，例如"click"。如果有多個事件同時綁定需要用空格隔開。例如"clickdblclickmouseover"。childSelector：可選參數，用于規(guī)定需要綁定事件的子元素，如果沒有可以不填。data：可選參數，用于規(guī)定需要傳遞給函數的額外數據。function：可選參數，用于規(guī)定需要綁定的事件觸發(fā)時的執(zhí)行函數。8.3.1jQuery事件綁定3. on()方法將bind()方法改寫為on()方法只需要修改方法名稱，其他參數無需變化。例如，改用on()方法為按鈕<button>元素綁定點擊事件（鼠標左鍵單擊），代碼如下：$("button").on("click",function(){alert("按鈕的點擊事件被觸發(fā)！");})8.3.1jQuery事件綁定3. on()方法將delegate()方法改寫為on()方法時，需要注意子元素參數的位置：delegate()方法中的子元素參數在事件名稱參數之前，而on()方法正相反。8.3.1jQuery事件綁定3. on()方法例如，改用on()方法指定id="test"的<div>元素，然后為其中的子元素<button>綁定事件。以鼠標左鍵點擊事件為例，jQuery代碼如下：$("#test").on("click","button",function(){alert("按鈕被點擊！");});8.3.1jQuery事件綁定3. on()方法【例8-13】jQuery事件綁定on()方法的簡單應用8.3.2jQuery事件解除目前jQuery常用的事件解除方法如表所示。需要注意的是，在jQuery3.0之后的版本將徹底取消對unbind()和undelegate()方法的支持，因此建議在未來的實踐開發(fā)中使用off()來替換前兩種方法。8.3.2jQuery事件解除1. unbind()方法unbind()方法可以用于給指定的元素解除事件觸發(fā)效果，其語法格式如下：$(selector).unbind([event][,function])8.3.2jQuery事件解除1. unbind()方法參數解釋如下：
event：可選參數，用于指定需要解除的一個或多個事件名稱，例如"click"或"clickdblclickmouseover"。如果該參數不填寫，則表示解除指定元素的全部事件。
function：可選參數，用于規(guī)定需要解除的事件觸發(fā)時的執(zhí)行函數。8.3.2jQuery事件解除1. unbind()方法例如，為按鈕<button>元素解除點擊事件（鼠標左鍵單擊），代碼如下：$("button").unbind("click",function(){alert("按鈕的點擊事件被解除！");});8.3.2jQuery事件解除2. undelegate()方法delegate()方法可以用于給指定元素的子元素綁定一個或多個事件，其語法格式如下：$(selector).undelegate([childSelector,][event,][function])8.3.2jQuery事件解除2. undelegate()方法參數解釋如下：childSelector：可選參數，用于規(guī)定需要綁定事件的一個或多個子元素。event：可選參數，用于指定需要解除的一個或多個事件名稱，例如"click"或"clickdblclickmouseover"。function：可選參數，用于規(guī)定需要解除的事件觸發(fā)時的執(zhí)行函數。注：如果不填寫任何參數，則表示解除之前使用delegate()方法綁定的全部事件。8.3.2jQuery事件解除2. undelegate()方法例如，在id="test"的<div>元素中包含一個子元素<button>，其HTML頁面代碼如下：<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版之后新增的內容，可以用于給指定元素的子元素解除一個或多個事件，包含了unbind()和undelegate()方法的全部功能。其語法格式如下：$(selector).off(event,[childSelector,][data,]function)8.3.2jQuery事件解除3. off()方法參數解釋如下：event：必填參數，用于指定需要給指定元素解綁的一個或多個事件名稱，例如"click"。如果有多個事件同時解綁需要用空格隔開。例如"clickdblclickmouseover"。childSelector：可選參數，用于規(guī)定需要解綁事件的子元素，如果沒有可以不填。data：可選參數，用于規(guī)定需要傳遞給函數的額外數據。function：可選參數，用于規(guī)定需要解綁的事件觸發(fā)時的執(zhí)行函數。8.3.2jQuery事件解除3. off()方法將unbind()方法改寫為off()方法只需要修改方法名稱，其他參數無需變化。例如，改用off()方法為按鈕<button>元素解綁點擊事件（鼠標左鍵單擊），代碼如下：$("button").off("click",function(){alert("按鈕的點擊事件被解除！");})8.3.2jQuery事件解除3. off()方法將undelegate()方法改寫為off()方法時，需要注意子元素參數的位置：undelegate()方法中的子元素參數在事件名稱參數之前，而off()方法正相反。8.3.2jQuery事件解除3. off()方法例如，改用off()方法指定id="test"的<div>元素，然后為其中的子元素<button>解除事件。以鼠標左鍵點擊事件為例，jQuery代碼如下：$("#test").off("click","button",function(){alert("按鈕的點擊事件被解除！");});8.3.2jQuery事件解除3. off()方法【例8-14】jQuery事件解除off()方法的簡單應用8.3.3jQuery臨時事件在某些特殊情況下，為元素綁定的事件僅需要執(zhí)行一次就必須解除綁定，此類情況我們將其稱為元素的臨時事件。8.3.3jQuery臨時事件例如，為按鈕<button>元素綁定臨時的點擊事件（鼠標左鍵單擊），代碼如下：上述代碼使用了on()方法為按鈕進行了click()事件的綁定，當click()事件首次被觸發(fā)時立刻調用off()方法解綁事件。$("button").on("click",function(){alert("按鈕的點擊事件被觸發(fā)！");$(this).off("click");})8.3.3jQuery臨時事件事實上，在jQuery中已經提供了專門的one()方法來代替on()和off()方法處理此類情況。one()方法綁定的事件在觸發(fā)一次之后將自動解除。其語法格式如下：$(selector).one(event,[childSelector,][data,]function)8.3.3jQuery臨時事件參數解釋如下：event：必填參數，用于指定需要綁定給指定元素的一個或多個事件名稱，例如"click"。如果有多個事件同時綁定需要用空格隔開。例如"clickdblclickmouseover"。childSelector：可選參數，用于規(guī)定需要綁定事件的子元素，如果沒有可以不填。data：可選參數，用于規(guī)定需要傳遞給函數的額外數據。function：可選參數，用于規(guī)定需要綁定的事件觸發(fā)時需要執(zhí)行的函數。8.3.3jQuery臨時事件例如，使用one()方法修改上一段示例代碼，更新后的代碼如下：上述代碼只能被執(zhí)行一次，然后就會自行解除click()事件的綁定。用這種方式只需要定義綁定的事件即可，無需特意在處理之后追加事件解綁的腳本代碼。$("button").one("click",function(){alert("按鈕的點擊事件被觸發(fā)！");})8.3.3jQuery臨時事件【例8-15】jQuery臨時事件one()方法的簡單應用8.4階段案例：鼠標懸停切換圖片8.4.1案例需求8.4.2界面設計8.4.3邏輯實現(xiàn)8.4.4案例思考8.4.1案例需求背景介紹：鼠標懸停切換圖片特效是通過用戶鼠標的選擇來顯示指定圖片內容，該版塊也常用于網站首頁，例如商品展示、旅游景點介紹等。8.4.1案例需求功能要求：使用jQuery實現(xiàn)鼠標懸停手動切換展示圖片特效，如圖所示。當用戶將鼠標懸浮于左側的文字上時文字變成紅色，并且右側圖片自動切換到對應的畫面。8.4.2界面設計本項目的主要內容分為兩個版塊：左側的列表標簽<ul>用于顯示文字標題，右側的<img>標簽用于顯示圖片。結構如圖所示。8.4.2界面設計創(chuàng)建一個HTML文件，文件名可自定義，例如SliderDemo.html。在HTML5中使用<divclass="sliderWrap">元素將這兩個版塊嵌套在內部，相關代碼如下：1. <body>2. <!--標題-->3. <h3>jQuery鼠標懸停切換圖片</h3>4. <!--水平線-->5. <hr>6. <!--圖片輪播區(qū)域-->7. <divclass="sliderWrap">8. <ulid="slider">9. <li>意大利威尼斯</li>10. <hr>11. <li>希臘愛琴海</li>12. <hr>13. <li>巴黎盧浮宮</li>14. <hr>15. <li>印度泰姬陵</li>16. <hr>17. <li>英國巨石陣</li>18. <hr>19. </ul>20. <imgid="pptImage"src="image/2.jpg"/>21. </div>在<ul>標簽內部將列表選項標簽<li>與水平線標簽<hr>交替使用，形成帶有水平線修飾效果的文字標題。在<img>標簽上設置初始顯示的圖片來源為本地image目錄下的2.jpg。8.4.2界面設計本示例使用CSS外部樣式表規(guī)定頁面樣式。在本地css文件夾中創(chuàng)建slider.css文件，并在<head>首尾標簽中聲明對CSS文件的引用。相關HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>jQuery鼠標懸停切換圖片</title>4. <linkrel="stylesheet"href="css/slider.css">5. </head>8.4.2界面設計在CSS外部樣式表中為<body>標簽設置總體樣式，相關CSS代碼如下：1. /*整體背景樣式*/2. body{3. background-color:silver;/*背景顏色銀色*/4. text-align:center;/*文本居中*/5. }8.4.2界面設計為class="sliderWrap"的<div>標簽設置樣式，相關CSS代碼如下：1. /*圖片輪播區(qū)域樣式設置*/2. .sliderWrap{3. width:800px;/*寬度800px*/4. height:400px;/*高度400px*/5. padding:0px;/*各邊內邊距0*/6. margin:auto;/*各邊外邊距auto*/7. }8.4.2界面設計接下來設置頁面上展示的圖片樣式，相關CSS代碼如下：1. /*圖片樣式設置*/2. .sliderWrapimg{3. float:left;/*左浮動*/4. height:100%;/*高度100%*/5. width:80%;/*寬度80%*/6. }8.4.2界面設計在CSS外部樣式表中為列表元素<ul>設置樣式效果，相關CSS代碼如下：1. /*列表元素樣式設置*/2. ul#slider{3. list-style:none;/*去掉裝飾點*/4. float:left;/*左浮動*/5. height:100%;/*高度100%*/6. width:20%;/*寬度20%*/7. background-color:#F2F2F2;/*背景顏色灰色*/8. margin:0;/*清除外邊距*/9. padding:0;/*清除內邊距*/10. }8.4.2界面設計在CSS外部樣式表中為列表選項元素<li>設置樣式效果，相關CSS代碼如下：1. /*列表選項元素樣式設置*/2. ul#sliderli{3. margin-top:25%;/*外邊距頂部25%*/4. margin-left:10px;/*外邊距左側10px*/5. padding-left:10px;/*內邊距左側10px*/6. text-align:left;/*文本左對齊*/7. }8. ul#sliderli:hover{9. color:red;/*鼠標懸浮時文本變成紅色*/10. }8.4.2界面設計為了使標題之間的水平線不要頂格顯示，在CSS外部樣式表中設置其寬度為80%，相關CSS代碼如下：此時CSS樣式設置就全部完成了，運行效果如圖所示。1. /*水平線樣式設置*/2. hr{3. width:80%;/*寬度80%*/4. }8.4.3邏輯實現(xiàn)圖片切換效果需要使用到jQuery的相關功能，因此首先在<head>標簽中添加對于jQuery的調用。相關HTML5代碼修改后如下：1. <head>2. <metacharset="utf-8">3. <title>jQuery鼠標懸停切換圖片</title>4. <linkrel="stylesheet"href="css/slider.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. </head>8.4.3邏輯實現(xiàn)在<script>中使用$("#sliderli").hover()監(jiān)聽<li>元素的鼠標懸浮事件，相關代碼如下：1. <script>2. $("#sliderli").hover(function(){3. //獲取當前鼠標懸浮的列表項索引值（從0開始計數）4. vari=$("#sliderli").index(this);5. //更新頁面上的圖片6. $("#pptImage").attr("src","image/"+i+".jpg");7. });8. </script>8.4.3邏輯實現(xiàn)在<script>中使用$("#sliderli").hover()監(jiān)聽<li>元素的鼠標懸浮事件，相關代碼如下：1. <script>2. $("#sliderli").hover(function(){3. //獲取當前鼠標懸浮的列表項索引值（從0開始計數）4. vari=$("#sliderli").index(this);5. //更新頁面上的圖片6. $("#pptImage").attr("src","image/"+i+".jpg");7. });8. </script>上述代碼表示，當鼠標懸浮在某一個<li>元素上時，更換id="pptImage"的<img>元素圖片來源。其中圖片文件位置本地image目錄中，文件名稱由索引值i傳遞。因為索引值是從0開始計數，所以后臺存放的圖片文件名按照順序改成0.jpg-4.jpg。8.4.3邏輯實現(xiàn)此時本項目就已經全部完成了，運行效果如圖所示。由于第三張圖片為默認初始顯示效果，這里不再重復展示。8.4.4案例思考【拓展練習】如果圖片名稱沒有按照數組下標的規(guī)律命名要如何顯示？【進階改造】將風景圖片換成新聞圖片，改造成新聞輪播組件。本章小結本章小結本章主要介紹了jQuery事件的概念與常見用法。常用的jQuery事件根據類型可分為文檔/窗口事件、鍵盤事件、鼠標事件和表單事件。HTML元素的事件監(jiān)聽也可以通過特定的方法來綁定或者解除，在jQuery1.7之后的版本中推薦使用on()和off()方法代替之前所有的事件綁定和解綁方法。本章階段案例介紹了鼠標懸停切換圖片的動態(tài)效果，使用jQuery事件綁定技術為列表項綁定了hover事件監(jiān)聽和圖片來源的切換。Thankyou！JavaScript與jQuery
網頁前端開發(fā)與設計-第2版學校名稱：XXXX主講教師：XXXX第9章jQuery特效 本章學習目標 掌握jQuery隱藏/顯示相關函數hide()、show()和toggle()的用法； 掌握jQuery淡入/淡出相關函數fadeIn()、fadeOut()、fadeToggle()、fadeTo()的用法； 掌握jQuery滑動相關函數slideDown()、slideUp()、slideToggle()的用法； 掌握jQuery動畫（Animation）的用法； 掌握jQuery方法鏈接（Chaining）的用法； 掌握jQuery停止動畫相關函數stop()的用法。目錄9.1jQuery隱藏和顯示
9.2jQuery淡入和淡出
9.3jQuery滑動
9.4jQuery動畫 9.5jQuery方法鏈接 9.6jQuery停止動畫9.7階段案例：動態(tài)下拉菜單特效 9.1jQuery隱藏和顯示jQuery可以控制元素的隱藏和顯示，包括自定義變化效果的持續(xù)時間。其中hide()方法用于隱藏指定的元素，show()方法用于顯示指定的元素。9.1jQuery隱藏和顯示9.1.1jQueryhide() 9.1.2jQueryshow() 9.1.3jQuerytoggle()9.1.1jQueryhide()jQueryhide()方法用于隱藏指定的HTML元素。其語法結構如下：$(selector).hide([duration][,callback]);9.1.1jQueryhide()該方法中selector參數位置可以是任意有效的選擇器，hide()方法中的兩個參數均為可選。其中duration參數用于設置隱藏動作的持續(xù)時間，可以填入“slow”、“fast”或者具體的時間長度（單位默認為毫秒）；callback參數為隱藏動作執(zhí)行完成后需要下一步執(zhí)行的函數名稱，若無后續(xù)函數可省略不填。9.1.1jQueryhide()使用不帶任何參數的hide()方法，可實現(xiàn)無動畫效果的隱藏動作。該方法能立刻隱藏處于顯示狀態(tài)的元素，相當于將指定元素的CSS屬性設置為“display:none”。例如：該代碼表示立刻隱藏文檔中所有的段落元素<p>及其內部所有內容。$("p").hide();9.1.1jQueryhide()帶有duration參數值的jQueryhide()方法擁有動畫效果。該參數默認單位為毫秒，數值越大代表持續(xù)時間越長，則動畫效果越慢。其中“fast”默認持續(xù)時間是200毫秒，而“slow”默認是600毫秒。9.1.2jQueryshow()jQueryshow()方法用于顯示指定元素。其語法結構如下：$(selector).show([duration][,callback]);9.1.2jQueryshow()同jQueryhide()方法類似，該方法中selector參數位置可以是任意有效的選擇器，show()方法中的兩個參數均為可選，duration參數用于設置顯示的持續(xù)時間，可填入“slow”、“fast”或者具體的時間長度（單位默認為毫秒）；callback參數為顯示動作執(zhí)行完成后需要下一步執(zhí)行的函數名稱，若無后續(xù)函數可省略不填。9.1.2jQueryshow()使用不帶任何參數的show()方法，可實現(xiàn)無動畫效果的顯示動作。該方法能立刻顯示處于隱藏狀態(tài)的元素。例如：該代碼表示立刻顯示文檔中所有的段落元素<p>及其內部所有內容。$("p").show();9.1.2jQueryshow()帶有duration參數值的jQueryshow()方法擁有動畫效果。該參數默認單位為毫秒，數值越大代表持續(xù)時間越長，則動畫效果越慢。其中“fast”默認持續(xù)時間是200毫秒，而“slow”默認是600毫秒。9.1.2jQueryshow()【例9-1】jQuery隱藏和顯示的應用9.1.3jQuerytoggle()jQuerytoggle()方法用于切換元素的隱藏和顯示。該方法可以替代hide()和show()方法單獨使用，用于顯示已隱藏的元素，或隱藏正在顯示的元素。9.1.3jQuerytoggle()【例9-2】jQuery隱藏/顯示切換的應用9.2jQuery淡入和淡出9.2.1jQueryfadeIn() 9.2.2jQueryfadeOut() 9.2.3jQueryfadeToggle() 9.2.4jQueryfadeTo()
9.2jQuery淡入和淡出jQuery可以控制元素的透明度，使元素顏色加深或者淡化。相關方法有如下4種：fadeIn()：通過更改元素的透明度逐漸加深元素顏色，直至元素完全顯現(xiàn)，又稱為淡入。fadeOut()：通過更改元素的透明度逐漸淡化元素顏色，直至元素完全隱藏，又稱為淡出。fadeToggle()：元素淡出淡入效果切換，可用于淡入隱藏的元素，也可用于淡出可見的元素fadeTo()：用于將元素變?yōu)橹付ǖ耐该鞫龋〝抵到橛?-1之間）9.2.1jQueryfadeIn()jQueryfadeIn()方法用于實現(xiàn)元素的淡入效果，即將原先隱藏的元素逐漸顯示出來。其語法結構如下：$(selector).fadeIn([duration][,callback])9.2.1jQueryfadeIn()該方法中selector參數位置可以是任意有效的選擇器，fadeIn()方法中的兩個參數均為可選參數。參數duration用于規(guī)定淡入效果的時長，可填入“fast”、“slow”或具體時長數值（單位為毫秒）；可選參數callback指的是fadeIn()方法完成時需要執(zhí)行的下一個函數名稱，若無后續(xù)函數可省略不填。9.2.2jQueryfadeOut()jQueryfadeOut()用于實現(xiàn)元素的淡出效果，即將原先存在的元素逐漸隱藏起來。其語法結構如下：$(selector).fadeOut([duration][,callback])9.2.2jQueryfadeOut()與fadeIn()方法類似，該方法中selector參數位置可以是任意有效的選擇器，fadeOut()方法中的兩個參數也均為可選參數。其中可選參數duration用于規(guī)定淡出效果的時長，可填入“fast”、“slow”或具體時長數值（單位為毫秒）；可選參數callback指的是fadeOut()方法完成時需要執(zhí)行的下一個函數名稱，若無后續(xù)函數可省略不填。9.2.2jQueryfadeOut()【例9-3】jQuery淡入和淡出的應用9.2.3jQueryfadeToggle()jQueryfadeToggle()方法用于切換元素的淡出淡入效果。其語法結構如下：$(selector).fadeToggle([duration][,callback])9.2.3jQueryfadeToggle()該方法中selector參數位置可以是任意有效的選擇器。其中可選參數duration用于規(guī)定淡出效果的時長，可填入“fast”、“slow”或具體時長數值（單位為毫秒）；可選參數callback指的是fadeToggle()方法完成時需要執(zhí)行的下一個函數名稱。9.2.3jQueryfadeToggle()【例9-4】jQuery淡出/淡入切換的應用9.2.4jQueryfadeTo()jQueryfadeTo()方法用于指定漸變效果的透明度，透明度的數值介于0至1之間。其語法結構如下：$(selector).fadeTo(duration,opacity[,callback])9.2.4jQueryfadeTo()該方法中selector參數位置可以是任意有效的選擇器。fadeTo()方法中的參數解釋如下：duration：該參數為必填內容，表示透明度漸變的持續(xù)時間，其默認單位為毫秒，可填入“fast”或“slow”分別代表200毫秒和600毫秒的持續(xù)時間，也可填入自定義的數值，填入的數值越大代表持續(xù)時間越長，因此動畫效果越緩慢；opacity：該參數為必填內容，用于設置元素的透明度。透明度的數值必須在0至1之間，數值越小透明度越高，0為完全透明，1為非透明；callback：該參數為可選內容，用于指定當前效果結束后的下一個函數名稱，如果沒有可以省略不填。9.2.4jQueryfadeTo()【例9-5】jQuery設置淡入/淡出漸變值9.3jQuery滑動jQuery的滑動共有3種方法效果：slideDown()：向下滑動元素slideUp()：向上滑動元素slideToggle()：切換向上和向下滑動元素9.3jQuery滑動9.3.1jQueryslideDown() 9.3.2jQueryslideUp() 9.3.3jQueryslideToggle()
9.3.1jQueryslideDown()jQueryslideDown()方法用于向下滑動元素。其語法結構如下：該方法中的兩個參數均為可選。其中duration參數用于設置向下滑動效果的持續(xù)時間，可以填入“slow”、“fast”或者具體的時間長度（單位默認為毫秒）；callback參數為滑動動作執(zhí)行完成后需要下一步執(zhí)行的函數名稱，若無后續(xù)函數可省略不填。$(selector).slideDown([duration][,callback])9.3.1jQueryslideDown()jQueryslideDown()方法中的duration參數默認單位為毫秒，數值越大則動畫效果越慢。其中“fast”默認為200毫秒，“slow”默認為600毫秒，duration參數值省略的情況下默認持續(xù)時間為400毫秒。9.3.2jQueryslideUp()jQueryslideUp()方法用于向上滑動元素。其語法結構如下：該方法中的兩個參數均為可選。其中duration參數用于設置向上滑動效果的持續(xù)時間，可以填入“slow”、“fast”或者具體的時間長度（單位默認為毫秒）；callback參數為滑動動作執(zhí)行完成后需要下一步執(zhí)行的函數名稱，若無后續(xù)函數可省略不填。$(selector).slideUp([duration][,callback])9.3.2jQueryslideUp()jQueryslideUp()方法中的duration參數默認單位為毫秒，數值越大則動畫效果越慢。其中“fast”默認為200毫秒，“slow”默認為600毫秒，duration參數值省略的情況下默認持續(xù)時間為400毫秒。9.3.2jQueryslideUp()【例9-6】jQuery滑動的應用9.3.3jQueryslideToggle()jQueryslideToggle()方法用于切換滑動方向，其語法結構如下：該方法中selector參數位置可以是任意有效的選擇器。其中可選參數duration用于規(guī)定淡出效果的時長，可填入“fast”、“slow”或具體時長數值（單位為毫秒）；可選參數callback指的是slideToggle()方法完成時需要執(zhí)行的下一個函數名稱。$(selector).slideToggle([duration][,callback])9.3.3jQueryslideToggle()【例9-7】jQuery滑動方向切換的應用9.4jQuery動畫9.4.1改變元素基本屬性 9.4.2改變元素位置 9.4.3動畫隊列 9.4jQuery動畫jQueryanimate()方法通過更改元素的CSS屬性值實現(xiàn)動畫效果。其語法結構如下：其中params參數為必填，duration和callback參數為可選。$(selector).animate({params}[,duration][,callback])9.4jQuery動畫參數的具體解釋如下：params參數表示形成動畫的CSS屬性，允許同時實現(xiàn)多個屬性的改變；duration參數表示規(guī)定的效果時長，默認單位為毫秒，可以填入”slow”、”fast”或具體數值。其中“fast”表示持續(xù)時間為200毫秒，“slow”表示為600毫秒。若填入具體數值，則數值越大動畫效果越緩慢；callback參數表示動畫完成后需要執(zhí)行的函數名稱，若無下一步需執(zhí)行的函數可省略不填。9.4.1改變元素基本屬性jQueryanimate()方法可以用于實現(xiàn)絕大部分CSS屬性的變化，例如元素的寬度、高度、透明度等。但是jQuery核心庫中并沒有包含色彩變化效果，因此如果要實現(xiàn)顏色動畫，需要在jQuery的官方網站另外下載色彩動畫的相關插件。9.4.1改變元素基本屬性當CSS屬性名稱中包含連字符“-”時，需要使用Camel標記法（注：又稱為駝峰標記法，其特點是首個單詞小寫、接下來的單詞都以首字母大寫的一種形式。）進行重新改寫。例如，字體大小在CSS屬性中寫為“font-size”，如需在jQueryanimate()中使用則必須改寫為“fontSize”。9.4.1改變元素基本屬性jQueryanimate()方法可作用于各種HTML元素，如段落元素<p>、標題元素<h1>、塊元素<div>等。以一個簡單的<div>元素為例，并為其配置測試按鈕，代碼如下：<buttonid="btn"type="button">開始動畫效果</button><br><div>你好，jQuery動畫！</div>9.4.1改變元素基本屬性為<div>元素設置一些初始屬性，在內部樣式表中相關代碼寫法如下：這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設置為黃色。<style> div{width:200px;height:200px;background-color:yellow}</style>9.4.1改變元素基本屬性為<div>元素設置動畫效果，當點擊按鈕時執(zhí)行該動畫內容。$("#btn").click(function(){$("div").animate({ width:"400px", fontSize:"30px", opacity:0.25 },2000);});此段代碼表示，當點擊id為“btn”的按鈕時激發(fā)<div>元素的動畫效果，在2秒的持續(xù)時間內<div>元素的寬度從200像素變?yōu)?00像素，字體大小從默認值變?yōu)?0像素，透明度從默認值1變?yōu)?.25。9.4.1改變元素基本屬性【例9-8】jQuery簡單動畫效果9.4.2改變元素位置jQueryanimate()方法也可以通過使用CSS屬性中的方位值left、right、top和bottom改變元素位置實現(xiàn)移動效果。由于這些屬性值均為相對值，而在HTML中所有元素的position屬性值均默認為靜態(tài)（static）無法移動的，因此需要事先設置指定元素的position為relative、absolute或者fixed方能生效。9.4.2改變元素位置以一個簡單的<div>元素為例，并為其配置測試按鈕，代碼如下：<buttonid="btn"type="button">開始移動</button><br><div>你好，jQuery動畫！</div>9.4.2改變元素位置為<div>元素設置一些初始屬性，在內部樣式表中相關代碼寫法如下：這段代碼表示規(guī)定元素的寬度和高度均為200像素，并且背景顏色設置為綠色，元素初始位置為相對位置。<style>div{width:100px;height:100px;background-color:green;color:white;position:relative}</style>9.4.2改變元素位置為<div>元素設置動畫效果，當點擊按鈕時執(zhí)行該動畫內容。上述代碼表示當點擊id為"btn"的按鈕時激發(fā)<div>元素的動畫效果。在2秒的持續(xù)時間內<div>元素從初始位置向右平移200像素，并且同時向下垂直移動100像素。其中l(wèi)eft:"+=200"和top:"+=100"為相對值寫法，表示相對于初始位置的移動效果并省略了單位像素（px）。$("#btn").click(function(){$("div").animate({ left:"+=200",top:"+=100" },2000);});});9.4.2改變元素位置【例9-9】jQuery位置移動動畫效果9.4.3動畫隊列jQuery可以為多個連續(xù)的animate()方法創(chuàng)建動畫隊列，然后依次執(zhí)行隊列中的每一項動畫從而實現(xiàn)更加復雜的動畫效果。在同一個animate()方法中描述的多個動畫效果會同時發(fā)生，但在不同的animate()方法中描述的動畫效果會按照動畫隊列中的先后次序發(fā)生。
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 衛(wèi)生系統(tǒng)平安建設活動方案（3篇）
- 質控小組職責模版（2篇）
- 施工人員管理制度（3篇）
- 二零二五年度建筑工程施工服務外包合同2篇
- 課題申報書：大語言模型驅動三語教學的能動性分析和應用路徑研究
- 裝飾圖案課程設計理念
- 二零二五年度新能源設備技術出口服務協(xié)議3篇
- 2024年規(guī)范化勞務輸出協(xié)議模板
- 材料員崗位的具體職責說明范文（2篇）
- 課題申報書：大學生數字化生存境況及優(yōu)化路向研究
- 大足石刻十八講
- 小學音樂-鈴兒響叮當教學設計學情分析教材分析課后反思
- 055風險管理計劃表
- 邊境貿易與經濟發(fā)展
- 公司供應商大會策劃方案
- 2022事業(yè)單位財務規(guī)則解讀PPT
- “簡約與繁復”二元思辨【 審題立意+范文精評 】 語文高分寫作 多元思辨
- 計算物理課件
- 公路水泥穩(wěn)定碎石基層振動成型法施工技術規(guī)范
- 配電箱柜進場驗收表
- 密封條范文模板(A4打印版)
評論
0/150
提交評論