jQuery網(wǎng)頁特效任務(wù)驅(qū)動式教程（微課版）-教案全套 任務(wù)1.1-9.2 DOM和jQuery - 制作百度新聞頁面滑塊和隨機文本

1、jQuery網(wǎng)頁特效任務(wù)驅(qū)動式教程（微課版）-教案 任務(wù)17 DOM和jQuery （2次課）課程內(nèi)容信息說明主題D0M和jQuery所屬任務(wù)任務(wù)1教學(xué)目標(biāo)知識目標(biāo)理解D0M樹形結(jié)構(gòu)和D0M節(jié)點的類型及概念 掌握jQuery的入口函數(shù)及ready事件掌握jQuery對象與D0M對象相互轉(zhuǎn)換的方法能力目標(biāo)能夠熟練應(yīng)用jQuery的入口函數(shù)和ready事件完成基本的 jQuery操作，能夠熟練進行jQuery對象與D0M對象的轉(zhuǎn) 換，并完成相關(guān)對象的操作。重點jQuery的入口函數(shù)及ready事件jQuery對象與D0M對象相互轉(zhuǎn)換的方法難點jQuery對象與D0M對象的區(qū)別及相互轉(zhuǎn)換的方法教學(xué)方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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