Web 前端開發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目十一　 jQuery 操作方法及應(yīng)用

jQuery操作方法及應(yīng)用Web前端開發(fā)技術(shù)篇4：jQuery技術(shù)

本項(xiàng)目介紹jQuery操作元素對象信息、事件概述、操作文檔結(jié)構(gòu)、特效的方法及應(yīng)用。通過學(xué)習(xí)jQuery的相關(guān)知識(shí)和實(shí)際操作,引導(dǎo)學(xué)生理解理論知識(shí)并運(yùn)用于實(shí)踐,領(lǐng)會(huì)理論與實(shí)踐相結(jié)合的思想。黨的二十大報(bào)告提出“堅(jiān)持學(xué)思用貫通、知信行統(tǒng)一”。學(xué)生要在學(xué)原文、知原義、悟原理上下功夫、見實(shí)效,做到知其言更知其義、知其然更知其所以然,圍繞黨的二十大提出的一系列具有開創(chuàng)性、標(biāo)志性的重要思想、重要觀點(diǎn)、重大戰(zhàn)略、重大舉措,找準(zhǔn)和抓實(shí)學(xué)思用貫通、知信行統(tǒng)一的著力點(diǎn)。序言目錄CONTENTS元素對象信息事件概述操作文檔結(jié)構(gòu)0102030405jQuery特效方法鏈接01元素對象信息Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.獲取元素對象信息獲取元素對象信息包括獲取元素的文本內(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所示。元素對象信息設(shè)置元素對象信息用css()方法設(shè)置元素的屬性時(shí),可以批量設(shè)置,即對選擇的元素對象同時(shí)進(jìn)行多個(gè)屬性設(shè)置。批量設(shè)置屬性的基本語法格式如下。$("元素").css({屬性:"屬性值",屬性:"屬性值"……});其中,屬性名稱不需要加雙引號(hào),屬性值要加雙引號(hào)。另外,屬性名稱中不能有“-”,還要改為“駝峰標(biāo)記法”格式,即第一個(gè)單詞小寫,后面單詞的首字母大寫。例如,CSS中背景顏色屬性“background-color”要改為“backgroundColor”。元素對象信息02事件概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.事件概述事件是一些可以通過腳本響應(yīng)的頁面動(dòng)作。當(dāng)用戶按下鼠標(biāo)鍵或提交一個(gè)表單,或者在頁面上移動(dòng)鼠標(biāo)指針時(shí),都會(huì)產(chǎn)生相關(guān)的事件。事件處理是一段JavaScript代碼,總是與頁面中的特定部分以及一定的事件相關(guān)聯(lián)。當(dāng)與頁面特定部分關(guān)聯(lián)的事件發(fā)生時(shí),事件處理器就會(huì)被調(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ā)生用戶交互動(dòng)作時(shí)觸發(fā)的事件。常用的表單事件及說明如表11-5所示。事件概述03操作文檔結(jié)構(gòu)Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.操作文檔結(jié)構(gòu)jQuery可以在網(wǎng)頁文檔中添加、刪除元素和內(nèi)容。操作文檔結(jié)構(gòu)的常用方法及說明如表11-6所示。操作文檔結(jié)構(gòu)04jQuery特效Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.隱藏和顯示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ù));jQuery特效淡入和淡出1.淡入方法fadeIn()fadeIn()方法用于修改指定元素的透明度,直至元素完全顯現(xiàn),其基本語法格式如下。$("元素").fadeIn(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));fadeIn()方法的參數(shù)都是可選參數(shù)。2.淡出方法fadeOut()fadeOut()方法用于修改指定元素的透明度,直至元素完全隱藏,其基本語法格式如下。$("元素").fadeOut(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));fadeOut()方法的參數(shù)都是可選參數(shù)。jQuery特效淡入和淡出3.淡入淡出切換方法fadeToggle()fadeToggle()方法用于修改指定元素的透明度,實(shí)現(xiàn)隱藏的元素淡入顯示或可見的元素淡出隱藏,其基本語法格式如下。$("元素").fadeToggle(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));fadeToggle()方法的參數(shù)都是可選參數(shù)。4.透明度變化方法fadeTo()fadeTo()方法用于修改指定元素的透明度,變化到指定的透明度,其基本語法格式如下。$("元素").fadeTo(持續(xù)時(shí)間,透明度,完成后執(zhí)行的函數(shù));jQuery特效滑動(dòng)1.向下滑動(dòng)方法slideDown()slideDown()方法用于設(shè)置元素從上往下滑動(dòng)顯示,其基本語法格式如下。$("元素").slideDown(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));slideDown()方法的參數(shù)都是可選參數(shù)。2.向上滑動(dòng)方法slideUp()slideUp()方法用于設(shè)置元素從下往上滑動(dòng)隱藏,其基本語法格式如下。$("元素").slideUp(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));slideUp()方法的參數(shù)都是可選參數(shù)。jQuery特效滑動(dòng)3.上下滑動(dòng)切換方法slideToggle()slideToggle()方法用于設(shè)置元素不可見時(shí)從上往下滑動(dòng)顯示,元素可見時(shí)從下往上滑動(dòng)隱藏,其基本語法格式如下。$("元素").slideToggle(持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));slideToggle()方法的參數(shù)都是可選參數(shù)。jQuery特效動(dòng)畫1.動(dòng)畫方法animate()animate()方法通過指定元素結(jié)束時(shí)的CSS屬性值,自動(dòng)實(shí)現(xiàn)從初始屬性值到結(jié)束屬性值變化的動(dòng)畫效果,其基本語法格式如下。$("元素").animate({屬性:"屬性值"},持續(xù)時(shí)間,完成后執(zhí)行的函數(shù));屬性和屬性值是必填參數(shù),持續(xù)時(shí)間和完成后執(zhí)行的函數(shù)是可選參數(shù)。允許設(shè)置多個(gè)屬性和屬性值,用逗號(hào)分隔。屬性名稱中有“-”的,需要改為“駝峰標(biāo)記法”的格式。animate()方法可以實(shí)現(xiàn)絕大部分CSS屬性變化的動(dòng)畫效果,如寬度、高度、透明度、位置等。

在設(shè)置位置變化的動(dòng)畫時(shí),元素的position屬性值必須設(shè)定為absolute、relative或fixed才有效。jQuery函數(shù)庫中沒有顏色變化的動(dòng)畫效果,如果要實(shí)現(xiàn)顏色變化的動(dòng)畫效果,則需要下載相關(guān)的插件。jQuery特效動(dòng)畫屬性值可以是確定值,也可以是相對值,用“+=”或“-=”相對于當(dāng)前值計(jì)算得到。同一個(gè)animate()方法的多個(gè)屬性變化動(dòng)畫可以同時(shí)發(fā)生,而多個(gè)連續(xù)的animate()方法只能依次執(zhí)行。2.停止動(dòng)畫方法stop()stop()方法用于停止指定元素進(jìn)行中的或后續(xù)的animate()動(dòng)畫操作,其基本語法格式如下。$("元素").stop(是否停止后續(xù)所有動(dòng)畫,是否完成當(dāng)前動(dòng)畫);是否停止后續(xù)所有動(dòng)畫和是否完成當(dāng)前動(dòng)畫兩個(gè)參數(shù)都是可選參數(shù),默認(rèn)值是false。jQuery特效05方法鏈接Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.方法鏈接對同一元素依次執(zhí)行多種操作時(shí),可以使用方法鏈接,只需要選擇一次元素,然后依次將新動(dòng)作追加到上一動(dòng)作后面即可,其基本語法格式如下。$("元素").方法1().方法2().方法3()……;或者$("元素").方法1().方法2().方法3()……;方法鏈接實(shí)訓(xùn)工單問答題：(5)當(dāng)鼠標(biāo)指針進(jìn)入HTML元素時(shí)執(zhí)行的函數(shù)是什么?(6)jQuery中有哪些方法可以遍歷節(jié)點(diǎn)?(7)$(this)和this關(guān)鍵字在jQuery中有何不同?操作題(1)用JavaScript和jQuery設(shè)計(jì)網(wǎng)頁,實(shí)現(xiàn)多張圖像自動(dòng)或