jQuery網(wǎng)頁特效任務(wù)驅(qū)動式教程（微課版）教學教案

任務(wù)17DOM和jQuery（2次課）

課程內(nèi)容信息說明

主題DOM和jQuery所屬任務(wù)任務(wù)1

教學目標

理解D0M樹形結(jié)構(gòu)和DOM節(jié)點的類型及概念

知識目標掌握jQuery的入口函數(shù)及ready事件

掌握jQuery對象與DOM對象相互轉(zhuǎn)換的方法

能夠熟練應(yīng)用jQuery的入口函數(shù)和ready事件完成基本的

能力目標jQuery操作，能夠熟練進行jQuery對象與DOM對象的轉(zhuǎn)

換，并完成相關(guān)對象的操作。

jQuery的入口函數(shù)及ready事件

重點

jQuery對象與DOM對象相互轉(zhuǎn)換的方法

難點jQueiy對象與DOM對象的區(qū)別及相互轉(zhuǎn)換的方法

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.DOM樹形結(jié)構(gòu)和DOM節(jié)點的類型及概念（30分鐘）

（1）文檔對象模型DOM

（2）各種類型的DOM節(jié)點，著重講解元素節(jié)點、屬性節(jié)點和文本節(jié)點，通過示例獲取三種

節(jié)點的信息并在控制臺中輸出，觀察結(jié)果

2.jQuery概述（20分鐘）

（1）簡介jQuery的功能

（2）下載并使用jQuery

（3）jQuery的入口函數(shù)及用法

3JQuery中的ready事件（30分鐘）

（1）ready事件的幾種寫法

（2）jQuery的ready與js的load對比分析

4.jQuery對象與DOM對象的相互轉(zhuǎn)換（40分鐘）

（1）兩種對象的獲取方法說明及進行相互轉(zhuǎn)換的必要性說明

（2）將jQuery對象轉(zhuǎn)換為DOM對象的方法

（3）將DOM對象轉(zhuǎn)換為jQuery對象的方法

5.課堂小練習（40分鐘，學生完成+教師講解）

（1）學生完成小練習

頁面中有一組單選按鈕，在選擇某個選項后判斷哪個radio按鈕被選中，然后獲取其value

屬性值并在控制臺輸出。

你所屬的年齡段是：-11~2。歲。21~3。歲。31~4。歲G41~5。歲

提交

要求：分別使用JavaScript和jQuery完成

（2）教師講解小練習

6.小測試（15分鐘）

（1）學生完成完成在教學平臺中設(shè)計的在線測試（填空、選擇和判斷）

（2）教師講解小測試

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

完成作業(yè)檢查學生作業(yè)，總結(jié)作

獲取一組列表項的文本并在控制臺輸出業(yè)中的問題，并反饋給

要求：分別使用JavaScript和jQuery完成學生

任務(wù)1-2jQuery選擇器及元素的查找方法(2次課)

課程內(nèi)容信息說明

jQuer選擇器及元素的查找方

主題所屬任務(wù)任務(wù)1

法

教學目標

掌握基本選擇器、層級選擇器的作用和用法

知識目標掌握偽類選擇器的用法

掌握各種查找方法的作用和用法

能夠熟練應(yīng)用jQuery的選擇器選擇需要的jQuery對象；能

能力目標

夠熟練應(yīng)用查找方法根據(jù)指定的元素查找到另外的元素。

基本選擇器、層級選擇器的作用和用法

重點偽類選擇器的用法

各種查找方法的作用和用法

難點偽類選擇器中的:first-child和:first的用法

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

l.jQuery的基本選擇器(20分鐘)

(1)ID選擇器

(2)類選擇器

(3)標記名選擇器

(4)組選擇器

2.jQuery的層級選擇器(30分鐘)

(1)包含選擇器

(2)子對象選擇器

(3)相鄰選擇器

(4)兄弟選擇器

3.jQuei7中的偽類選擇器和過濾器(40分鐘)

(1)偽類選擇器:first,:firsl-child,:nlh-child,:even,:odd,mot,:eq()

(2)過濾器cq()

4.jQuery中的查找操作(70分鐘)

(1)向下查找后代元素

（2）向上查找祖先元素

（3）查找兄弟元素

（4）應(yīng)用查找方法

5.小測試（15分鐘）

（1）學生完成完成在教學平臺中設(shè)計的在線測試（填空、選擇和判斷）

（2）教師講解小測試

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

復習

任務(wù)1-3jQuery操作DOM元素的幾個基本方法(2次課)

課程內(nèi)容信息說明

jQuery操作D0M元素的幾個基

主題所屬任務(wù)任務(wù)1

本方法

教學目標

掌握altr()和prop。力法

掌握each。方法

知識目標

掌握獲取元素索引的不同方法及區(qū)別

掌握為元素添加和移除類的操作方法

能力目標能夠熟練使用jQuery的各種方法操作D0M元素。

attr()>prop。和each()方法

重點

遍歷中的index。方法和遍歷函數(shù)參數(shù)中的index作用的不同之處

難點遍歷中的index。方法和遍歷函數(shù)參數(shù)中的index作用的不同之處

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

L復習鞏固?選擇和查找方法的應(yīng)用?學生思考并講解(45分鐘)

要選擇body中的第3個段落，如何操作？

要得到body中第3個段落的下一個元素，如何操作？

$("span").parem()獲取的元素有幾個?

$("span").parents()獲取的元素有幾個?

代碼$(”p").pareni()獲取的元素有幾個?

代碼$("p").parentCdiv)獲取的元素有幾個?

要根據(jù)div2-2-l找到div2-2-2,有哪幾種查找路徑?

要根據(jù)div2?2?l找到div2-l,有哪幾種查找路徑?

要根據(jù)div2-2-l找到divl,有哪幾種查找路徑?

2.attr()和prop。方法(45分鐘)

(1)兩個方法在獲取和設(shè)置元素屬性值中的應(yīng)用格式

(2)兩個方法在獲取和設(shè)置布爾類型屬性取值中的差異及選擇

3JQuery中的each。方法(60分鐘)

(1)each。函數(shù)的作用,格式及用法

(2)元素的index問題

4.為元素添加和移除類(10分鐘)

(1)addClass()

(2)removeClass()

5.小測試(15分鐘)

(1)學生完成完成在教學平臺中設(shè)計的在線測試(填空、選擇和判斷)

(2)教師講解小測試

課堂小結(jié)(5分鐘)

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動(約30分鐘)教師活動

作業(yè)：

頁面中有4個img元素，文件夾中有4幅圖，分別是檢杳作業(yè)，并將作業(yè)問

imgl.jpg-img4.jpg,為4個img元素設(shè)置其src屬性的取值分別是題反饋給學生

這4個文件

任務(wù)1-4jQuery中的事件機制(2次課)

課程內(nèi)容信息說明

主題jQuery中的事件機制所屬任務(wù)任務(wù)1

教學目標

掌握使用on()方法、事件的快捷方法和。ne()方法為元素注冊

知識目標事件的做法

掌握使用。仟()方法為元素注銷事件的做法

能夠根據(jù)元素的具體情況和要求使用相應(yīng)的方法為元素注冊

能力目標

事件或者注銷事件。

重點注冊事件和注銷事件的方法。n。、one。、off()和事件的快捷方法

難點為動態(tài)生成的元素注朋事件或者注銷事件的做法

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.注冊事件(55分鐘)

(1)使用on()方法為元素自身或者后代元素注冊一個或多個事件

(2)使用事件的快捷方法為元素自身注冊事件

(3)one()方法與on()方法的區(qū)別

2.注銷事件(35分鐘)

(1)使用off()方法為元素自身注銷事件

(2)使用off()方法為后代元素注銷事件

(3)使用off()方法的注意事項

3.應(yīng)用事件和查找及選擇方法為div設(shè)置陰影(7()分鐘)

(1)設(shè)置div陰影的功能實現(xiàn)思路說明

(2)定義頁面元素及相關(guān)樣式

(3)定義jQuery代碼為指定div設(shè)置陰影效果

4.小測試(15分鐘)

(1)學生完成完成在教學平臺中設(shè)計的在線測試(填空、選擇和判斷)

(2)教師講解小測試

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：檢查作業(yè)，并將作業(yè)問

按照要求修改為div設(shè)置陰影的小案例，并提交作業(yè)題反饋給學生

任務(wù)27制作漂浮的廣告（2次課）

課程內(nèi)容信息說明

主題制作漂浮廣告所屬任務(wù)任務(wù)2

教學目標

掌握實現(xiàn)漂浮廣告時的方法和思路

知識目標掌握對漂浮廣告進行控制的做法

掌握jQuery中的css（）方法

能夠根據(jù)要求完成漂浮廣告的設(shè)計，能夠使用css（）方法設(shè)置

能力目標

或者獲取元素的樣式屬性取值。

漂浮廣告實現(xiàn)原理

重點

jQuery中的css（）方法

漂浮廣告實現(xiàn)原理

難點

jQuery中使用css（）方法設(shè)置元素樣式屬性取值時，樣式屬性的不同寫法

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.基于fixed定位的元素的漂浮效果設(shè)計（65分鐘）

（1）廣告移動方向說明

（2）使用JavaScripl代碼定義move。函數(shù)實現(xiàn)元素的漂浮功能

（3）使用setlnterval。調(diào)用函數(shù)move。時的注意事項

（4）關(guān)于全局變量gox和goy的問題

（5）使用jQuery代碼實現(xiàn)漂浮廣告功能

2JQuery中的css。方法（45分鐘）

（1）使用CSSO方法返回元素的樣式屬性取值

（2）css（"width"）與width。的對比

（3）使用css（）方法設(shè)置元素樣式屬性值

3.為漂浮廣告增加控制功能（50分鐘）

（1）關(guān)閉按鈕的添加

（2）設(shè)置廣告停止移動

（3）單擊關(guān)閉按鈕隱藏漂浮廣告

4?小測試（15分鐘）

（1）學生完成完成在教學平臺中設(shè)計的在線測試（填空、選擇和判斷）

（2）教師講解小測試

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：檢查作業(yè)，并將作業(yè)問

按照要求完善漂浮廣告小案例，并提交作業(yè)題反饋給學生

任務(wù)3表單數(shù)據(jù)驗證（2次課）

課程內(nèi)容信息說明

主題表單數(shù)據(jù)驗證所屬任務(wù)任務(wù)3

教學目標

掌握表單數(shù)據(jù)驗證中各種函數(shù)的定義和調(diào)用形式、正則表達

知識目標式的應(yīng)用方法等

掌握使用正則表達式及事件動態(tài)識別密碼強度的做法

能夠使用正則表達式或者普通的函數(shù)定義完成表單數(shù)據(jù)驗證

能力目標

的各項功能、能夠在輸入密碼的過程中動態(tài)識別密碼強度

定義函數(shù)，在表單數(shù)據(jù)提交時進行表單數(shù)據(jù)驗證

重點使用正則表達式動態(tài)識別密碼強度

定義函數(shù)，對表單數(shù)據(jù)進行即時驗證

使用正則表達式動態(tài)識別密碼強度

難點

定義函數(shù)，對表單數(shù)據(jù)進行即時驗證

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1,使用HTML5表單元素屬性對部分數(shù)據(jù)進行驗證（15分鐘）

（1）對用戶名進行驗證

（2）對密碼進行驗證

（3）對手機號進行驗證

（4）對密碼問題答案進行驗證

2.為form標記定義submit事件函數(shù)，完成部分元素的表單數(shù)據(jù)驗證（45分鐘）

（1）驗證性別和興趣愛好是否選擇

（2）驗證密碼保護問題是否選擇

（3）驗證確認密碼和密碼是否一致

3.設(shè)置密碼強度（50分鐘）

（1）JS中的正則表達式

（2）正則表達式的test。方法

（3）使用正則式檢測密碼串，根據(jù)檢測結(jié)果顯示密碼強弱信息

4.使用JavaScript正則表達式完成數(shù)據(jù)的即時驗證（50分鐘）

（1）輸入完用戶名之后的驗證

（2）輸入完密碼之后的驗證

（3）輸入完手機號之后的驗證

5?小測試（15分鐘）

（I）學生完成完成在教學平臺中設(shè)計的在線測試（填空、選擇和判斷）

（2）教師講解小測試

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：檢查作業(yè)，并將作業(yè)問

使用jQucry實現(xiàn)郵箱自動導航，井提交作業(yè)題反饋給學生

任務(wù)4實現(xiàn)級聯(lián)菜單（3次課）

課程內(nèi)容信息說明

主題實現(xiàn)級聯(lián)菜單所屬任務(wù)任務(wù)4

教學目標

掌握使用卜拉列表實現(xiàn)年月口級聯(lián)菜單的方法和步驟

知識目標

掌握使用選項卡方式實現(xiàn)省市區(qū)級聯(lián)菜單的方法和步驟

能力目標能夠使用閉包實現(xiàn)不同類型級聯(lián)菜單的功能

使用下及列表實現(xiàn)年月日級聯(lián)菜單

重點JSON數(shù)據(jù)的訪問

使用選項卡實現(xiàn)省市區(qū)級聯(lián)菜單

JSON數(shù)據(jù)的異步處理問題

難點

省市區(qū)級聯(lián)中元素定位坐標的設(shè)計要求

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1,使用下拉列表實現(xiàn)年月日級聯(lián)菜單（65分鐘）

（1）JS和jQuery操作select和option

（2）年月日級聯(lián)菜單實現(xiàn)步驟

（3）觀察、發(fā)現(xiàn)并解決問題：如果用戶已經(jīng)選擇過年月日信息，重新點開月份下拉列表框，

選擇的是第一個選項（--請選擇月份此時點開日期列表框，看到下面有31個日期列表項，

為什么會出現(xiàn)這種現(xiàn)象？要如何解決？

（4）觀察、發(fā)現(xiàn)開解決問題：選擇一次年月日之后，不刷新頁面，重新更換月份和日期，發(fā)

現(xiàn)什么問題？再更換一次月份和日期？再更換一次年月日？

2.改變DOM樹形結(jié)構(gòu)的常用方法（25分鐘）

（1）創(chuàng)建元素

（2）更換元素的內(nèi)部結(jié)構(gòu)

（3）在元素內(nèi)部插入子元素

（4）在元素外部插入兄弟元素

3.關(guān)于JSON（40分鐘）

（1）JSON數(shù)據(jù)的各種定義和訪問形式

（2）獨立存儲的JSON數(shù)據(jù)及訪問方式

（3）訪問數(shù)據(jù)文件cily.json

4.實現(xiàn)省市區(qū)級聯(lián)功能（120分鐘）

（1）設(shè)計頁面元素并定義元素樣式

（2）應(yīng)用閉包實現(xiàn)級聯(lián)功能

對每個選項卡注冊click事件

為.prov中的span（省份名稱）注冊click事件

為.city中的span元素（地市名稱）注冊click事件

為.area中的span元素（區(qū)縣名稱）注冊click事件

（3）程序中的缺陷及解決方案

5.小測試（15分鐘）

（1）學生完成完成在教學平臺中設(shè)計的在線測試（填空、選擇和判斷）

（2）教師講解小測試

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：檢查作業(yè)，并將作業(yè)問

完善省市區(qū)級聯(lián)菜單功能，并提交作業(yè)題反饋給學生

任務(wù)57文本動畫和顯隱動畫(2次課)

課程內(nèi)容信息說明

主題實現(xiàn)動畫效果所屬任務(wù)任務(wù)5

教學目標

掌握使用css()制作動畫的方法

知識目標

掌握顯隱動畫函數(shù)的用法

能夠熟練使用css()方法實現(xiàn)文本動畫，使用顯隱動畫模擬文

能力目標

件夾的樹形列表結(jié)構(gòu)

重點制作動畫的各種函數(shù)的作用和用法：css()、顯隱動畫

難點使用顯隱動畫模擬文件夾的樹形列表結(jié)構(gòu)

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

L使用css()方法實現(xiàn)文本動畫效果(35分鐘)

要求：頁面中有三個段落，內(nèi)容任意，段落內(nèi)容使用默認樣式效果，當鼠標指向段落時，將段

落背景改為黃色，文本改為紅色，鼠標離開段落時，將背景改為白色，文本改為藍色：鼠標單

擊段落時，段落字號放大為原來的1.2倍

(1)添加頁面元素，設(shè)計css()動畫

(2)jQuery中hover。方法的應(yīng)用

2.使用顯隱動畫模擬文件夾的樹形列表結(jié)構(gòu)(55分鐘)

C。127A0.1々9。

任務(wù)1jQuery

7911-1dom.MnW

示例L2error.html

ready.html

任務(wù)2克觀0叔叁.聯(lián)

9G0x?~城市松*

closepng

>C0mXMMSMMQutMTUWO-O?O

down.png

cityjson

向1

任務(wù)2交年月日敏察Mmi

(1)設(shè)計元素結(jié)構(gòu)

(2)使用腳本代碼實現(xiàn)功能

3.顯示隱藏動畫函數(shù)（55分鐘）

（1）show。、hide。、toggle（）

（2）示例講解：有動畫效果的顯示與隱藏動畫

4.應(yīng)用動畫的回調(diào)函數(shù)（30分鐘）

觀察給定代碼的運行效果，思考問題，給出相應(yīng)的解決方案

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：

使用循環(huán)結(jié)構(gòu)在頁面中添加5個div,div的樣式要求為寬度100像

素，高度100像素，背景綠色，邊距2像素，行內(nèi)塊布局，內(nèi)容為檢查作業(yè)，并將作業(yè)問

序號1、2、3、4、5,內(nèi)容在水平和垂直方向都居中；題反饋給學生

動畫效果要求為：單擊第2到第5個div時，完成自身的隱藏，單

擊第1個div時完成后面4個div的顯示。

任務(wù)5-2淡入淡出和上卷下拉動畫(2次課)

課程內(nèi)容信息說明

主題淡入淡出和上卷下拉動畫所屬任務(wù)任務(wù)5

教學目標

掌握淡入淡出動畫函數(shù)的用法

知識目標

掌握上卷下拉動畫函數(shù)的用法

能夠熟練使用淡入淡出動畫和上卷下拉動畫函數(shù)實現(xiàn)動畫效

能力目標

果

淡入淡出動畫函數(shù)

重點

上卷下受動畫函數(shù)

使用上卷下拉動畫實現(xiàn)階梯式的動畫效果

難點

淡入淡出函數(shù)中fadeTo()中透明度的問題

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.淡入淡出動畫函數(shù)(35分鐘)

(1)4個函數(shù)的格式和用法：fadcln()xfadcOut()^fadeTogglc()^fadcTo()

(2)使用4個函數(shù)實現(xiàn)笥單的淡入淡出動畫，重點演示fadeTo。透明度對「adelnO和fadeOul。

透明度的影響。

2.上卷下拉動畫函數(shù)(55分鐘)

(1)3個函數(shù)的格式和用法：slideDown。、slideUp()^slideToggle()

(2)使用上卷下拉函數(shù)實現(xiàn)百葉窗效果

(3)使用上卷下拉函數(shù)實現(xiàn)折疊框動畫

3?階梯式的上卷下拉動畫(85分鐘)

(1)階梯式上卷下拉動畫的效果演示及任務(wù)描述

(2)jQucry中的隊列控制方法

(3)使用隊列控制方法實現(xiàn)階梯式的上卷下拉動畫

課堂小結(jié)(5分鐘)

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：檢查作業(yè)，并將作業(yè)問

完善階梯式的上卷下拉動畫效果，改寫程序。題反饋給學生

任務(wù)5-3animate（）動畫和動畫控制（1次課）

課程內(nèi)容信息說明

主題animate（）動畫和動畫控制所屬任務(wù)任務(wù)5

教學目標

掌握animate。動畫方法的用法

知識目標

理解動畫控制方法的作用和用法

能力目標能夠熟練使用animate。函數(shù)實現(xiàn)復雜的動畫效果

animate］）動畫函數(shù)

重點

動畫控制方法

難點使用animate。函數(shù)實現(xiàn)復雜的動畫效果

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

l.animate（）動畫函數(shù)（45分鐘）

（1）animate。函數(shù)的格式和用法

（2）使用animale。函數(shù)實現(xiàn)返1可頁面頂部的滾動動畫,

2.動畫控制方法（25分鐘）

（1）停止動畫函數(shù)stop。的格式和用法

（2）延時動畫函數(shù)delay。的用法

3.動畫相關(guān)小測試（15分鐘）

完成任務(wù)5的所有內(nèi)容相關(guān)小測試

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：

復習動畫相關(guān)的所有函數(shù)。

任務(wù)67索引切換輪播（1次課）

課程內(nèi)容信息說明

主題索引切換輪播所屬任務(wù)任務(wù)6

教學目標

知識目標掌握實現(xiàn)索引切換輪播的方法和思路

能力目標能夠熟練完成索引切換輪播特效

重點索引切球輪播的實現(xiàn)方法

難點索引切度輪播的實現(xiàn)方法、定時器膏加問題及原因分析

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.實現(xiàn)最簡單的索引切換輪播（35分鐘）

（1）任務(wù)描述

（2）定義函數(shù)實現(xiàn)索引切換輪播，調(diào)用函數(shù)。

2,擴展索引切換輪播功能（50分鐘）

（1）停止和重啟輪播功能

解決定時器疊加問題帶來的影響

（2）后退和前進功能

（3）跟隨變化的數(shù)字索引

（4）單擊數(shù)字索引進行圖片切換

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：

完善索引切換輪播特效。

任務(wù)6-2使用animate。實現(xiàn)無縫滾動輪播（2次課）

課程內(nèi)容信息說明

使用animate。實現(xiàn)無縫滾動輪

主題所屬任務(wù)任務(wù)6

播

教學目標

知識目標掌握實現(xiàn)無縫滾動輪播的方法和思路

能力目標能夠熟練完成無縫滾動輪播特效

重點無縫滾動輪播的實現(xiàn)方法

無縫滾動輪播中無縫銜接問題的解決方案和思路

難點

判斷動畫是否正在進行中的條件的應(yīng)用

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.實現(xiàn)最簡單的無縫滾動輪播（90分鐘）

（1）任務(wù)描述

（2）添加頁面元素，定義元素的樣式。

（3）無縫滾動輪播的實現(xiàn)原理說明

（4）定義函數(shù)實現(xiàn)無縫滾動輪播

（5）無縫滾動輪播中的定時器時間設(shè)置

2.擴展無縫滾動輪播功能（85分鐘）

（1）停止和重啟輪播功能：解決定時器疊加問題帶來的影響

（2）后退和前進功能

（3）添加跟隨變化的數(shù)字索引

（4）前進后退功能中的動畫是否正在進行中的判斷條件的作用和應(yīng)用

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：

完善無縫滾動輪播特效。

任務(wù)6-3使用CSS3動畫實現(xiàn)無縫滾動輪播（1次課）

課程內(nèi)容信息說明

使用CSS3動畫實現(xiàn)無縫滾動輪

主題所屬任務(wù)任務(wù)6

播

教學目標

知識目標掌握使用CSS3動畫實現(xiàn)無縫滾動輪播的方法和思路

能力目標能夠熟練完成無縫滾動輪播特效

重點使用CSS3動畫實現(xiàn)無縫滾動輪播的方法

難點滾動條元素的樣式定義

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.使用CSS3動畫實現(xiàn)無縫滾動輪播（85分鐘）

（1）任務(wù)描述

（2）添加頁面元素，定義元素的樣式。

（3）定義函數(shù)實現(xiàn)無縫滾動輪播

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：

完善無縫滾動輪播特效。

任務(wù)6-4旋轉(zhuǎn)滾動輪播（1次課）

課程內(nèi)容信息說明

主題旋轉(zhuǎn)滾動輪播所屬任務(wù)任務(wù)6

教學目標

知識目標掌握實現(xiàn)旋轉(zhuǎn)滾動滾動輪播的方法和思路

能力目標能夠熟練完成旋轉(zhuǎn)滾動輪播特效

重點實現(xiàn)旋轉(zhuǎn)滾動輪播的方法

難點旋轉(zhuǎn)滾動輪播中每個圖片更換位置時的坐標設(shè)置要求

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.旋轉(zhuǎn)滾動滾動輪播（75分鐘）

（1）任務(wù)描述及旋轉(zhuǎn)方向說明

（2）添加頁面元素，定義元素的樣式。

（3）定義函數(shù)實現(xiàn)旋轉(zhuǎn)滾動輪播

（4）停止和重啟旋轉(zhuǎn)輪播

2.嘗試并思考問題（10分鐘）

（1）若是將css（）方法中設(shè)置z-index取值的代碼放入animate。動畫內(nèi)部,效果會如何?為什

么？

（2）若是將修改z-index取值的代碼放入animate。動畫的回調(diào)函數(shù)內(nèi)部，效果會如何？為什

么？

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：

完善旋轉(zhuǎn)滾動輪播特效。

任務(wù)77購物網(wǎng)站中的放大鏡（2次課）

課程內(nèi)容信息說明

主題購物網(wǎng)站中的放大鏡所屬任務(wù)任務(wù)7

教學目標

掌握放大鏡的實現(xiàn)原理

知識目標

掌握放大鏡功能的實現(xiàn)思路和方法

能力目標能夠熟練完成購物網(wǎng)站中的放大鏡特效

重點實現(xiàn)放大鏡功能的方法

放大鏡恃效中各種元素的布局及定位要求

難點

移動塊的坐標計算方法

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.放大鏡的貝囿布局及樣式定義（90分鐘）

（1）任務(wù)描述及效果演示

（2）添加頁面元素。

（3）定義頁面元素的樣式，強調(diào)各種元素的定位要求

2.放大鏡的實現(xiàn)（85分鐘）

（1）放大鏡的實現(xiàn)原理說明

（2）使用腳本實現(xiàn)放大鏡功能

（3）更換需要放大的圖片

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：

完善放大鏡特效。

任務(wù)7-2瀑布流圖像布局（1次課）

課程內(nèi)容信息說明

主題瀑布流圖像布局所屬任務(wù)任務(wù)7

教學目標

掌握瀑布流圖像布局的實現(xiàn)原理

知識目標

掌握瀑布流圖像布局功能的實現(xiàn)思路和方法

能力目標能夠熟練完成瀑布流圖像布局特效

重點實現(xiàn)瀑布流圖像布局的方法

難點瀑布流圖像布局中每個11元素的坐標位置計算方法

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.瀑布流圖像布局（85分鐘）

（1）任務(wù)描述及效果演示

（2）添加頁面元素并定義元素樣式。

（3）瀑布流的實現(xiàn)原理?第一行坐標的設(shè)置

（4）瀑布流的實現(xiàn)原理-第二行坐標的設(shè)置

（5）腳本功能實現(xiàn)

課堂小結(jié)（5分鐘）

對學牛.課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：

完善瀑布流布局特效。

任務(wù)7-3添加文件類型圖標（1次課）

課程內(nèi)容信息說明

主題添加文件類型圖標所屬任務(wù)任務(wù)7

教學目標

知識目標掌握添加文件類型圖標功能的實現(xiàn)思路和方法

能力目標能夠熟練完成添加文件類型圖標功能

重點實現(xiàn)判斷上傳文件的類型的方法

難點FileReader對象的應(yīng)用

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.添加文件類型圖標（75分鐘）

（1）任務(wù)描述及效果演示

（2）添加頁面元素并定義元素樣式。

（3）腳本功能實現(xiàn)

使用數(shù)組保存文件類型和圖標文件名稱

定義每個文件域元素的change事件函數(shù)

（4）觀察思考并解決問期

2.JavaScript讀取外部文件（10分鐘）

（1）FilcRcadcr對象的事件

（2）FileReader對象的屬性

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：

頁面初始時只有一個上傳文件的文件域元素和一個空白的圖像元批改作業(yè)并向?qū)W生反饋

素，空白的圖像元素并沒有任何顯示效果，選擇任意位置的任意圖作業(yè)問題

片上傳，讀取之后將其顯示在頁面中V

任務(wù)87應(yīng)用模態(tài)框添加和修改表格數(shù)據(jù)（1.5次課）

課程內(nèi)容信息說明

應(yīng)用模態(tài)框添加和修改表格數(shù)

主題所屬任務(wù)任務(wù)8

據(jù)

教學目標

理解模態(tài)框的概念和用法

知識目標

掌握應(yīng)用模態(tài)框添加和修改表格數(shù)據(jù)的思路和方法

能力目標能夠熟練應(yīng)用模態(tài)框添加和修改表格數(shù)據(jù)

重點應(yīng)用模態(tài)框添加和修改表格數(shù)據(jù)

表格操作中行序號的應(yīng)用

難點

修改行功能中表格行號全局變量的定義及應(yīng)用

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.應(yīng)用模態(tài)框添加和修改表格數(shù)據(jù)（120分鐘）

（1）任務(wù)描述及效果演示（15分鐘）

（2）添加頁面元素并定義元素樣式（35分鐘）。

（3）腳本功能實現(xiàn)（70分鐘）

刪除某個行之后修改行號、刪除行功能、修改行功能（進入修改界面、完成修改）、關(guān)閉

模態(tài)框、添加行功能

（4）觀察思考并解決問題

2.模態(tài)框的概念及應(yīng)用（10分鐘）

（1）FileReader對象的事件

（2）FileReader對象的屬性

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：批改作業(yè)并向?qū)W生反饋

完善模態(tài)框應(yīng)用。作業(yè)問題

任務(wù)8-2應(yīng)用模態(tài)框?qū)崿F(xiàn)簽到和評分功能（2次課）

課程內(nèi)容信息說明

應(yīng)用模態(tài)框?qū)崿F(xiàn)簽到和評分功

主題所屬任務(wù)任務(wù)8

能

教學目標

知識目標掌握應(yīng)用應(yīng)用模態(tài)框?qū)崿F(xiàn)簽到和評分功能的思路和方法

能力目標能夠熟練應(yīng)用模態(tài)框?qū)崿F(xiàn)簽到和評分功能

重點應(yīng)用模態(tài)框?qū)崿F(xiàn)簽到和評分功能

難點控制簽到狀態(tài)變化的方案

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.應(yīng)用模態(tài)框?qū)崿F(xiàn)簽到和評分功能?兀素設(shè)計與樣式定義（90分鐘）

（1）任務(wù)描述及效果演示（25分鐘）

（2）添加頁面元素并定義元素樣式（65分鐘）。

頁面元素-簽到模態(tài)框、單一評分、批量評分模態(tài)框

頁面元素-已簽到和未簽到選項卡及內(nèi)容區(qū)

元素樣式定義

2.應(yīng)用模態(tài)框?qū)崿F(xiàn)簽到和評分功能-腳本功能（85分鐘）

（1）定義學生信息的數(shù)據(jù)對象

（2）向選項卡內(nèi)容區(qū)的表格添加學生信息

（3）完成選項卡的切換功能

（4）表格行序號的調(diào)整

（5）完成簽到狀態(tài)的修改

（6）進行單一評分和批量評分

（7）模態(tài)框的關(guān)閉

（8）復選框全選控制

課堂小結(jié)（5分鐘）

對學生課前預習效果、本次課的實施效果進行點評，并提出新的要求

課后活動

學生活動（約30分鐘）教師活動

作業(yè)：批改作業(yè)并向?qū)W生反饋

完善應(yīng)用模態(tài)框?qū)崿F(xiàn)簽到和評分功能。作業(yè)問題

任務(wù)8-3讀取Excel數(shù)據(jù)表并進行排序操作（3次課）

課程內(nèi)容信息說明

讀取Excel數(shù)據(jù)表并進行排序

主題所屬任務(wù)任務(wù)8

操作

教學目標

知識目標掌握讀取Excel數(shù)據(jù)表并進行排序操作的思路和方法

能夠熟練應(yīng)用FilcRcader對象讀取excel數(shù)據(jù)表，并對數(shù)據(jù)

能力目標

表中的數(shù)據(jù)進行排序操作

使用EleReadei?對象讀取excel數(shù)據(jù)表

重點將數(shù)據(jù)表數(shù)據(jù)添加到頁面的表格中

對頁面表格中的數(shù)據(jù)按照用戶點擊操作完成排序

難點對頁面表格中的數(shù)據(jù)按照用戶點擊操作完成升序或者降序排序

教學方法與教學手段

教學方法線上線下結(jié)合、項目驅(qū)動、啟發(fā)引導、問題導向、案例演示

教學手段信息化手段應(yīng)用，機房傳屏軟件應(yīng)用或騰訊會議應(yīng)用

課中活動及需要時間

1.讀取Excel數(shù)據(jù)表并進行排序操作.元素定義（45分鐘）

（1）任務(wù)描述及效果演示（20分鐘）

（2）添加頁面元素并定義元素樣式（使用字體圖標添加升序或降序的小三角符號）（25分鐘）。

2.讀取excel文件并添加到表格中（90分鐘）

（1）讀取excel文件，得到JSON數(shù)據(jù)形式

（2）為表格添加標題行，為列標題引用類名sort,增加自定義屬性data-isasc

（3）為表格