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

下載本文檔

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

文檔簡介

《JavaScript與jQuery網(wǎng)頁前端開發(fā)與設(shè)計(jì)-第2版》教案第8章jQuery事件一、教學(xué)目標(biāo)：了解jQuery事件的基礎(chǔ)語法格式；掌握常見jQuery文檔/窗口事件的用法；掌握常見jQuery鍵盤事件的用法；掌握常見jQuery鼠標(biāo)事件的用法；掌握常見jQuery表單事件的用法；掌握jQuery事件綁定與解除的用法；掌握jQuery臨時事件的用法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：jQuery的各類事件（文檔/窗口、鍵盤、鼠標(biāo)、表單）；難點(diǎn)：jQuery事件綁定與解除。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要介紹jQuery事件的相關(guān)知識，包括jQuery事件的含義及語法格式、常用jQuery事件以及jQuery事件的綁定與解除。五、教學(xué)基本內(nèi)容：8.1jQuery事件概述8.1.1事件的含義事件指的是HTML頁面對不同用戶操作動作的響應(yīng)。當(dāng)用戶做某個特定操作時將觸發(fā)頁面對應(yīng)的事件，例如點(diǎn)擊按鈕、移動鼠標(biāo)、提交表單等?？梢允孪葹橹付ǖ氖录远x需要運(yùn)行的腳本程序，事件被觸發(fā)時將自動執(zhí)行這段代碼。8.1.2jQuery事件語法格式在jQuery中，事件的語法格式如下：$(selector).action(function(){//事件觸發(fā)后需要執(zhí)行的自定義腳本代碼});其中$(selector)可以是事件允許的jQuery選擇器，action需要替換為被監(jiān)聽的事件名稱。例如，為段落元素<p>添加鼠標(biāo)點(diǎn)擊事件click，其jQuery代碼如下:$("p").click(function(){alert("段落元素被鼠標(biāo)點(diǎn)擊了！");});上述代碼中的關(guān)鍵詞click表示鼠標(biāo)左鍵單擊事件，當(dāng)用戶使用鼠標(biāo)點(diǎn)擊了段落元素時將執(zhí)行其中的alert()語句。jQuery支持HTMLDOM中的絕大部分事件，下一節(jié)將介紹常用的四類jQuery事件。8.2常用jQuery事件常用jQuery事件根據(jù)其性質(zhì)可以歸納為以下四類：文檔/窗口事件：頁面文檔或?yàn)g覽器窗口發(fā)生變化時所觸發(fā)的事件；鍵盤事件：用戶操作鍵盤所觸發(fā)的事件；鼠標(biāo)事件：用戶操作鼠標(biāo)所觸發(fā)的事件；表單事件：用戶操作表單所觸發(fā)的事件。8.2.1文檔/窗口事件jQuery常見文檔/窗口事件如表8-1所示。表8-1jQuery常見窗口事件事件名稱解釋語法格式ready()當(dāng)文檔準(zhǔn)備就緒時觸發(fā)事件$(document).ready(function)load()當(dāng)指定元素加載時觸發(fā)事件$(selector).load(function)unload()當(dāng)用戶瀏覽器窗口從當(dāng)前頁面跳轉(zhuǎn)其他頁面時觸發(fā)此事件$(window).unload(function)1. ready()事件ready()事件又稱為準(zhǔn)備就緒事件，該事件只在文檔準(zhǔn)備就緒時觸發(fā)，因此其選擇器只能是$(document)。一般來說，為了避免文檔在準(zhǔn)備就緒前就執(zhí)行了其他jQuery代碼而導(dǎo)致錯誤，所有的jQuery函數(shù)都需要寫在文檔準(zhǔn)備就緒（documentready）函數(shù)中。其語法格式如下：$(document).ready(function)其中function為必填參數(shù)，表示文檔加載完畢后需要運(yùn)行的函數(shù)。例如：$(document).ready(function(){alert("頁面已經(jīng)準(zhǔn)備就緒！");});上述代碼表示在頁面加載完畢時執(zhí)行alert()語句跳出提示框。在實(shí)際使用時，文檔準(zhǔn)備就緒函數(shù)function的內(nèi)部代碼可以更為豐富，例如可以是多個獨(dú)立的jQuery語句或者jQuery函數(shù)的調(diào)用組合而成。瀏覽器會按照先后順序執(zhí)行其內(nèi)部的全部代碼。由于ready()事件只用于當(dāng)前文檔，因此也可以省略選擇器將其精簡為以下兩種格式：$().ready(function)或者$(function)需要注意是，ready()事件不要與<body>元素的onload屬性一起使用，以免產(chǎn)生沖突?！纠?-1】jQueryready()事件的簡單應(yīng)用測試ready()事件被觸發(fā)的效果?！敬a說明】由于ready()事件在頁面準(zhǔn)備就緒時就會被觸發(fā)，而且當(dāng)前示例頁面中的內(nèi)容很少幾乎可以瞬間加載完畢，因此會首先看到彈出的提示框。如果當(dāng)前示例的頁面內(nèi)容很多，需要耗費(fèi)一定的時間進(jìn)行加載，那么用戶會先看到正在逐步加載并顯示出來的頁面內(nèi)容，等待元素全部加載完畢才會看到彈出的提示框。2. load()事件當(dāng)頁面中指定的元素被加載完畢時會觸發(fā)load()事件。該事件通常用于監(jiān)聽具有可加載內(nèi)容的元素，例如圖像元素<img>、內(nèi)聯(lián)框架<iframe>等。其語法格式如下：$(selector).load(function)其中參數(shù)function為必填內(nèi)容，表示元素加載完畢時需要執(zhí)行的函數(shù)。例如：$("img").load(function(){alert("圖像已經(jīng)加載完畢！");});上述代碼表示當(dāng)圖像元素<img>中的圖片資源加載完畢時彈出提示框?！纠?-2】jQueryload()事件的簡單應(yīng)用測試圖像元素<img>的load()事件觸發(fā)效果。【代碼說明】為延緩元素的加載速度，以便用戶可以看清加載前后頁面的變化，本示例選擇了一幅較大的墻報(bào)圖片wallpaper.jpg（文件大小為11.0MB）作為加載對象。圖(a)為墻報(bào)圖片的加載過程，由于圖片較大需要耗費(fèi)一些時間等待，此時圖片上方的文字內(nèi)容為“墻報(bào)正在加載中，請稍后。。?！薄D(b)為墻報(bào)圖片加載完畢后的頁面效果，此時可以看到圖片上方的文字內(nèi)容變成了“墻報(bào)加載完畢！”，這是由于圖片加載完畢時觸發(fā)了load()事件從而運(yùn)行了其中重置段落文本內(nèi)容的腳本代碼。需要注意的是，load()事件是否會被觸發(fā)也取決于運(yùn)行的瀏覽器。例如在IE或Firefox瀏覽器中，如果元素已經(jīng)被緩存則不會觸發(fā)load()事件。為避免這一情況，本示例截圖中所使用的是Chrome瀏覽器。3. unload()事件當(dāng)用戶離開當(dāng)前頁面時會觸發(fā)unload()事件，該事件只適用于window對象?？赡軐?dǎo)致觸發(fā)unload()事件的行為如下：關(guān)閉整個瀏覽器或當(dāng)前頁面；在當(dāng)前頁面的瀏覽器地址欄中輸入新的URL地址并進(jìn)行訪問；使用瀏覽器上的前進(jìn)或后退按鈕；點(diǎn)擊瀏覽器上的刷新按鈕或當(dāng)前瀏覽器支持快捷方式刷新頁面；點(diǎn)擊當(dāng)前頁面中的某個超鏈接導(dǎo)致跳轉(zhuǎn)新頁面。其語法格式如下：$(window).unload(function)其中參數(shù)function為必填內(nèi)容，表示離開頁面時需要執(zhí)行的函數(shù)。例如：$(window).unload(function(){alert("您已經(jīng)離開當(dāng)前頁面，再見！");});需要注意是，在實(shí)踐中發(fā)現(xiàn)在不同瀏覽器中unload()事件的兼容情況不是很理想，例如在IE9+或Chrome瀏覽器中僅有刷新會觸發(fā)該事件，關(guān)閉瀏覽器時無任何響應(yīng)。與此同時，jQuery官方也宣布在jQuery3.0之后的版本將徹底取消對unload()事件的支持，因此不建議將該事件運(yùn)用于未來的實(shí)踐開發(fā)中?！纠?-3】jQueryunload()事件的簡單應(yīng)用測試unload()事件被觸發(fā)的效果。【代碼說明】由于瀏覽器的兼容性問題（部分瀏覽器版本關(guān)閉動作時unload()事件無響應(yīng)），因此本示例使用刷新動作測試unload()事件的觸發(fā)效果。如圖8-3所示，當(dāng)用戶刷新頁面時可以跳出消息警告框，證明unload()事件已被觸發(fā)。8.2.2鍵盤事件鍵盤按鍵的敲擊可以分解為兩個過程：1.按鍵被按下去；2.按鍵被松開。這兩個動作分別觸發(fā)或組合的jQuery鍵盤事件如表8-2所示。表8-2jQuery常見鍵盤事件事件名稱解釋語法格式keydown()鍵盤上按鍵被按下時觸發(fā)此事件$(selector).keydown(function)keypress()鍵盤上按鍵被按下并快速釋放觸發(fā)此事件$(selector).keypress(function)keyup()鍵盤上按鍵被釋放時觸發(fā)此事件$(selector).keyup(function)以上三種鍵盤事件的選擇器均可以是$(document)或者文檔中的HTML元素。如果直接在文檔上設(shè)置，則無論元素是否獲取了焦點(diǎn)都會觸發(fā)該事件；如果是指定了選擇器，則必須在該選擇器指定的元素獲得焦點(diǎn)的狀態(tài)下才會觸發(fā)該事件。1. keydown()事件當(dāng)鍵盤上的按鍵處于按下狀態(tài)時將觸發(fā)keydown()事件，其語法格式如下：$(selector).keydown(function)例如：$("input:text").keydown(function(){alert("按鍵被按下！");});上述代碼表示當(dāng)用戶在表單的文本框<input>元素中輸入內(nèi)容時觸發(fā)keydown()事件。2. keyup()事件當(dāng)鍵盤上已經(jīng)被按下去的按鍵處于被釋放的狀態(tài)將觸發(fā)keyup()事件，其語法格式如下：$(selector).keyup(function)例如：$("input:text").keyup(function(){alert("按鍵被釋放！");});上述代碼表示當(dāng)用戶在表單的文本框<input>元素中輸入內(nèi)容并在松開按鍵時觸發(fā)keyup()事件。3. keypress()事件當(dāng)鍵盤上的按鍵處于按下并快速釋放時將觸發(fā)keypress()事件，其語法格式如下：$(selector).keypress(function)簡而言之，keypress()事件可以看作是快速實(shí)現(xiàn)keydown()和keyup()事件的一個組合，表示鍵盤被敲擊。例如：$("input:text").keypress(function){alert("按鍵被敲擊！");}上述代碼表示當(dāng)用戶在表單的文本框<input>元素中輸入內(nèi)容時觸發(fā)keypress()事件?！纠?-4】jQuery鍵盤事件的簡單應(yīng)用分別測試keydown()、keyup()和keypress()事件被觸發(fā)的效果。【代碼說明】本示例主要包含了三個段落元素<p>，分別用于放置文本輸入框和兩條提示信息（按鍵狀態(tài)和次數(shù)）。用戶在文本框中進(jìn)行輸入動作時將觸發(fā)不同的鍵盤事件，從而使得提示信息的文字內(nèi)容發(fā)生變化以及按鍵次數(shù)得到更新。圖(a)是頁面初始狀態(tài)，由圖可見此時沒有觸發(fā)鍵盤事件，并且按鍵次數(shù)為0。圖(b)為多次輸入后再次釋放按鍵時的狀態(tài)，由圖可見此時提示信息已被更新為“按鍵被釋放”，并且按鍵次數(shù)為5。事實(shí)上，在每個字母的輸入過程中提示信息均發(fā)生兩次變化：當(dāng)用戶按鍵輸入時提示信息會變?yōu)椤鞍存I被按下”，而輸入完畢釋放鍵盤時提示信息才會變成“按鍵被釋放”，由于這個過程較難截圖，可以由讀者自行測試體會。8.2.3鼠標(biāo)事件jQuery常見鼠標(biāo)事件如表8-3所示。表8-3jQuery常見鼠標(biāo)事件事件名稱解釋語法格式click()觸發(fā)被選中元素的點(diǎn)擊事件。$(selector).click(function)dbclick()觸發(fā)被選中元素的雙擊事件。$(selector).dbclick(function)hover()觸發(fā)鼠標(biāo)懸浮在被選中元素上事件。$(selector).hover(function)mousedown()觸發(fā)鼠標(biāo)鍵按下事件。$(selector).mousedown(function)mouseenter()觸發(fā)鼠標(biāo)剛進(jìn)入被選中元素事件。$(selector).mouseenter(function)mouseleave()觸發(fā)鼠標(biāo)剛離開被選中元素事件。$(selector).mouseleave(function)mousemove()觸發(fā)鼠標(biāo)移動事件。$(selector).mousemove(function)mouseout()鼠標(biāo)離開被選中元素或其子元素時觸發(fā)。$(selector).mouseout(function)mouseover()鼠標(biāo)穿過被選中元素或其子元素時觸發(fā)。$(selector).mouseover(function)mouseup()觸發(fā)鼠標(biāo)按鍵被釋放事件。$(selector).mouseup(function)toggle()一次綁定兩個或兩個以上函數(shù)，當(dāng)指定元素被點(diǎn)擊時依次執(zhí)行其中一個函數(shù)。$(selector).toggle(function)注：鼠標(biāo)事件的選擇器可以是文檔中的任意HTML元素。1. click()事件當(dāng)用戶使用鼠標(biāo)左鍵點(diǎn)擊（單擊）網(wǎng)頁文檔中的任意HTML元素時均可以觸發(fā)click()事件，其語法格式如下：$(selector).click(function)以按鈕<button>元素為例，被鼠標(biāo)左鍵點(diǎn)擊后彈出警告框的代碼如下：$("button").click(function(){alert("click事件被觸發(fā)！");});當(dāng)click()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。2. dblclick()事件當(dāng)用戶使用鼠標(biāo)左鍵雙擊網(wǎng)頁文檔中的任意HTML元素時均可以觸發(fā)dblclick()事件，其語法格式如下：$(selector).dblclick(function)以按鈕<button>元素為例，被鼠標(biāo)左鍵雙擊后彈出警告框的代碼如下：$("button").dblclick(function(){alert("dblclick事件被觸發(fā)！");});當(dāng)dblclick()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。3. hover()事件當(dāng)用戶將鼠標(biāo)懸停在網(wǎng)頁文檔中的任意HTML元素上時將會觸發(fā)hover()事件，其語法格式如下：$(selector).hover(function)以段落元素<p>為例，鼠標(biāo)懸停在該元素上時彈出警告框的代碼如下：$("p").hover(function(){alert("hover事件被觸發(fā)！");});當(dāng)hover()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。【例8-5】jQuery鼠標(biāo)事件click()、dbclick()與hover()的簡單應(yīng)用本示例選用了兩張燈泡圖片素材（一明一暗）分別測試click()、dbclick()和hover()事件被觸發(fā)的效果。初始狀態(tài)下，燈泡為黑暗效果；當(dāng)測試事件被觸發(fā)時，對應(yīng)的燈泡將點(diǎn)亮。【代碼說明】本示例主要包含了三個<div>元素，分別用于放置三張完全相同的燈泡圖片，并命名為燈泡1、2、3。每個燈泡的開燈方式分別對應(yīng)一種鼠標(biāo)事件：click()、dblclick()和hover()。其中click()和dblclick()事件是由點(diǎn)擊按鈕元素<button>來實(shí)現(xiàn)的，hover()事件是由鼠標(biāo)懸浮于燈泡圖片上實(shí)現(xiàn)的。由圖8-5(a)可見，初始狀態(tài)下燈泡均為關(guān)閉（不發(fā)光）效果。當(dāng)用戶進(jìn)行了正確的鼠標(biāo)操作時，對應(yīng)的燈泡將被點(diǎn)亮，如圖8-5(b)所示。燈泡被點(diǎn)亮的原理是使用jQuery代碼動態(tài)更新圖片元素<img>的src屬性值。當(dāng)指定的事件發(fā)生時，將src屬性值更新為明亮效果的燈泡圖片url地址即可。4. mousexxx()系列事件以關(guān)鍵詞mouse開頭的一系列鼠標(biāo)事件是根據(jù)鼠標(biāo)移動方向或效果來區(qū)分的，其語法格式如下：$(selector).mousexxx(function)其中xxx替換成具體的動作效果，可替換的關(guān)鍵詞如下：down：鼠標(biāo)按鍵被按下；up：鼠標(biāo)按鍵被釋放，與down相反；move：鼠標(biāo)處于移動狀態(tài)；enter：鼠標(biāo)進(jìn)入指定元素；leave：鼠標(biāo)離開指定元素，與enter相反；out：鼠標(biāo)離開指定元素或其子元素；over：鼠標(biāo)穿過指定元素或其子元素，與out相反。【例8-6】jQuery鍵盤事件mouse系列的簡單應(yīng)用1本示例繼續(xù)使用上一個示例中的兩張燈泡圖片素材（一明一暗）測試mousedown()和mouseup()事件被觸發(fā)的效果?！敬a說明】本示例主要包含了一個寬400px、高450px的<div>元素，用于放置燈泡圖片和文字提示內(nèi)容。燈泡的開/關(guān)燈方式分別對應(yīng)一種鼠標(biāo)事件：mousedown()和mouseup()。當(dāng)用戶在燈泡圖片上按下鼠標(biāo)左鍵時會觸發(fā)mousedown()事件，此時燈泡變亮；當(dāng)用戶釋放按鍵時會觸發(fā)mouseup()事件，此時燈泡變暗還原初始狀態(tài)。由圖8-6(a)可見，初始狀態(tài)下燈泡為關(guān)閉（不發(fā)光）效果。當(dāng)用戶進(jìn)行了正確的鼠標(biāo)操作時，對應(yīng)的燈泡將被點(diǎn)亮，如圖8-6(b)所示。與上一個示例不同的是，前者只能一次開燈無法關(guān)閉，而本示例可以根據(jù)鼠標(biāo)按鍵的按下/釋放狀態(tài)切換燈泡的明暗。如果用戶不釋放鼠標(biāo)左鍵，則燈泡會持續(xù)保持開燈狀態(tài)，直到用戶釋放按鍵燈泡才會恢復(fù)關(guān)閉狀態(tài)。【例8-7】jQuery鍵盤事件mouse系列的簡單應(yīng)用2測試mousemove()事件被觸發(fā)的效果。【代碼說明】本示例主要用于測試鼠標(biāo)在移動過程中是否可以獲取當(dāng)前的頁面坐標(biāo)。由圖8-7(a)可見，初始狀態(tài)下由于鼠標(biāo)尚未進(jìn)行移動，所以沒有獲取到坐標(biāo)數(shù)據(jù)。當(dāng)用戶開始在頁面上移動鼠標(biāo)時將實(shí)時獲取鼠標(biāo)當(dāng)前所在位置的x和y坐標(biāo)，如圖8-7(b)所示。在jQuery代碼中，使用了選擇器$(document)表示當(dāng)前頁面，參數(shù)event的屬性pageX和pageY分別用于記錄鼠標(biāo)的當(dāng)前坐標(biāo)。只要鼠標(biāo)處于移動狀態(tài)均會不斷觸發(fā)mousemove()事件，因此x和y軸坐標(biāo)的數(shù)據(jù)將實(shí)時發(fā)生變化?！纠?-8】jQuery鍵盤事件mouse系列的簡單應(yīng)用3【代碼說明】本示例主要包含了一個用于測試鼠標(biāo)進(jìn)入/離開效果的段落元素<p>，并使用CSS內(nèi)部樣式表定義其寬、高均為200px，并包含了1px寬的黑色實(shí)線邊框效果。圖8-8(a)為頁面初始狀態(tài)，此時鼠標(biāo)尚未進(jìn)行移動，段落元素的背景顏色和文字提示內(nèi)容均為初始效果；圖8-8(b)為鼠標(biāo)進(jìn)入段落元素的效果，此時mouseenter()事件被觸發(fā)，由圖可見當(dāng)前段落元素文字提示內(nèi)容為“鼠標(biāo)已進(jìn)入”并且背景顏色更新為紅色；圖8-8(c)為鼠標(biāo)離開段落元素的效果，此時mouseleave()事件被觸發(fā)，由圖可見當(dāng)前段落元素文字提示內(nèi)容為“鼠標(biāo)已離開”并且背景顏色更新為淺藍(lán)色?！纠?-9】jQuery鍵盤事件mouse系列的簡單應(yīng)用4測試mouseover()和mouseout()事件被觸發(fā)的效果?！敬a說明】本示例使用兩個<div>元素嵌套形成了父元素和子元素的布局方式，其中父、子元素的id屬性值分別為"box01"和"box02"。圖8-9(a)為鼠標(biāo)第一次移動后的效果，當(dāng)前鼠標(biāo)剛從父元素外部移動進(jìn)入了父元素內(nèi)部，尚未進(jìn)入子元素中，由圖可見父元素的mouseover()事件被觸發(fā)；圖8-9(b)為鼠標(biāo)繼續(xù)進(jìn)入到子元素中的效果，由圖可見父元素的mouseover()與mouseout()事件均被觸發(fā)；圖8-9(c)為鼠標(biāo)剛離開子元素時的效果，此時鼠標(biāo)尚在父元素內(nèi)部，由圖可見父元素的mouseover()與mouseout()事件也是均被觸發(fā)；圖8-9(d)為鼠標(biāo)離開父元素時的效果，由圖可見只有父元素的mouseout()事件被觸發(fā)。5. toggle()事件toggle()事件可以看作是一種特殊的鼠標(biāo)點(diǎn)擊事件，可以一次綁定兩個或兩個以上函數(shù)。當(dāng)元素被鼠標(biāo)點(diǎn)擊時，會按照先后順序每次只觸發(fā)其中一個函數(shù)。其語法格式如下：$(selector).toggle(function1,function2,…functionN)其中function1-N可以替換成需要觸發(fā)的若干個函數(shù)，函數(shù)之間用逗號隔開即可。以按鈕<button>的toggle()事件為例，綁定三個自定義函數(shù)的語法格式如下：$("button").toggle(function(){alert("toggle事件首次被觸發(fā)，運(yùn)行該函數(shù)。");},function(){alert("toggle事件第二次被觸發(fā)，運(yùn)行該函數(shù)。");},function(){alert("toggle事件第三次被觸發(fā)，運(yùn)行該函數(shù)。");});每次點(diǎn)擊該按鈕都會觸發(fā)一次toggle事件，按照點(diǎn)擊的次數(shù)會依次運(yùn)行其中的第一、二、三個函數(shù)，當(dāng)最后一個函數(shù)被執(zhí)行則下一次觸發(fā)該toggle事件將重新運(yùn)行第一個函數(shù)的內(nèi)容。特別需要注意的是：toggle()事件在jQuery1.8版之后已過期。因此這里僅作大致了解，不再進(jìn)行完整示例，也請讀者在實(shí)際開發(fā)過程中請慎用該事件。8.2.4表單事件jQuery常見表單事件如表8-4所示。表8-SEQ表12-\*ARABIC4jQuery常見表單事件事件名稱解釋語法格式blur()表單元素失去焦點(diǎn)時觸發(fā)事件$(selector).blur(function)focus()表單元素已獲得焦點(diǎn)時觸發(fā)事件。$(selector).focus(function)change()表單元素內(nèi)容發(fā)生變化時觸發(fā)事件。$(selector).change(function)select()textarea或文本類型的input元素中的文本內(nèi)容被選中時觸發(fā)事件。$(selector).select(function)submit()提交表單時觸發(fā)事件。$(selector).submit(function)注：表單事件的選擇器大多數(shù)情況下均為文檔中的表單元素。1. blur()事件當(dāng)某個處于選中狀態(tài)的元素失去焦點(diǎn)時將觸發(fā)blur()事件，其語法格式如下：$(selector).blur(function)該事件的選擇器初期只能是表單元素，目前已經(jīng)適用于任意HTML元素。通過鼠標(biāo)點(diǎn)擊元素以外的位置，或者鍵盤Tab按鍵等方式均可以令元素失去焦點(diǎn)。以表單中的<input>元素為例，失去焦點(diǎn)時彈出警告框的代碼如下：$("input").blur(function(){alert("blur事件被觸發(fā)！");});當(dāng)blur()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。2. focus()事件當(dāng)某個處于未選中狀態(tài)的元素獲得焦點(diǎn)時將觸發(fā)focus()事件，其語法格式如下：$(selector).focus(function)該事件的選擇器初期只能是表單元素或超鏈接元素，目前已經(jīng)適用于任意HTML元素。通過鼠標(biāo)點(diǎn)擊元素、鍵盤Tab按鍵切換等方式均可以令元素獲得焦點(diǎn)。同樣以表單中的<input>元素為例，獲得焦點(diǎn)時彈出警告框的代碼如下：$("input").focus(function(){alert("focus事件被觸發(fā)！");});當(dāng)focus()事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。【例8-10】jQuery表單事件blur()和focus()的簡單應(yīng)用測試blur()和focus()事件被觸發(fā)的效果?！敬a說明】本示例使用了一個簡易表單元素<form>，在該表單中主要包含了用戶名和密碼輸入框以測試blur()和focus()事件的效果。在這兩個輸入框的右側(cè)均追加了一個初始狀態(tài)下無任何內(nèi)容的<span>元素，作為焦點(diǎn)獲得/失去時的提示語句。當(dāng)對應(yīng)的事件被觸發(fā)時，將使用jQuery代碼更新<span>元素中的文本內(nèi)容。圖8-10(a)為頁面初始狀態(tài)，由圖可見此時兩個輸入框均未獲得焦點(diǎn)；圖8-10(b)為鼠標(biāo)選中用戶名輸入框時的效果，此時用戶名輸入框的focus()事件被觸發(fā)；圖8-10(c)為鼠標(biāo)選中密碼輸入框時的效果，此時用戶名輸入框的blur()事件與密碼輸入框的focus()事件同時被觸發(fā)；圖8-10(d)為鼠標(biāo)點(diǎn)擊頁面上兩個輸入框以外的位置使其均失去焦點(diǎn)的效果，此時先前被選中的密碼輸入框的blur()事件被觸發(fā)。3. change()事件當(dāng)輸入框或下拉菜單中的內(nèi)容發(fā)生變化時將觸發(fā)change()事件，其語法格式如下：$(selector).change(function)其選擇器可以是表單中的輸入框<input>、多行文本框<textarea>或者下拉菜單<select>。其觸發(fā)效果不同之處總結(jié)如下：選擇器為<input>或<textarea>：用戶更改輸入框中的內(nèi)容然后讓該輸入框失去焦點(diǎn)才觸發(fā)change()事件；選擇器為<select>：用戶選擇不同的選項(xiàng)時觸發(fā)change()事件。以下拉菜單<select>元素為例，選項(xiàng)被切換后彈出警告框的代碼如下：$("select").change(function(){alert("change事件被觸發(fā)！");});當(dāng)change事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。4. select()事件當(dāng)文本輸入框中有文字內(nèi)容被選中時，將觸發(fā)該元素的select()事件。其語法格式如下：$(selector).select(function)其選擇器只能是單行文本框<inputtype="text">或多行文本框<textarea>。以表單中的<input>元素為例，被鼠標(biāo)選中文本內(nèi)容后彈出警告框的代碼如下：$("input").select(function(){alert("select事件被觸發(fā)！");});當(dāng)select事件被觸發(fā)時，會執(zhí)行其中的alert()方法。該方法也可以替換成其他代碼塊。【例8-11】jQuery表單事件change()和select()的簡單應(yīng)用測試change()和select()事件被觸發(fā)的效果?！敬a說明】本示例使用了一個簡易表單元素<form>，在該表單中主要包含了一個文本輸入框以測試change()和select()事件的效果。在這個輸入框的右側(cè)追加了一個初始狀態(tài)下無任何內(nèi)容的<span>元素，作為測試時的提示語句。當(dāng)對應(yīng)的事件被觸發(fā)時，將使用jQuery代碼更新<span>元素中的文本內(nèi)容。圖8-11(a)為頁面初始狀態(tài)，由圖可見此時輸入框中無任何內(nèi)容；圖8-11(b)為改變輸入框中的文字內(nèi)容然后讓輸入框失去焦點(diǎn)的狀態(tài)，此時輸入框的change()事件被觸發(fā)；圖8-11(c)為鼠標(biāo)選中輸入框中部分文字內(nèi)容的效果，此時輸入框的select()事件被觸發(fā)；圖8-11(d)為再次修改輸入框中部分文字內(nèi)容并在完成后使輸入框失去焦點(diǎn)的效果，此時輸入框的change()事件再次被觸發(fā)。5. submit()事件當(dāng)用戶嘗試提交表單時將觸發(fā)表單元素<form>的submit()事件，其語法格式如下：$(selector).submit(function)顯然，該事件的選擇器只能是表單元素<form>。用戶有兩種提交表單的方式：點(diǎn)擊特定的提交按鈕或者使用鍵盤上的Enter鍵。特定的提交按鈕包括：<inputtype="submit">、<inputtype="image">以及<buttontype="submit">；使用Enter鍵的前提是表單中只有一個文本域，或者表單中包含了提交按鈕。以id="form01"的<form>元素為例，用戶提交表單時彈出警告框的代碼如下：$("#form01").submit(function(e){alert("click事件被觸發(fā)！");});與其他表單事件不同之處在于，其中function(e)中的參數(shù)e為必填內(nèi)容。也可以用其他自定義變量名稱代替，例如event也較為常見。由于submit()事件會在表單正式提交給服務(wù)器之前觸發(fā)，因此常用其進(jìn)行有效性檢測：當(dāng)表單中填寫的內(nèi)容驗(yàn)證不通過時顯示提示語句，并停止表單提交的動作；當(dāng)內(nèi)容驗(yàn)證通過時繼續(xù)完成表單提交的動作?！纠?-12】jQuery事件submit()的簡單應(yīng)用使用submit()事件模擬表單提交的客戶端驗(yàn)證環(huán)節(jié)?！敬a說明】本示例使用了一個簡易表單元素<form>，在該表單中主要包含了單個文本輸入框和提交按鈕以測試submit()事件的效果。當(dāng)用戶點(diǎn)擊提交按鈕時將觸發(fā)submit()事件，進(jìn)行輸入內(nèi)容的有效性驗(yàn)證：如果用戶輸入的不是數(shù)字將停止表單提交動作，并給出建議重新輸入的提示語句；如果用戶輸入的是數(shù)字，將繼續(xù)提交表單。圖8-12(a)為輸入錯誤內(nèi)容并點(diǎn)擊提交按鈕后的效果，由圖可見此時將無法繼續(xù)提交表單；圖8-12(b)為輸入正確內(nèi)容并點(diǎn)擊提交按鈕后的效果，此時提示語句發(fā)生了變化，并且可以看到出現(xiàn)了表單提交成功后的警告框。由于當(dāng)前只是模擬表單提交的效果，并沒有真正的后端服務(wù)器，因此<form>元素的action屬性值填寫了一個簡易的腳本語句用于顯示警告框。開發(fā)者在實(shí)際運(yùn)用中可以將<form>元素的action屬性值更改為正確的服務(wù)器URL地址即可正常使用。8.3jQuery事件綁定與解除在jQuery中，HTML元素的事件監(jiān)聽是可以通過特定的方法來綁定或者解除的。本章節(jié)將介紹如何為指定的HTML元素綁定事件、解除事件以及追加臨時事件。8.3.1jQuery事件綁定目前jQuery常用的事件綁定方法如表8-5所示。表8-SEQ表12-\*ARABIC5jQuery常用的事件綁定方法事件名稱解釋bind()用于給指定的元素綁定一個或多個事件。delegate()用于給指定元素的子元素綁定一個或多個事件。on()用于給指定元素或其子元素綁定一個或多個事件。需要注意的是，在jQuery3.0之后的版本將徹底取消對bind()和delegate()方法的支持，因此在未來的實(shí)踐開發(fā)中建議使用on()來替換前兩種方法。1. bind()方法bind()方法可以用于給指定的元素綁定一個或多個事件，其語法格式如下：$(selector).bind(event,[data,]function)參數(shù)解釋如下：event：必填參數(shù)，用于指定事件名稱。例如"click"。data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。function：必填參數(shù)，用于規(guī)定事件觸發(fā)時的執(zhí)行函數(shù)。例如，為按鈕<button>元素綁定點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：$("button").bind("click",function(){alert("按鈕的點(diǎn)擊事件被觸發(fā)！");})如果指定元素綁定的多個事件需要調(diào)用同一個函數(shù)，可以將這些事件名稱用空格隔開后并列添加在參數(shù)event中，例如：$("button").bind("clickdblclickmouseenter",function(){alert("按鈕的單擊/雙擊/鼠標(biāo)進(jìn)入事件被觸發(fā)！");})如果需要為指定元素同時綁定多個事件并觸發(fā)不同的函數(shù)，其語法格式如下：$(selector).bind({event1:function1,event2:function2,…eventN:functionN})該方法可以分別為每個事件單獨(dú)綁定函數(shù)，使用起來更為靈活。例如，為按鈕<button>元素同時綁定單擊、雙擊和鼠標(biāo)懸停事件，并實(shí)現(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");}});上述代碼表示單擊、雙擊或鼠標(biāo)懸停于按鈕時網(wǎng)頁背景色分別更換為紅色、黃色或藍(lán)色。2. delegate()方法delegate()方法可以用于給指定元素的子元素綁定一個或多個事件，其語法格式如下：$(selector).delegate(childSelector,event,[data,]function)參數(shù)解釋如下：childSelector：必填參數(shù)，用于規(guī)定需要綁定事件的一個或多個子元素。event：必填參數(shù)，用于指定需要綁定給子元素的一個或多個事件名稱，例如"click"。如果有多個事件同時綁定需要用空格隔開。例如"clickdblclickmouseover"。data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。function：可選參數(shù)，用于規(guī)定需要綁定的事件觸發(fā)時的執(zhí)行函數(shù)。例如，在id="test"的<div>元素中包含一個子元素<button>，其HTML頁面代碼如下：<divid="test"><button>我是按鈕子元素</button></div>此時可以使用delegate()方法指定<div>元素，然后為其中的子元素<button>綁定事件。以鼠標(biāo)左鍵點(diǎn)擊事件為例，jQuery代碼如下：$("#test").delegate("button","click",function(){alert("按鈕被點(diǎn)擊！");});上述代碼通過id="test"的<div>元素來準(zhǔn)確定位其中的子元素，此時綁定事件不會影響到在該<div>元素以外的其他任何<button>元素。delegate()方法的優(yōu)勢在于其還可以為指定元素的未來子元素（解釋：即當(dāng)前尚未創(chuàng)建，后續(xù)通過代碼動態(tài)添加的子元素）綁定事件。3. on()方法on()方法是jQuery1.7版之后新增的內(nèi)容，可以用于給指定元素的子元素綁定一個或多個事件，包含了bind()和delegate()方法的全部功能。其語法格式如下：$(selector).on(event,[childSelector,][data,]function)參數(shù)解釋如下：event：必填參數(shù)，用于指定需要綁定給指定元素的一個或多個事件名稱，例如"click"。如果有多個事件同時綁定需要用空格隔開。例如"clickdblclickmouseover"。childSelector：可選參數(shù)，用于規(guī)定需要綁定事件的子元素，如果沒有可以不填。data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。function：可選參數(shù)，用于規(guī)定需要綁定的事件觸發(fā)時的執(zhí)行函數(shù)。將bind()方法改寫為on()方法只需要修改方法名稱，其他參數(shù)無需變化。例如，改用on()方法為按鈕<button>元素綁定點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：$("button").on("click",function(){alert("按鈕的點(diǎn)擊事件被觸發(fā)！");})將delegate()方法改寫為on()方法時，需要注意子元素參數(shù)的位置：delegate()方法中的子元素參數(shù)在事件名稱參數(shù)之前，而on()方法正相反。例如，改用on()方法指定id="test"的<div>元素，然后為其中的子元素<button>綁定事件。以鼠標(biāo)左鍵點(diǎn)擊事件為例，jQuery代碼如下：$("#test").on("click","button",function(){alert("按鈕被點(diǎn)擊！");});【例8-13】jQuery事件綁定on()方法的簡單應(yīng)用使用on()方法進(jìn)行按鈕元素的事件綁定?！敬a說明】本示例包含了1個按鈕元素<button>和2個段落元素<p>，用于測試使用on()方法動態(tài)追加<button>元素的click()事件的效果。其中第1個<p>元素僅用于生成關(guān)于按鈕當(dāng)前狀態(tài)的提示，以告知用戶目前按鈕是否已綁定事件；第2個<p>元素為可點(diǎn)擊區(qū)域，當(dāng)用戶點(diǎn)擊該元素時將使用on()方法為按鈕綁定事件。圖8-13(a)為頁面初始效果，此時測試按鈕點(diǎn)擊無效；圖8-13(b)為點(diǎn)擊按鈕下方段落文字后的效果，此時動態(tài)地為測試按鈕綁定了click()事件，并且由圖可見按鈕上方的提示語句發(fā)生了變化；圖8-13(c)是再次點(diǎn)擊測試按鈕后的效果，由圖可見本次點(diǎn)擊后彈出了警告消息框，這正是使用on()方法為按鈕綁定事件中要求執(zhí)行的代碼內(nèi)容。8.3.2jQuery事件解除目前jQuery常用的事件解除方法如表8-6所示。表8-6jQuery常用的事件解除方法事件名稱解釋unbind()用于給指定的元素解除一個或多個事件。undelegate()用于給指定元素的子元素解除一個或多個事件。off()用于給指定元素或其子元素解除一個或多個事件。需要注意的是，在jQuery3.0之后的版本將徹底取消對unbind()和undelegate()方法的支持，因此建議在未來的實(shí)踐開發(fā)中使用off()來替換前兩種方法。1. unbind()方法unbind()方法可以用于給指定的元素解除事件觸發(fā)效果，其語法格式如下：$(selector).unbind([event][,function])參數(shù)解釋如下：event：可選參數(shù)，用于指定需要解除的一個或多個事件名稱，例如"click"或"clickdblclickmouseover"。如果該參數(shù)不填寫，則表示解除指定元素的全部事件。function：可選參數(shù)，用于規(guī)定需要解除的事件觸發(fā)時的執(zhí)行函數(shù)。例如，為按鈕<button>元素解除點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：$("button").unbind("click",function(){alert("按鈕的點(diǎn)擊事件被解除！");});2. undelegate()方法delegate()方法可以用于給指定元素的子元素綁定一個或多個事件，其語法格式如下：$(selector).undelegate([childSelector,][event,][function])參數(shù)解釋如下：childSelector：可選參數(shù)，用于規(guī)定需要綁定事件的一個或多個子元素。event：可選參數(shù)，用于指定需要解除的一個或多個事件名稱，例如"click"或"clickdblclickmouseover"。function：可選參數(shù)，用于規(guī)定需要解除的事件觸發(fā)時的執(zhí)行函數(shù)。注：如果不填寫任何參數(shù)，則表示解除之前使用delegate()方法綁定的全部事件。例如，在id="test"的<div>元素中包含一個子元素<button>，其HTML頁面代碼如下：<divid="test"><button>我是按鈕子元素</button></div>使用undelegate()方法為其中的子元素<button>解除全部事件，代碼如下：$("#test").undelegate("button");如果只希望解除子元素<button>的click()事件，代碼修改如下：$("#test").undelegate("button","click");需要注意的是，udelegate()方法主要是用于解除之前使用delegate()方法綁定的事件，不能用于解除使用其他方法（例如bind()方法）的綁定事件。3. off()方法off()方法是jQuery1.7版之后新增的內(nèi)容，可以用于給指定元素的子元素解除一個或多個事件，包含了unbind()和undelegate()方法的全部功能。其語法格式如下：$(selector).off(event,[childSelector,][data,]function)參數(shù)解釋如下：event：必填參數(shù)，用于指定需要給指定元素解綁的一個或多個事件名稱，例如"click"。如果有多個事件同時解綁需要用空格隔開。例如"clickdblclickmouseover"。childSelector：可選參數(shù)，用于規(guī)定需要解綁事件的子元素，如果沒有可以不填。data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。function：可選參數(shù)，用于規(guī)定需要解綁的事件觸發(fā)時的執(zhí)行函數(shù)。將unbind()方法改寫為off()方法只需要修改方法名稱，其他參數(shù)無需變化。例如，改用off()方法為按鈕<button>元素解綁點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：$("button").off("click",function(){alert("按鈕的點(diǎn)擊事件被解除！");})將undelegate()方法改寫為off()方法時，需要注意子元素參數(shù)的位置：undelegate()方法中的子元素參數(shù)在事件名稱參數(shù)之前，而off()方法正相反。例如，改用off()方法指定id="test"的<div>元素，然后為其中的子元素<button>解除事件。以鼠標(biāo)左鍵點(diǎn)擊事件為例，jQuery代碼如下：$("#test").off("click","button",function(){alert("按鈕的點(diǎn)擊事件被解除！");});【例8-14】jQuery事件解除off()方法的簡單應(yīng)用使用off()方法進(jìn)行按鈕元素的事件解除?！敬a說明】本示例包含了1個按鈕元素<button>和2個段落元素<p>，用于測試使用off()方法動態(tài)解除<button>元素的click()事件的效果。其中第1個<p>元素僅用于生成關(guān)于按鈕當(dāng)前狀態(tài)的提示，以告知用戶目前按鈕是否已綁定事件；第2個<p>元素為可點(diǎn)擊區(qū)域，當(dāng)用戶點(diǎn)擊該元素時將使用off()方法為按鈕解除事件。圖8-14(a)為頁面初始效果，此時測試按鈕已綁定了click()事件；圖8-14(b)為點(diǎn)擊按鈕后的效果，由圖可見本次點(diǎn)擊后彈出了警告消息框；圖8-14(c)是點(diǎn)擊按鈕下方段落文字后的效果，此時按鈕元素的click()事件已被off()方法解除，由圖可見本次點(diǎn)擊后不再彈出警告消息框。8.3.3jQuery臨時事件在某些特殊情況下，為元素綁定的事件僅需要執(zhí)行一次就必須解除綁定，此類情況我們將其稱為元素的臨時事件。例如，為按鈕<button>元素綁定臨時的點(diǎn)擊事件（鼠標(biāo)左鍵單擊），代碼如下：$("button").on("click",function(){alert("按鈕的點(diǎn)擊事件被觸發(fā)！");$(this).off("click");})上述代碼使用了on()方法為按鈕進(jìn)行了click()事件的綁定，當(dāng)click()事件首次被觸發(fā)時立刻調(diào)用off()方法解綁事件。事實(shí)上，在jQuery中已經(jīng)提供了專門的one()方法來代替on()和off()方法處理此類情況。one()方法綁定的事件在觸發(fā)一次之后將自動解除。其語法格式如下：$(selector).one(event,[childSelector,][data,]function)參數(shù)解釋如下：event：必填參數(shù)，用于指定需要綁定給指定元素的一個或多個事件名稱，例如"click"。如果有多個事件同時綁定需要用空格隔開。例如"clickdblclickmouseover"。childSelector：可選參數(shù)，用于規(guī)定需要綁定事件的子元素，如果沒有可以不填。data：可選參數(shù)，用于規(guī)定需要傳遞給函數(shù)的額外數(shù)據(jù)。function：可選參數(shù)，用于規(guī)定需要綁定的事件觸發(fā)時需要執(zhí)行的函數(shù)。例如，使用one()方法修改上一段示例代碼，更新后的代碼如下：$("button").one("click",function(){alert("按鈕的點(diǎn)擊事件被觸發(fā)！");})上述代碼只能被執(zhí)行一次，然后就會自行解除click()事件的綁定。用這種方式只需要定義綁定的事件即可，無需特意在處理之后追加事件解綁的腳本代碼?！纠?-15】jQuery臨時事件one()方法的簡單應(yīng)用使用one()方法進(jìn)行按鈕元素的臨時事件綁定?！敬a說明】本示例包含了1個按鈕元素<button>用于測試使用one()方法臨時綁定一次click()事件的效果。圖8-15(a)為首次點(diǎn)擊按鈕的效果，由圖可見本次點(diǎn)擊觸發(fā)了click()事件并彈出警告消息框；圖8-14(b)為再次點(diǎn)擊按鈕后的效果，由圖可見本次點(diǎn)擊后沒有彈出警告消息框，這是由于one()方法在執(zhí)行過一次之后會主動為元素解除事件綁定效果。8.4階段案例：鼠標(biāo)懸停切換圖片8.4.1案例需求背景介紹：鼠標(biāo)懸停切換圖片特效是通過用戶鼠標(biāo)的選擇來顯示指定圖片內(nèi)容，該版塊也常用于網(wǎng)站首頁，例如商品展示、旅游景點(diǎn)介紹等。功能要求：使用jQuery實(shí)現(xiàn)鼠標(biāo)懸停手動切換展示圖片特效，如圖8-16所示。當(dāng)用戶將鼠標(biāo)懸浮于左側(cè)的文字上時文字變成紅色，并且右側(cè)圖片自動切換到對應(yīng)的畫面。8.4.2界面設(shè)計(jì)本項(xiàng)目的主要內(nèi)容分為兩個版塊：左側(cè)的列表標(biāo)簽<ul>用于顯示文字標(biāo)題，右側(cè)的<img>標(biāo)簽用于顯示圖片。創(chuàng)建一個HTML文件，文件名可自定義，例如SliderDemo.html。在HTML5中使用<divclass="sliderWrap">元素將這兩個版塊嵌套在內(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>希臘愛琴海</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>標(biāo)簽內(nèi)部將列表選項(xiàng)標(biāo)簽<li>與水平線標(biāo)簽<hr>交替使用，形成帶有水平線修飾效果的文字標(biāo)題。在<img>標(biāo)簽上設(shè)置初始顯示的圖片來源為本地image目錄下的2.jpg。本示例使用CSS外部樣式表規(guī)定頁面樣式。在本地css文件夾中創(chuàng)建slider.css文件，并在<head>首尾標(biāo)簽中聲明對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>在CSS外部樣式表中為<body>標(biāo)簽設(shè)置總體樣式，相關(guān)CSS代碼如下：1. /*整體背景樣式*/2. body{3. background-color:silver;/*背景顏色銀色*/4. text-align:center;/*文本居中*/5. }為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. }接

溫馨提示

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

評論

0/150

提交評論