jQuery操作方法及應用Web前端開發技術篇4：jQuery技術

本項目介紹jQuery操作元素對象信息、事件概述、操作文檔結構、特效的方法及應用。通過學習jQuery的相關知識和實際操作,引導學生理解理論知識并運用于實踐,領會理論與實踐相結合的思想。黨的二十大報告提出“堅持學思用貫通、知信行統一”。學生要在學原文、知原義、悟原理上下功夫、見實效,做到知其言更知其義、知其然更知其所以然,圍繞黨的二十大提出的一系列具有開創性、標志性的重要思想、重要觀點、重大戰略、重大舉措,找準和抓實學思用貫通、知信行統一的著力點。序言目錄CONTENTS元素對象信息事件概述操作文檔結構0102030405jQuery特效方法鏈接01元素對象信息Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.獲取元素對象信息獲取元素對象信息包括獲取元素的文本內容、HTML標記內容、表單值、屬性值、樣式值等。獲取元素對象信息的方法及說明如表11-1所示。元素對象信息獲取元素對象信息獲取元素對象信息包括獲取元素的文本內容、HTML標記內容、表單值、屬性值、樣式值等。獲取元素對象信息的方法及說明如表11-1所示。元素對象信息設置元素對象信息設置元素對象信息包括設置元素的文本內容、HTML標記內容、屬性值、樣式值等。設置元素對象信息的方法及說明如表11-2所示。元素對象信息設置元素對象信息用css()方法設置元素的屬性時,可以批量設置,即對選擇的元素對象同時進行多個屬性設置。批量設置屬性的基本語法格式如下。$("元素").css({屬性:"屬性值",屬性:"屬性值"……});其中,屬性名稱不需要加雙引號,屬性值要加雙引號。另外,屬性名稱中不能有“-”,還要改為“駝峰標記法”格式,即第一個單詞小寫,后面單詞的首字母大寫。例如,CSS中背景顏色屬性“background-color”要改為“backgroundColor”。元素對象信息02事件概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.事件概述事件是一些可以通過腳本響應的頁面動作。當用戶按下鼠標鍵或提交一個表單,或者在頁面上移動鼠標指針時,都會產生相關的事件。事件處理是一段JavaScript代碼,總是與頁面中的特定部分以及一定的事件相關聯。當與頁面特定部分關聯的事件發生時,事件處理器就會被調用。絕大多數事件的命名是描述性的,很容易理解,如Click、Submit、MouseOver等,通過名稱即可猜測其含義。但也有少數事件的名稱不易理解,如blur(英文的字面意思為“模糊”),表示一個域或者一個表單失去焦點。通常,事件處理器的命名原則是,在事件名稱前加上前綴on。例如,對于click事件,處理器名為onClick。事件概述事件概述jQuery事件的基本語法格式如下。$("元素").事件名稱(function(){事件處理代碼;});在jQuery事件中,選中的元素對象觸發了事件,如果事件代碼中需要對這些元素對象進行處理,則可以再次選中這些元素對象,也可以用this關鍵字引用當前選中的元素對象。事件概述鍵盤事件鍵盤事件是對文檔對象document或對獲得焦點的指定元素,設置在按下或釋放鍵盤按鍵時觸發的處理過程。常用的鍵盤事件及說明如表11-3所示。事件概述件采購匯總表事件概述鼠標事件鼠標事件是為網頁文檔中的任意HTML元素對象設置在鼠標操作時觸發的處理過程。常用的鼠標事件及說明如表11-4所示。表單事件表單事件是表單元素發生用戶交互動作時觸發的事件。常用的表單事件及說明如表11-5所示。事件概述03操作文檔結構Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.操作文檔結構jQuery可以在網頁文檔中添加、刪除元素和內容。操作文檔結構的常用方法及說明如表11-6所示。操作文檔結構04jQuery特效Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.隱藏和顯示1.隱藏元素方法hide()hide()方法用于隱藏指定元素,其基本語法格式如下。$("元素").hide(持續時間,完成后執行的函數);hide()方法的參數都是可選參數,持續時間可以是關鍵字fast或slow,也可以是具體的時間值(以毫秒為單位)。fast是200毫秒,slow是600毫秒。若未設置時間,則默認是400毫秒。2.顯示元素方法show()show()方法用于顯示指定元素,其基本語法格式如下。$("元素").show(持續時間,完成后執行的函數);3.切換顯示或隱藏元素方法toggle()toggle()方法用于隱藏已顯示的元素或顯示已隱藏的元素,其基本語法格式如下。$("元素").toggle(持續時間,完成后執行的函數);jQuery特效淡入和淡出1.淡入方法fadeIn()fadeIn()方法用于修改指定元素的透明度,直至元素完全顯現,其基本語法格式如下。$("元素").fadeIn(持續時間,完成后執行的函數);fadeIn()方法的參數都是可選參數。2.淡出方法fadeOut()fadeOut()方法用于修改指定元素的透明度,直至元素完全隱藏,其基本語法格式如下。$("元素").fadeOut(持續時間,完成后執行的函數);fadeOut()方法的參數都是可選參數。jQuery特效淡入和淡出3.淡入淡出切換方法fadeToggle()fadeToggle()方法用于修改指定元素的透明度,實現隱藏的元素淡入顯示或可見的元素淡出隱藏,其基本語法格式如下。$("元素").fadeToggle(持續時間,完成后執行的函數);fadeToggle()方法的參數都是可選參數。4.透明度變化方法fadeTo()fadeTo()方法用于修改指定元素的透明度,變化到指定的透明度,其基本語法格式如下。$("元素").fadeTo(持續時間,透明度,完成后執行的函數);jQuery特效滑動1.向下滑動方法slideDown()slideDown()方法用于設置元素從上往下滑動顯示,其基本語法格式如下。$("元素").slideDown(持續時間,完成后執行的函數);slideDown()方法的參數都是可選參數。2.向上滑動方法slideUp()slideUp()方法用于設置元素從下往上滑動隱藏,其基本語法格式如下。$("元素").slideUp(持續時間,完成后執行的函數);slideUp()方法的參數都是可選參數。jQuery特效滑動3.上下滑動切換方法slideToggle()slideToggle()方法用于設置元素不可見時從上往下滑動顯示,元素可見時從下往上滑動隱藏,其基本語法格式如下。$("元素").slideToggle(持續時間,完成后執行的函數);slideToggle()方法的參數都是可選參數。jQuery特效動畫1.動畫方法animate()animate()方法通過指定元素結束時的CSS屬性值,自動實現從初始屬性值到結束屬性值變化的動畫效果,其基本語法格式如下。$("元素").animate({屬性:"屬性值"},持續時間,完成后執行的函數);屬性和屬性值是必填參數,持續時間和完成后執行的函數是可選參數。允許設置多個屬性和屬性值,用逗號分隔。屬性名稱中有“-”的,需要改為“駝峰標記法”的格式。animate()方法可以實現絕大部分CSS屬性變化的動畫效果,如寬度、高度、透明度、位置等。

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