《JavaScript與jQuery網頁前端開發與設計-第2版》課件 CH08 jQuery事件_第1頁
《JavaScript與jQuery網頁前端開發與設計-第2版》課件 CH08 jQuery事件_第2頁
《JavaScript與jQuery網頁前端開發與設計-第2版》課件 CH08 jQuery事件_第3頁
《JavaScript與jQuery網頁前端開發與設計-第2版》課件 CH08 jQuery事件_第4頁
《JavaScript與jQuery網頁前端開發與設計-第2版》課件 CH08 jQuery事件_第5頁
已閱讀5頁，還剩125頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

JavaScript與jQuery

網頁前端開發與設計-第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頁面對不同用戶操作動作的響應。當用戶做某個特定操作時將觸發頁面對應的事件，例如點擊按鈕、移動鼠標、提交表單等?？梢允孪葹橹付ǖ氖录远x需要運行的腳本程序，事件被觸發時將自動執行這段代碼。8.1.2jQuery事件語法格式在jQuery中，事件的語法格式如下：其中$(selector)可以是事件允許的jQuery選擇器，action需要替換為被監聽的事件名稱。$(selector).action(function(){//事件觸發后需要執行的自定義腳本代碼});8.1.2jQuery事件語法格式例如，為段落元素<p>添加鼠標點擊事件click，其jQuery代碼如下:上述代碼中的關鍵詞click表示鼠標左鍵單擊事件，當用戶使用鼠標點擊了段落元素時將執行其中的alert()語句。$("p").click(function(){alert("段落元素被鼠標點擊了！");});8.2常用jQuery事件常用jQuery事件根據其性質可以歸納為以下四類：文檔/窗口事件：頁面文檔或瀏覽器窗口發生變化時所觸發的事件；鍵盤事件：用戶操作鍵盤所觸發的事件； 鼠標事件：用戶操作鼠標所觸發的事件； 表單事件：用戶操作表單所觸發的事件。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()事件又稱為準備就緒事件，該事件只在文檔準備就緒時觸發，因此其選擇器只能是$(document)。一般來說，為了避免文檔在準備就緒前就執行了其他jQuery代碼而導致錯誤，所有的jQuery函數都需要寫在文檔準備就緒（documentready）函數中。8.2.1文檔/窗口事件1. ready()事件其語法格式如下：其中function為必填參數，表示文檔加載完畢后需要運行的函數。$(document).ready(function)8.2.1文檔/窗口事件1. ready()事件例如：上述代碼表示在頁面加載完畢時執行alert()語句跳出提示框。$(document).ready(function(){alert("頁面已經準備就緒！");});8.2.1文檔/窗口事件1. ready()事件在實際使用時，文檔準備就緒函數function的內部代碼可以更為豐富，例如可以是多個獨立的jQuery語句或者jQuery函數的調用組合而成。瀏覽器會按照先后順序執行其內部的全部代碼。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()事件當頁面中指定的元素被加載完畢時會觸發load()事件。該事件通常用于監聽具有可加載內容的元素，例如圖像元素<img>、內聯框架<iframe>等。其語法格式如下：其中參數function為必填內容，表示元素加載完畢時需要執行的函數。$(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()事件當用戶離開當前頁面時會觸發unload()事件，該事件只適用于window對象?？赡軐е掠|發unload()事件的行為如下： 關閉整個瀏覽器或當前頁面； 在當前頁面的瀏覽器地址欄中輸入新的URL地址并進行訪問； 使用瀏覽器上的前進或后退按鈕；點擊瀏覽器上的刷新按鈕或當前瀏覽器支持快捷方式刷新頁面； 點擊當前頁面中的某個超鏈接導致跳轉新頁面。8.2.1文檔/窗口事件3. unload()事件其語法格式如下：其中參數function為必填內容，表示離開頁面時需要執行的函數。$(window).unload(function)8.2.1文檔/窗口事件3. unload()事件例如：$(window).unload(function(){

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

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

event：必填參數，用于指定事件名稱。例如"click"。

data：可選參數，用于規定需要傳遞給函數的額外數據。

function：必填參數，用于規定事件觸發時的執行函數。$(selector).bind(event,[data,]function)8.3.1jQuery事件綁定1. bind()方法例如，為按鈕<button>元素綁定點擊事件（鼠標左鍵單擊），代碼如下：$("button").bind("click",function(){alert("按鈕的點擊事件被觸發！");})8.3.1jQuery事件綁定1. bind()方法如果指定元素綁定的多個事件需要調用同一個函數，可以將這些事件名稱用空格隔開后并列添加在參數event中，例如：$("button").bind("clickdblclickmouseenter",function(){alert("按鈕的單擊/雙擊/鼠標進入事件被觸發！");})8.3.1jQuery事件綁定1. bind()方法如果需要為指定元素同時綁定多個事件并觸發不同的函數，其語法格式如下：該方法可以分別為每個事件單獨綁定函數，使用起來更為靈活。$(selector).bind({event1:function1,event2:function2,…eventN:functionN})8.3.1jQuery事件綁定1. bind()方法例如，為按鈕<button>元素同時綁定單擊、雙擊和鼠標懸停事件，并實現不同的觸發效果。其代碼如下：上述代碼表示單擊、雙擊或鼠標懸停于按鈕時網頁背景色分別更換為紅色、黃色或藍色。$("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：必填參數，用于規定需要綁定事件的一個或多個子元素。

event：必填參數，用于指定需要綁定給子元素的一個或多個事件名稱，例如"click"。如果有多個事件同時綁定需要用空格隔開。例如"clickdblclickmouseover"。

data：可選參數，用于規定需要傳遞給函數的額外數據。

function：可選參數，用于規定需要綁定的事件觸發時的執行函數。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()方法的優勢在于其還可以為指定元素的未來子元素（解釋：即當前尚未創建，后續通過代碼動態添加的子元素）綁定事件。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：可選參數，用于規定需要綁定事件的子元素，如果沒有可以不填。data：可選參數，用于規定需要傳遞給函數的額外數據。function：可選參數，用于規定需要綁定的事件觸發時的執行函數。8.3.1jQuery事件綁定3. on()方法將bind()方法改寫為on()方法只需要修改方法名稱，其他參數無需變化。例如，改用on()方法為按鈕<button>元素綁定點擊事件（鼠標左鍵單擊），代碼如下：$("button").on("click",function(){alert("按鈕的點擊事件被觸發！");})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()方法的支持，因此建議在未來的實踐開發中使用off()來替換前兩種方法。8.3.2jQuery事件解除1. unbind()方法unbind()方法可以用于給指定的元素解除事件觸發效果，其語法格式如下：$(selector).unbind([event][,function])8.3.2jQuery事件解除1. unbind()方法參數解釋如下：

event：可選參數，用于指定需要解除的一個或多個事件名稱，例如"click"或"clickdblclickmouseover"。如果該參數不填寫，則表示解除指定元素的全部事件。

function：可選參數，用于規定需要解除的事件觸發時的執行函數。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：可選參數，用于規定需要綁定事件的一個或多個子元素。event：可選參數，用于指定需要解除的一個或多個事件名稱，例如"click"或"clickdblclickmouseover"。function：可選參數，用于規定需要解除的事件觸發時的執行函數。注：如果不填寫任何參數，則表示解除之前使用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：可選參數，用于規定需要解綁事件的子元素，如果沒有可以不填。data：可選參數，用于規定需要傳遞給函數的額外數據。function：可選參數，用于規定需要解綁的事件觸發時的執行函數。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臨時事件在某些特殊情況下，為元素綁定的事件僅需要執行一次就必須解除綁定，此類情況我們將其稱為元素的臨時事件。8.3.3jQuery臨時事件例如，為按鈕<button>元素綁定臨時的點擊事件（鼠標左鍵單擊），代碼如下：上述代碼使用了on()方法為按鈕進行了click()事件的綁定，當click()事件首次被觸發時立刻調用off()方法解綁事件。$("button").on("click",function(){alert("按鈕的點擊事件被觸發！");$(this).off("click");})8.3.3jQuery臨時事件事實上，在jQuery中已經提供了專門的one()方法來代替on()和off()方法處理此類情況。one()方法綁定的事件在觸發一次之后將自動解除。其語法格式如下：$(selector).one(event,[childSelector,][data,]function)8.3.3jQuery臨時事件參數解釋如下：event：必填參數，用于指定需要綁定給指定元素的一個或多個事件名稱，例如"click"。如果有多個事件同時綁定需要用空格隔開。例如"clickdblclickmouseover"。childSelector：可選參數，用于規定需要綁定事件的子元素，如果沒有可以不填。data：可選參數，用于規定需要傳遞給函數的額外數據。function：可選參數，用于規定需要綁定的事件觸發時需要執行的函數。8.3.3jQuery臨時事件例如，使用one()方法修改上一段示例代碼，更新后的代碼如下：上述代碼只能被執行一次，然后就會自行解除click()事件的綁定。用這種方式只需要定義綁定的事件即可，無需特意在處理之后追加事件解綁的腳本代碼。$("button").one("click",function(){alert("按鈕的點擊事件被觸發！");})8.3.3jQuery臨時事件【例8-15】jQuery臨時事件one()方法的簡單應用8.4階段案例：鼠標懸停切換圖片8.4.1案例需求8.4.2界面設計8.4.3邏輯實現8.4.4案例思考8.4.1案例需求背景介紹：鼠標懸停切換圖片特效是通過用戶鼠標的選擇來顯示指定圖片內容，該版塊也常用于網站首頁，例如商品展示、旅游景點介紹等。8.4.1案例需求功能要求：使用jQuery實現鼠標懸停手動切換展示圖片特效，如圖所示。當用戶將鼠標懸浮于左側的文字上時文字變成紅色，并且右側圖片自動切換到對應的畫面。8.4.2界面設計本項目的主要內容分為兩個版塊：左側的列表標簽<ul>用于顯示文字標題，右側的<img>標簽用于顯示圖片。結構如圖所示。8.4.2界面設計創建一個HTML文件，文件名可自定義，例如SliderDemo.html。在HTML5中使用<divclass="sliderWrap">元素將這兩個版塊嵌套在內部，相關代碼如下：1. <body>2. <!--標題-->3. <h3>jQuery鼠標懸停切換圖片</h3>4. <!--水平線-->5. <hr>6. <!--圖片輪播區域-->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外部樣式表規定頁面樣式。在本地css文件夾中創建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. /*圖片輪播區域樣式設置*/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%

溫馨提示

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

評論

0/150

提交評論