1、jQuery網頁特效任務驅動式教程（微課版）-教案 任務17 DOM和jQuery （2次課）課程內容信息說明主題D0M和jQuery所屬任務任務1教學目標知識目標理解D0M樹形結構和D0M節點的類型及概念 掌握jQuery的入口函數及ready事件掌握jQuery對象與D0M對象相互轉換的方法能力目標能夠熟練應用jQuery的入口函數和ready事件完成基本的 jQuery操作，能夠熟練進行jQuery對象與D0M對象的轉 換，并完成相關對象的操作。重點jQuery的入口函數及ready事件jQuery對象與D0M對象相互轉換的方法難點jQuery對象與D0M對象的區別及相互轉換的方法教學方

2、法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間LDOM樹形結構和DOM節點的類型及概念（30分鐘）（1）文檔對象模型DOM（2）各種類型的DOM節點，著重講解元素節點、屬性節點和文本節點，通過例如獲取三種 節點的信息并在控制臺中輸出，觀察結果.jQuery概述（20分鐘）（1）簡介jQuery的功能（2）下載并使用jQuery3） jQuery的入口函數及用法.jQuery中的ready事件（30分鐘）ready事件的幾種寫法jQuery的ready與js的load比照分析.jQuery對象與DO

3、M對象的相互轉換（40分鐘）（1）兩種對象的獲取方法說明及進行相互轉換的必要性說明5.小測試（15分鐘）（1）學生完成完成在教學平臺中設計的在線測試（填空、選擇和判斷）（2）教師講解小測試課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：使用jQuery實現郵箱自動導航，并提交作業檢查作業，并將作業問 題反應給學生任務4實現級聯菜單（3次課）課程內容信息說明主題實現級聯菜單所屬任務任務4教學目標知識目標掌握使用下拉列表實現年月日級聯菜單的方法和步驟掌握使用選項卡方式實現省市區級聯菜單的方法和步驟能力目標能夠使用閉包實現不同

4、類型級聯菜單的功能重點使用下拉列表實現年月日級聯菜單JSON數據的訪問使用選項卡實現省市區級聯菜單難點JSON數據的異步處理問題省市區級聯中元素定位坐標的設計要求教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段 信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.使用下拉列表實現年月日級聯菜單（65分鐘）JS 和 jQuery 操作 select 和 option（2）年月日級聯菜單實現步驟（3）觀察、發現并解決問題：如果用戶已經選擇過年月日信息，重新點開月份下拉列表框， 選擇的是第一個選項（-請選擇月份此時點開日期列表框，看到下面有31個日

5、期列表項, 為什么會出現這種現象？要如何解決？（4）觀察、發現并解決問題：選擇一次年月日之后，不刷新頁面，重新更換月份和日期，發 現什么問題？再更換一次月份和日期？再更換一次年月日？.改變DOM樹形結構的常用方法（25分鐘）（1）創立元素（2）更換元素的內部結構（3）在元素內部插入子元素（4）在元素外部插入兄弟元素.關于JSON （40分鐘）JSON數據的各種定義和訪問形式（2）獨立存儲的JSON數據及訪問方式（3）訪問數據文件city.json.實現省市區級聯功能（120分鐘）（1）設計頁面元素并定義元素樣式（2）應用閉包實現級聯功能對每個選項卡注冊click事件為.prov中的span （

6、省份名稱）注冊click事件為.city中的span元素（地市名稱）注冊click事件為.area中的span元素（區縣名稱）注冊click事件（3）程序中的缺陷及解決方案.小測試（15分鐘）（1）學生完成完成在教學平臺中設計的在線測試（填空、選擇和判斷）（2）教師講解小測試課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動(約30分鐘)教師活動作業：檢查作業，并將作業問完善省市區級聯菜單功能，并提交作業題反應給學生任務57文本動畫和顯隱動畫(2次課)課程內容信息說明主題實現動畫效果所屬任務任務5教學目標知識目標掌握使用css()制作動畫的方法 掌握

7、顯隱動畫函數的用法能力目標能夠熟練使用css()方法實現文本動畫，使用顯隱動畫模擬文 件夾的樹形列表結構重點制作動畫的各種函數的作用和用法：css()、顯隱動畫難點使用顯隱動畫模擬文件夾的樹形列表結構教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.使用css()方法實現文本動畫效果(35分鐘)要求：頁面中有三個段落，內容任意，段落內容使用默認樣式效果，當鼠標指向段落時，將段 落背景改為黃色，文本改為紅色，鼠標離開段落時，將背景改為白色，文本改為藍色；鼠標單 擊段落時，段落字號放大為原來的L2

8、倍(1)添加頁面元素，設計css()動畫2) jQuery中hover。方法的應用0樹形動HX +C 。:8848/jQueryttMW/ff. O O任務1 jQuery基礎知識11-1 dom.html例如 1 -2 error.html例如 1-3 ready.html任務2實現級聯菜單功能城市級聯 imagesdose.pngdown.pngcity.json省市區級聯.html年月日級聯.html.使用顯隱動畫模擬文件夾的樹形列表結構(55分鐘)C O 127.0Q,1:8848/jQuery教材案例/任 。O任務1 jQuery旦礎知識 任務2實現級聯菜單功能(1

9、)設計元素結構(2)使用腳本代碼實現功能.顯示隱藏動畫函數(55分鐘)show。、hide。、toggle()(2)例如講解：有動畫效果的顯示與隱藏動畫.應用動畫的回調函數(30分鐘)觀察給定代碼的運行效果，思考問題，給出相應的解決方案課堂小結(5分鐘)對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動(約30分鐘)教師活動作業：使用循環結構在頁面中添加5個div, div的樣式要求為寬度100像 素，高度100像素，背景綠色，邊距2像素，行內塊布局，內容為 序號1、2、3、4、5,內容在水平和垂直方向都居中；動畫效果要求為：單擊第2到第5個div時，完成自身的隱藏，

10、單 擊第1個div時完成后面4個div的顯示。檢查作業，并將作業問 題反應給學生任務5-2淡入淡出和上卷下拉動畫(2次課)對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課程內容信息說明主題淡入淡出和上卷下拉動畫所屬任務任務5教學目標知識目標掌握淡入淡出動畫函數的用法 掌握上卷下拉動畫函數的用法能力目標能夠熟練使用淡入淡出動畫和上卷下拉動畫函數實現動畫效 果重點淡入淡出動畫函數 上卷下拉動畫函數難點使用上卷下拉動畫實現階梯式的動畫效果 淡入淡出函數中fadeTo。中透明度的問題教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房

11、傳屏軟件應用或騰訊會議應用課中活動及需要時間.淡入淡出動畫函數(35分鐘)4 個函數的格式和用法:fadeln() fadeOut() fadeToggle() fadeTo()(2)使用4個函數實現簡單的淡入淡出動畫，重點演示fadeTo()透明度對fadeln()和fadeOut。 透明度的影響。.上卷下拉動畫函數(55分鐘)3 個函數的格式和用法：slideDown() slideUp。、slideToggle()(2)使用上卷下拉函數實現百葉窗效果(3)使用上卷下拉函數實現折疊框動畫.階梯式的上卷下拉動畫(85分鐘)(1)階梯式上卷下拉動畫的效果演示及任務描述(2) jQuery中的隊

12、列控制方法(3)使用隊列控制方法實現階梯式的上卷下拉動畫課堂小結(5分鐘)課后活動學生活動(約30分鐘)教師活動作業：完善階梯式的上卷下拉動畫效果，改寫程序。檢查作業，并將作業問 題反應給學生任務5-3 animate ()動畫和動畫控制(1次課)課程內容信息說明主題animate ()動畫和動畫控制所屬任務任務5教學目標知識目標掌握animate。動畫方法的用法理解動畫控制方法的作用和用法能力目標能夠熟練使用animate。函數實現復雜的動畫效果重點animate。動畫函數 動畫控制方法難點使用animate。函數實現復雜的動畫效果教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、

13、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間l.animate。動畫函數（45分鐘）1） animate。函數的格式和用法（2）使用animate。函數實現返回頁面頂部的滾動動畫。.動畫控制方法（25分鐘）（1）停止動畫函數stop。的格式和用法（2）延時動畫函數delay。的用法.動畫相關小測試（15分鐘）完成任務5的所有內容相關小測試課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：復習動畫相關的所有函數。任務67索引切換輪播（1次課）課程內容信息說明主題索引切換輪播所屬任

14、務任務6教學目標知識目標掌握實現索引切換輪播的方法和思路能力目標能夠熟練完成索引切換輪播特效重點索引切換輪播的實現方法難點索引切換輪播的實現方法、定時器疊加問題及原因分析教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間L實現最簡單的索引切換輪播（35分鐘）（1）任務描述（2）定義函數實現索引切換輪播，調用函數。2.擴展索引切換輪播功能（50分鐘）（1）停止和重啟輪播功能解決定時器疊加問題帶來的影響（2）后退和前進功能（3）跟隨變化的數字索引（4）單擊數字索引進行圖片切換課堂小結（5分鐘）對學生

15、課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：完善索引切換輪播特效。任務6-2使用animate。實現無縫滾動輪播（2次課）課程內容信息說明主題使用animate。實現無縫滾動輪 播所屬任務任務6教學目標知識目標掌握實現無縫滾動輪播的方法和思路能力目標能夠熟練完成無縫滾動輪播特效重點無縫滾動輪播的實現方法難點無縫滾動輪播中無縫銜接問題的解決方案和思路 判斷動畫是否正在進行中的條件的應用教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.實現最簡

16、單的無縫滾動輪播(90分鐘)(1)任務描述(2)添加頁面元素，定義元素的樣式。(3)無縫滾動輪播的實現原理說明(4)定義函數實現無縫滾動輪播(5)無縫滾動輪播中的定時器時間設置.擴展無縫滾動輪播功能(85分鐘)(1)停止和重啟輪播功能：解決定時器疊加問題帶來的影響(2)后退和前進功能(3)添加跟隨變化的數字索引(4)前進后退功能中的動畫是否正在進行中的判斷條件的作用和應用課堂小結(5分鐘)對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動(約30分鐘)教師活動作業：完善無縫滾動輪播特效。任務6-3使用CSS3動畫實現無縫滾動輪播（1次課）課程內容信息說明主題使用CSS

17、3動畫實現無縫滾動輪 播所屬任務任務6教學目標知識目標掌握使用CSS3動畫實現無縫滾動輪播的方法和思路能力目標能夠熟練完成無縫滾動輪播特效重點使用CSS3動畫實現無縫滾動輪播的方法難點滾動條元素的樣式定義教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間1.使用CSS3動畫實現無縫滾動輪播（85分鐘）（1）任務描述（2）添加頁面元素，定義元素的樣式。（3）定義函數實現無縫滾動輪播課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求（2）將jQuery對象轉換為DOM對象

18、的方法（3）將DOM對象轉換為jQuery對象的方法.課堂小練習（40分鐘，學生完成+教師講解）（1）學生完成小練習頁面中有一組單項選擇按鈕，在選擇某個選項后判斷哪個radio按鈕被選中，然后獲取其value 屬性值并在控制臺輸出。你所屬的年齡段是：- 11 2。歲。21 3。歲O 31 4。歲41 5。歲要求：分別使用JavaScript和jQuery完成（2）教師講解小練習.小測試（15分鐘）（1）學生完成完成在教學平臺中設計的在線測試（填空、選擇和判斷）（2）教師講解小測試課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動

19、檢查學生作業，總結作 業中的問題，并反應給 學生檢查學生作業，總結作 業中的問題，并反應給 學生完成作業獲取一組列表項的文本并在控制臺輸出 要求：分別使用JavaScript和jQuery完成課后活動學生活動（約30分鐘）教師活動作業：完善無縫滾動輪播特效。任務6-4旋轉滾動輪播（1次課）課程內容信息說明主題旋轉滾動輪播所屬任務任務6教學目標知識目標掌握實現旋轉滾動滾動輪播的方法和思路能力目標能夠熟練完成旋轉滾動輪播特效重點實現旋轉滾動輪播的方法難點旋轉滾動輪播中每個圖片更換位置時的坐標設置要求教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用

20、，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.旋轉滾動滾動輪播（75分鐘）（1）任務描述及旋轉方向說明（2）添加頁面元素，定義元素的樣式。（3）定義函數實現旋轉滾動輪播（4）停止和重啟旋轉輪播.嘗試并思考問題（10分鐘）（1）假設是將css（）方法中設置z-index取值的代碼放入animate。動畫內部，效果會如何？為什 么？（2）假設是將修改z-index取值的代碼放入animate。動畫的回調函數內部，效果會如何？為什 么？課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：完善旋轉滾動輪播特效C任務77購物網站

21、中的放大鏡（2次課）課程內容信息說明主題購物網站中的放大鏡所屬任務任務7重點重點教學目標知識目標掌握放大鏡的實現原理掌握放大鏡功能的實現思路和方法能力目標能夠熟練完成購物網站中的放大鏡特效實現放大鏡功能的方法難點放大鏡特效中各種元素的布局及定位要求 移動塊的坐標計算方法教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.放大鏡的貝囿布局及樣式定義（90分鐘）（1）任務描述及效果演示（2）添加頁面元素。（3）定義頁面元素的樣式，強調各種元素的定位要求.放大鏡的實現（85分鐘）（1）放大鏡的實現原理

22、說明（2）使用腳本實現放大鏡功能（3）更換需要放大的圖片課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：完善放大鏡特效。任務7-2瀑布流圖像布局（1次課）課程內容信息說明主題瀑布流圖像布局所屬任務任務7教學目標知識目標掌握瀑布流圖像布局的實現原理掌握瀑布流圖像布局功能的實現思路和方法能力目標能夠熟練完成瀑布流圖像布局特效重點實現瀑布流圖像布局的方法難點瀑布流圖像布局中每個li元素的坐標位置計算方法教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會

23、議應用課中活動及需要時間1.瀑布流圖像布局（85分鐘）（1）任務描述及效果演示（2）添加頁面元素并定義元素樣式。（3）瀑布流的實現原理-第一行坐標的設置（4）瀑布流的實現原理-第二行坐標的設置（5）腳本功能實現課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作M完善瀑布流布局特效。任務7-3添加文件類型圖標（1次課）課程內容信息說明主題添加文件類型圖標所屬任務任務7教學目標知識目標 掌握添加文件類型圖標功能的實現思路和方法能力目標能夠熟練完成添加文件類型圖標功能重點實現判斷上傳文件的類型的方法難點FileReader對象的應用

24、教學方法與教學手段教學方法 線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段 信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.添加文件類型圖標（75分鐘）（1）任務描述及效果演示（2）添加頁面元素并定義元素樣式。（3）腳本功能實現使用數組保存文件類型和圖標文件名稱定義每個文件域元素的change事件函數（4）觀察思考并解決問題. JavaScript讀取外部文件（10分鐘）FileReader對象的事件FileReader對象的屬性課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動批改作業并向學生反

25、應 作業問題作業：頁面初始時只有一個上傳文件的文件域元素和一個空白的圖像元 素，空白的圖像元素并沒有任何顯示效果，選擇任意位置的任意圖 片上傳，讀取之后將其顯示在頁面中。任務8T應用模態框添加和修改表格數據（1.5次課）課程內容信息說明主題應用模態框添加和修改表格數m同6夕“。據所屬任務任務8教學目標知識目標理解模態框的概念和用法掌握應用模態框添加和修改表格數據的思路和方法能力目標能夠熟練應用模態框添加和修改表格數據重點應用模態框添加和修改表格數據難點表格操作中行序號的應用修改行功能中表格行號全局變量的定義及應用教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學

26、手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.應用模態框添加和修改表格數據（120分鐘）（1）任務描述及效果演示（15分鐘）（2）添加頁面元素并定義元素樣式（35分鐘）。（3）腳本功能實現（70分鐘）刪除某個行之后修改行號、刪除行功能、修改行功能（進入修改界面、完成修改）、關閉 模態框、添加行功能（4）觀察思考并解決問題.模態框的概念及應用（10分鐘）FileReader對象的事件FileReader對象的屬性課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：完善模態框應用。批改作業并向學生反應 作

27、業問題重點重點任務8-2應用模態框實現簽到和評分功能（2次課）應用模態框實現簽到和評分功能課程內容信息說明主題應用模態框實現簽到和評分功 能所屬任務任務8教學目標知識目標掌握應用應用模態框實現簽到和評分功能的思路和方法能力目標能夠熟練應用模態框實現簽到和評分功能難點難點控制簽到狀態變化的方案教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段 信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.應用模態框實現簽到和評分功能元素設計與樣式定義（90分鐘）（1）任務描述及效果演示（25分鐘）（2）添加頁面元素并定義元素樣式（65分鐘）。頁面元素-簽到

28、模態框、單一評分、批量評分模態框頁面元素-已簽到和未簽到選項卡及內容區元素樣式定義.應用模態框實現簽到和評分功能.腳本功能（85分鐘）（1）定義學生信息的數據對象（2）向選項卡內容區的表格添加學生信息（3）完成選項卡的切換功能（4）表格行序號的調整（5）完成簽到狀態的修改（6）進行單一評分和批量評分（7）模態框的關閉（8）復選框全選控制課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：完善應用模態框實現簽到和評分功能。批改作業并向學生反應 作業問題任務8-3讀取Excel數據表并進行排序操作（3次課）課程內容信息說明主題讀

29、取Excel數據表并進行排序 操作所屬任務任務8教學目標知識目標掌握讀取Excel數據表并進行排序操作的思路和方法能力目標能夠熟練應用FileReader對象讀取excel數據表，并對數據 表中的數據進行排序操作重點使用FileReader對象讀取excel數據表將數據表數據添加到頁面的表格中對頁面表格中的數據按照用戶點擊操作完成排序難點對頁面表格中的數據按照用戶點擊操作完成升序或者降序排序教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段 信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.讀取Excel數據表并進行排序操作.元素定義（45分

30、鐘）（1）任務描述及效果演示（20分鐘）（2）添加頁面元素并定義元素樣式（使用字體圖標添加升序或降序的小三角符號）（25分鐘）。.讀取excel文件并添加到表格中（90分鐘）（1）讀取excel文件，得到JSON數據形式（2）為表格添加標題行,為列標題引用類名sort,增加自定義屬性data-isasc（3）為表格添加內容行，對于非數字列，將列名記錄到數組中，為后面進行排序做準備.單擊標題列進行排序（90分鐘）進行排序時，需要使用自定義屬性data-isasc控制升序和降序。如果取值為0,那么表示要 進行升序排序，升序排序之后將該屬性取值改為1,再次對同一列進行排序時，那么進行降序排 序，排序

31、之后再將其改為0o對任意一列進行任何形式的排序時，其他列的data-isasc屬性取 值都要變成0o所以，如果每次單擊的都是不同列，那么得到的都是當前列的升序排序結果，如 果連續單擊同一列，那么會在奇數次單擊時得到升序排序的列，在偶數次單擊時得到降序排序的 列。.雙擊數據單元格修改數據（40分鐘）雙擊tbody區域中的所有單元格時，都能在單元格內部添加一個文本框，將原來的單元格 數據顯示在文本框中，修改文本框內容之后，重新將數據寫入單元格并隱藏文本框課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：完善讀取Excel數據表

32、并進行排序操作功能。批改作業并向學生反應 作業問題任務97使用數組實現隨機點名和選圖操作（1次課）課程內容信息說明主題使用數組實現隨機點名和選圖 操作所屬任務任務8教學目標知識目標掌握隨機點名功能中控制不能重復點名的思路和方法。理解隨機點名和隨機選圖功能中禁用和啟用按鈕的重要作 用。能力目標能夠熟練使用數組進行隨機操作完成指定的功能重點使用數組實現隨機點名操作 使用數組實現隨機選圖功能難點隨機點名功能中控制不能重復點名的思路和方法教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間任務1-2 JQ

33、uery選擇器及元素的查找方法(2次課)課程內容信息說明主題jQueiry選擇器及元素的查找方由國/丁夕/廠,法所屬任務任務1教學目標知識目標掌握基本選擇器、層級選擇器的作用和用法 掌握偽類選擇器的用法掌握各種查找方法的作用和用法能力目標能夠熟練應用jQuery的選擇器選擇需要的jQuery對象；能 夠熟練應用查找方法根據指定的元素查找到另外的元素。重點基本選擇器、層級選擇器的作用和用法 偽類選擇器的用法各種查找方法的作用和用法難點偽類選擇器中的:first-child和:first的用法教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房

34、傳屏軟件應用或騰訊會議應用課中活動及需要時間LjQuery的基本選擇器(20分鐘)1) ID選擇器(2)類選擇器(3)標記名選擇器(4)組選擇器.jQue叮的層級選擇器(30分鐘)(1)包含選擇器(2)子對象選擇器(3)相鄰選擇器(4)兄弟選擇器.jQuei7中的偽類選擇器和過濾器(40分鐘)(1)偽類選擇器frst, :first-child, :nth-child, :even, :odd, :not, :eq()(2)過濾器eq().jQueiy中的查找操作(70分鐘)(1)向下查找后代元素.實現隨機點名功能（45分鐘）（1）定義數組（2）完成隨機點名功能，解決重復點名問題（3）增加啟動

35、和停止隨機點名功能的按鈕，對按鈕的重復啟用功能加以限制.實現隨機選圖并放大的功能（40分鐘）（1）元素設計及樣式定義（2）使用腳本實現按鈕的啟用、禁用，選圖，放大等功能課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：完善隨機點名操作功能。批改作業并向學生反應 作業問題任務9-2制作百度新聞頁面滑塊和隨機文本（1次課）教學方法與教學手段課程內容信息說明主題制作百度新聞頁面滑塊和隨機由百日及皿”文本所屬任務任務8教學目標知識目標掌握百度新聞頁面中滑塊動畫的設計思路。 掌握頁面中文字動畫的實現方法。能力目標能夠熟練使用數組制作

36、百度新聞頁面中的滑塊動畫和文字動 畫重點百度新聞頁面中滑塊動畫的設計思路。 頁面中文字動畫的實現方法。難點百度新聞頁面中滑塊動畫的設計思路。 頁面中文字動畫的實現方法。教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段 信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.百度新聞頁面中滑塊動畫（45分鐘）（1）元素設計及樣式定義（2）腳本功能實現計算每個li的左上角頂點橫坐標并保存到數組中對每個li設置鼠標指針指向和離開時的滑塊動畫.頁面中文字動畫的實現（40分鐘）（1）使用數組存放要出現動畫的文字詞組（社會主義核心價值觀）（2）當鼠標單擊頁面中任何一個位置，按

37、照順序出現一個詞語的動畫效果課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：完善動畫功能。批改作業并向學生反應 作業問題（2）向上查找祖先元素（3）查找兄弟元素（4）應用查找方法5.小測試（15分鐘）（1）學生完成完成在教學平臺中設計的在線測試（填空、選擇和判斷）（2）教師講解小測試課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動復習任務1-3 jQuery操作DOM元素的幾個基本方法（2次課）課程內容信息說明ZT3iQueiy操作DOM元素的幾個基能山

38、一攵三 夕主題*汪所屬任務任務1本萬法教學目標知識目標掌握attr（）和prop（）方法掌握each。方法掌握獲取元素索引的不同方法及區別 掌握為元素添加和移除類的操作方法能力目標能夠熟練使用jQuery的各種方法操作DOM元素。重點attr（） prop。和 each。方法遍歷中的index。方法和遍歷函數參數中的index作用的不同之處難點遍歷中的index。方法和遍歷函數參數中的index作用的不同之處教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段 信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中活動及需要時間.復習鞏固-選擇和查找方法的應用-學

39、生思考并講解(45分鐘)要選擇body中的第3個段落，如何操作？要得到body中第3個段落的下一個元素，如何操作？$(”span).parent()獲取的元素有幾個？$(切211)心31$()獲取的元素有幾個?代碼$(p”).parent()獲取的元素有幾個？代碼$(”p).parent(div)獲取的元素有幾個?要根據div2-2-l找至lJdiv2-2-2,有哪幾種查找路徑？要根據div2-2-l找到div2-l,有哪幾種查找路徑？要根據div2-2-l找至divl,有哪幾種查找路徑？.attr()和prop。方法(45分鐘)(1)兩個方法在獲取和設置元素屬性值中的應用格式(2)兩個方法在

40、獲取和設置布爾類型屬性取值中的差異及選擇.jQuery中的each。方法(60分鐘)(1) each。函數的作用、格式及用法(2)元素的index問題4.為元素添加和移除類(10分鐘)addClass()removeClass()5.小測試(15分鐘)(1)學生完成完成在教學平臺中設計的在線測試(填空、選擇和判斷)(2)教師講解小測試課堂小結(5分鐘)對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動(約30分鐘)教師活動作業：頁面中有4個img元素，文件夾中有4幅圖，分別是imgl.jpgimg4.jpg,為4個img元素設置其src屬性的取值分別是檢查作業，并將作

41、業問 題反應給學生這4個文件任務1-4 JQuery中的事件機制(2次課)課程內容信息說明主題jQuery中的事件機制所屬任務任務1教學目標知識目標掌握使用on()方法、事件的快捷方法和one()方法為元素注冊事件的做法掌握使用off()方法為元素注銷事件的做法能力目標能夠根據元素的具體情況和要求使用相應的方法為元素注冊 事件或者注銷事件。重點注冊事件和注銷事件的方法on()、one()、off()和事件的快捷方法難點為動態生成的元素注冊事件或者注銷事件的做法教學方法與教學手段教學方法線上線下結合、工程驅動、啟發引導、問題導向、案例演示教學手段信息化手段應用，機房傳屏軟件應用或騰訊會議應用課中

42、活動及需要時間L注冊事件(55分鐘)(1)使用on()方法為元素自身或者后代元素注冊一個或多個事件(2)使用事件的快捷方法為元素自身注冊事件(3) one()方法與on()方法的區別.注銷事件(35分鐘)(1)使用。ff()方法為元素自身注銷事件(2)使用。ff()方法為后代元素注銷事件(3)使用off()方法的考前須知.應用事件和查找及選擇方法為div設置陰影(70分鐘)(1)設置div陰影的功能實現思路說明（2）定義頁面元素及相關樣式（3）定義jQuery代碼為指定div設置陰影效果4.小測試（15分鐘）（1）學生完成完成在教學平臺中設計的在線測試（填空、選擇和判斷）（2）教師講解小測試課堂小結（5分鐘）對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求課后活動學生活動（約30分鐘）教師活動作業：