Web 前端開發(fā)技術(shù) 教案 項(xiàng)目十一 jQuery 操作方法及應(yīng)用

Web前端開發(fā)技術(shù)教案設(shè)計(jì)項(xiàng)目課題jQuery操作方法及應(yīng)用授課時(shí)間授課對象大學(xué)生學(xué)習(xí)目標(biāo)1.掌握jQuery操作元素對象信息的方法及應(yīng)用。2.掌握jQuery特效的方法及應(yīng)用。學(xué)習(xí)重點(diǎn)掌握jQuery操作元素對象信息的方法及應(yīng)用。學(xué)習(xí)難點(diǎn)掌握jQuery特效的方法及應(yīng)用。教學(xué)方法講授法、課堂演示法教學(xué)用具多媒體課件教學(xué)流程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容教學(xué)過程任務(wù)一元素對象信息一、獲取元素對象信息獲取元素對象信息包括獲取元素的文本內(nèi)容、HTML標(biāo)記內(nèi)容、表單值、屬性值、樣式值等。獲取元素對象信息的方法及說明如表11-1所示。獲取元素對象信息包括獲取元素的文本內(nèi)容、HTML標(biāo)記內(nèi)容、表單值、屬性值、樣式值等。獲取元素對象信息的方法及說明如表11-1所示。二、設(shè)置元素對象信息設(shè)置元素對象信息包括設(shè)置元素的文本內(nèi)容、HTML標(biāo)記內(nèi)容、屬性值、樣式值等。設(shè)置元素對象信息的方法及說明如表11-2所示。用css()方法設(shè)置元素的屬性時(shí),可以批量設(shè)置,即對選擇的元素對象同時(shí)進(jìn)行多個(gè)屬性設(shè)置。批量設(shè)置屬性的基本語法格式如下。$("元素").css({屬性:"屬性值",屬性:"屬性值"……});其中,屬性名稱不需要加雙引號,屬性值要加雙引號。另外,屬性名稱中不能有“-”,還要改為“駝峰標(biāo)記法”格式,即第一個(gè)單詞小寫,后面單詞的首字母大寫。例如,CSS中背景顏色屬性“background-color”要改為“backgroundColor”。任務(wù)二事件概述事件是一些可以通過腳本響應(yīng)的頁面動作。當(dāng)用戶按下鼠標(biāo)鍵或提交一個(gè)表單,或者在頁面上移動鼠標(biāo)指針時(shí),都會產(chǎn)生相關(guān)的事件。事件處理是一段JavaScript代碼,總是與頁面中的特定部分以及一定的事件相關(guān)聯(lián)。當(dāng)與頁面特定部分關(guān)聯(lián)的事件發(fā)生時(shí),事件處理器就會被調(diào)用。絕大多數(shù)事件的命名是描述性的,很容易理解,如Click、Submit、MouseOver等,通過名稱即可猜測其含義。但也有少數(shù)事件的名稱不易理解,如blur(英文的字面意思為“模糊”),表示一個(gè)域或者一個(gè)表單失去焦點(diǎn)。通常,事件處理器的命名原則是,在事件名稱前加上前綴on。例如,對于click事件,處理器名為onClick。jQuery事件的基本語法格式如下。$("元素").事件名稱(function(){事件處理代碼;});在jQuery事件中,選中的元素對象觸發(fā)了事件,如果事件代碼中需要對這些元素對象進(jìn)行處理,則可以再次選中這些元素對象,也可以用this關(guān)鍵字引用當(dāng)前選中的元素對象。一、鍵盤事件鍵盤事件是對文檔對象document或?qū)Λ@得焦點(diǎn)的指定元素,設(shè)置在按下或釋放鍵盤按鍵時(shí)觸發(fā)的處理過程。常用的鍵盤事件及說明如表11-3所示。二、鼠標(biāo)事件鼠標(biāo)事件是為網(wǎng)頁文檔中的任意HTML元素對象設(shè)置在鼠標(biāo)操作時(shí)觸發(fā)的處理過程。常用的鼠標(biāo)事件及說明如表11-4所示。三、表單事件表單事件是表單元素發(fā)生用戶交互動作時(shí)觸發(fā)的事件。常用的表單事件及說明如表11-5所示。任務(wù)三操作文檔結(jié)構(gòu)jQuery可以在網(wǎng)頁文檔中添加、刪除元素和內(nèi)容。操作文檔結(jié)構(gòu)的常用方法及說明如表11-6所示。任務(wù)四jQuery特效一、隱藏和顯示1.隱藏元素方法hide()hide()方法用于隱藏指定元素,其基本語法格式如下。$("元素").hide(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));hide()方法的參數(shù)都是可選參數(shù),持續(xù)時(shí)間可以是關(guān)鍵字fast或slow,也可以是具體的時(shí)間值(以毫秒為單位)。fast是200毫秒,slow是600毫秒。若未設(shè)置時(shí)間,則默認(rèn)是400毫秒。2.顯示元素方法show()show()方法用于顯示指定元素,其基本語法格式如下。$("元素").show(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));3.切換顯示或隱藏元素方法toggle()toggle()方法用于隱藏已顯示的元素或顯示已隱藏的元素,其基本語法格式如下。$("元素").toggle(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));二、淡入和淡出1.淡入方法fadeIn()fadeIn()方法用于修改指定元素的透明度,直至元素完全顯現(xiàn),其基本語法格式如下。$("元素").fadeIn(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));fadeIn()方法的參數(shù)都是可選參數(shù)。2.淡出方法fadeOut()fadeOut()方法用于修改指定元素的透明度,直至元素完全隱藏,其基本語法格式如下。$("元素").fadeOut(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));fadeOut()方法的參數(shù)都是可選參數(shù)。3.淡入淡出切換方法fadeToggle()fadeToggle()方法用于修改指定元素的透明度,實(shí)現(xiàn)隱藏的元素淡入顯示或可見的元素淡出隱藏,其基本語法格式如下。$("元素").fadeToggle(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));fadeToggle()方法的參數(shù)都是可選參數(shù)。4.透明度變化方法fadeTo()fadeTo()方法用于修改指定元素的透明度,變化到指定的透明度,其基本語法格式如下。$("元素").fadeTo(持續(xù)時(shí)間,透明度,完成后執(zhí)行的函數(shù));三、滑動1.向下滑動方法slideDown()slideDown()方法用于設(shè)置元素從上往下滑動顯示,其基本語法格式如下。$("元素").slideDown(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));slideDown()方法的參數(shù)都是可選參數(shù)。2.向上滑動方法slideUp()slideUp()方法用于設(shè)置元素從下往上滑動隱藏,其基本語法格式如下。$("元素").slideUp(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));slideUp()方法的參數(shù)都是可選參數(shù)。3.上下滑動切換方法slideToggle()slideToggle()方法用于設(shè)置元素不可見時(shí)從上往下滑動顯示,元素可見時(shí)從下往上滑動隱藏,其基本語法格式如下。$("元素").slideToggle(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));slideToggle()方法的參數(shù)都是可選參數(shù)。四、動畫1.動畫方法animate()animate()方法通過指定元素結(jié)束時(shí)的CSS屬性值,自動實(shí)現(xiàn)從初始屬性值到結(jié)束屬性值變化的動畫效果,其基本語法格式如下。$("元素").animate({屬性:"屬性值"},持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));屬性和屬性值是必填參數(shù),持續(xù)時(shí)間和完成后執(zhí)行的函數(shù)是可選參數(shù)。允許設(shè)置多個(gè)屬性和屬性值,用逗號分隔。屬性名稱中有“-”的,需要改為“駝峰標(biāo)記法”的格式。animate()方法可以實(shí)現(xiàn)絕大部分CSS屬性變化的動畫效果,如寬度、高度、透明度、位置等。在設(shè)置位置變化的動畫時(shí),元素的position屬性值必須設(shè)定為absolute、relative或fixed才有效。jQuery函數(shù)庫中沒有顏色變化的動畫效果,如果要實(shí)現(xiàn)顏色變化的動畫效果,則需要下載相關(guān)的插件。屬性值可以是確定值,也可以是相對值,用“+=”或“-=”相對于當(dāng)前值計(jì)算得到。同一個(gè)animate()方法的多個(gè)屬性變化動畫可以同時(shí)發(fā)生,而多個(gè)連續(xù)的animate()方法只能依次執(zhí)行。2.停止動畫方法stop()stop()方法用于停止指定元素進(jìn)行中的或后續(xù)的animate()動畫操作,其基本語法格式如下。$("元素").stop(是否停止后續(xù)所有動畫,是否完成當(dāng)前動畫);是否停止后續(xù)所有動畫和是否完成當(dāng)前動畫兩個(gè)參數(shù)都是可選參數(shù),默認(rèn)值是false。任務(wù)五方法鏈接對同一元素依次執(zhí)行多種操作時(shí),可以使用方法鏈接,只需要選擇一次元素,然后依次將新動作追加到上一動作后面即可,其基本語法格式如下。$("元素").方法1().方法2().方法3()……;或者$("元素").方法1().方法2().方法3()……;作業(yè)布置一、問答題(1)jQuery獲取元素文本內(nèi)容的方法有哪些?(2)jQuery設(shè)置元素寬度和高度的方法有哪些?(3)jQuery在文檔中增加文本和增加元素的區(qū)別是什么?(4)哪個(gè)jQuery函數(shù)用于在文檔結(jié)束加載之前阻止代碼運(yùn)行?(5)當(dāng)鼠標(biāo)指針進(jìn)入H