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

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

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

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

教學(xué)目標(biāo)

理解D0M樹(shù)形結(jié)構(gòu)和DOM節(jié)點(diǎn)的類(lèi)型及概念

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

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

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

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

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

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

重點(diǎn)

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

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

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

1.DOM樹(shù)形結(jié)構(gòu)和DOM節(jié)點(diǎn)的類(lèi)型及概念（30分鐘）

（1）文檔對(duì)象模型DOM

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

節(jié)點(diǎn)的信息并在控制臺(tái)中輸出，觀察結(jié)果

2.jQuery概述（20分鐘）

（1）簡(jiǎn)介jQuery的功能

（2）下載并使用jQuery

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

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

（1）ready事件的幾種寫(xiě)法

（2）jQuery的ready與js的load對(duì)比分析

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

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

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

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

5.課堂小練習(xí)（40分鐘，學(xué)生完成+教師講解）

（1）學(xué)生完成小練習(xí)

頁(yè)面中有一組單選按鈕，在選擇某個(gè)選項(xiàng)后判斷哪個(gè)radio按鈕被選中，然后獲取其value

屬性值并在控制臺(tái)輸出。

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

提交

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

（2）教師講解小練習(xí)

6.小測(cè)試（15分鐘）

（1）學(xué)生完成完成在教學(xué)平臺(tái)中設(shè)計(jì)的在線測(cè)試（填空、選擇和判斷）

（2）教師講解小測(cè)試

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

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

獲取一組列表項(xiàng)的文本并在控制臺(tái)輸出業(yè)中的問(wèn)題，并反饋給

要求：分別使用JavaScript和jQuery完成學(xué)生

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

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

jQuer選擇器及元素的查找方

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

法

教學(xué)目標(biāo)

掌握基本選擇器、層級(jí)選擇器的作用和用法

知識(shí)目標(biāo)掌握偽類(lèi)選擇器的用法

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

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

能力目標(biāo)

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

基本選擇器、層級(jí)選擇器的作用和用法

重點(diǎn)偽類(lèi)選擇器的用法

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

難點(diǎn)偽類(lèi)選擇器中的:first-child和:first的用法

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

(1)ID選擇器

(2)類(lèi)選擇器

(3)標(biāo)記名選擇器

(4)組選擇器

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

(1)包含選擇器

(2)子對(duì)象選擇器

(3)相鄰選擇器

(4)兄弟選擇器

3.jQuei7中的偽類(lèi)選擇器和過(guò)濾器(40分鐘)

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

(2)過(guò)濾器cq()

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

(1)向下查找后代元素

（2）向上查找祖先元素

（3）查找兄弟元素

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

5.小測(cè)試（15分鐘）

（1）學(xué)生完成完成在教學(xué)平臺(tái)中設(shè)計(jì)的在線測(cè)試（填空、選擇和判斷）

（2）教師講解小測(cè)試

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

復(fù)習(xí)

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

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

jQuery操作D0M元素的幾個(gè)基

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

本方法

教學(xué)目標(biāo)

掌握altr()和prop。力法

掌握each。方法

知識(shí)目標(biāo)

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

掌握為元素添加和移除類(lèi)的操作方法

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

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

重點(diǎn)

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

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

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(2)元素的index問(wèn)題

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

(1)addClass()

(2)removeClass()

5.小測(cè)試(15分鐘)

(1)學(xué)生完成完成在教學(xué)平臺(tái)中設(shè)計(jì)的在線測(cè)試(填空、選擇和判斷)

(2)教師講解小測(cè)試

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)(約30分鐘)教師活動(dòng)

作業(yè)：

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

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

這4個(gè)文件

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

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

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

教學(xué)目標(biāo)

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

知識(shí)目標(biāo)事件的做法

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

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

能力目標(biāo)

事件或者注銷(xiāo)事件。

重點(diǎn)注冊(cè)事件和注銷(xiāo)事件的方法。n。、one。、off()和事件的快捷方法

難點(diǎn)為動(dòng)態(tài)生成的元素注朋事件或者注銷(xiāo)事件的做法

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

1.注冊(cè)事件(55分鐘)

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

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

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

2.注銷(xiāo)事件(35分鐘)

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

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

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

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

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

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

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

4.小測(cè)試(15分鐘)

(1)學(xué)生完成完成在教學(xué)平臺(tái)中設(shè)計(jì)的在線測(cè)試(填空、選擇和判斷)

(2)教師講解小測(cè)試

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

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

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

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

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

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

教學(xué)目標(biāo)

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

知識(shí)目標(biāo)掌握對(duì)漂浮廣告進(jìn)行控制的做法

掌握jQuery中的css（）方法

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

能力目標(biāo)

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

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

重點(diǎn)

jQuery中的css（）方法

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

難點(diǎn)

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

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

（1）廣告移動(dòng)方向說(shuō)明

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

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

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

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

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

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

（2）css（"width"）與width。的對(duì)比

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

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

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

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

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

4?小測(cè)試（15分鐘）

（1）學(xué)生完成完成在教學(xué)平臺(tái)中設(shè)計(jì)的在線測(cè)試（填空、選擇和判斷）

（2）教師講解小測(cè)試

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

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

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

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

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

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

教學(xué)目標(biāo)

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

知識(shí)目標(biāo)式的應(yīng)用方法等

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

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

能力目標(biāo)

的各項(xiàng)功能、能夠在輸入密碼的過(guò)程中動(dòng)態(tài)識(shí)別密碼強(qiáng)度

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

重點(diǎn)使用正則表達(dá)式動(dòng)態(tài)識(shí)別密碼強(qiáng)度

定義函數(shù)，對(duì)表單數(shù)據(jù)進(jìn)行即時(shí)驗(yàn)證

使用正則表達(dá)式動(dòng)態(tài)識(shí)別密碼強(qiáng)度

難點(diǎn)

定義函數(shù)，對(duì)表單數(shù)據(jù)進(jìn)行即時(shí)驗(yàn)證

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

1,使用HTML5表單元素屬性對(duì)部分?jǐn)?shù)據(jù)進(jìn)行驗(yàn)證（15分鐘）

（1）對(duì)用戶名進(jìn)行驗(yàn)證

（2）對(duì)密碼進(jìn)行驗(yàn)證

（3）對(duì)手機(jī)號(hào)進(jìn)行驗(yàn)證

（4）對(duì)密碼問(wèn)題答案進(jìn)行驗(yàn)證

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

（1）驗(yàn)證性別和興趣愛(ài)好是否選擇

（2）驗(yàn)證密碼保護(hù)問(wèn)題是否選擇

（3）驗(yàn)證確認(rèn)密碼和密碼是否一致

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

（1）JS中的正則表達(dá)式

（2）正則表達(dá)式的test。方法

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

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

（1）輸入完用戶名之后的驗(yàn)證

（2）輸入完密碼之后的驗(yàn)證

（3）輸入完手機(jī)號(hào)之后的驗(yàn)證

5?小測(cè)試（15分鐘）

（I）學(xué)生完成完成在教學(xué)平臺(tái)中設(shè)計(jì)的在線測(cè)試（填空、選擇和判斷）

（2）教師講解小測(cè)試

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

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

使用jQucry實(shí)現(xiàn)郵箱自動(dòng)導(dǎo)航，井提交作業(yè)題反饋給學(xué)生

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

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

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

教學(xué)目標(biāo)

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

知識(shí)目標(biāo)

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

能力目標(biāo)能夠使用閉包實(shí)現(xiàn)不同類(lèi)型級(jí)聯(lián)菜單的功能

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

重點(diǎn)JSON數(shù)據(jù)的訪問(wèn)

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

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

難點(diǎn)

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

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

（1）JS和jQuery操作select和option

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

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

選擇的是第一個(gè)選項(xiàng)（--請(qǐng)選擇月份此時(shí)點(diǎn)開(kāi)日期列表框，看到下面有31個(gè)日期列表項(xiàng)，

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

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

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

2.改變DOM樹(shù)形結(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ù)的各種定義和訪問(wèn)形式

（2）獨(dú)立存儲(chǔ)的JSON數(shù)據(jù)及訪問(wèn)方式

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

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

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

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

對(duì)每個(gè)選項(xiàng)卡注冊(cè)click事件

為.prov中的span（省份名稱(chēng)）注冊(cè)click事件

為.city中的span元素（地市名稱(chēng)）注冊(cè)click事件

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

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

5.小測(cè)試（15分鐘）

（1）學(xué)生完成完成在教學(xué)平臺(tái)中設(shè)計(jì)的在線測(cè)試（填空、選擇和判斷）

（2）教師講解小測(cè)試

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

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

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

任務(wù)57文本動(dòng)畫(huà)和顯隱動(dòng)畫(huà)(2次課)

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

主題實(shí)現(xiàn)動(dòng)畫(huà)效果所屬任務(wù)任務(wù)5

教學(xué)目標(biāo)

掌握使用css()制作動(dòng)畫(huà)的方法

知識(shí)目標(biāo)

掌握顯隱動(dòng)畫(huà)函數(shù)的用法

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

能力目標(biāo)

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

重點(diǎn)制作動(dòng)畫(huà)的各種函數(shù)的作用和用法：css()、顯隱動(dòng)畫(huà)

難點(diǎn)使用顯隱動(dòng)畫(huà)模擬文件夾的樹(shù)形列表結(jié)構(gòu)

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

L使用css()方法實(shí)現(xiàn)文本動(dòng)畫(huà)效果(35分鐘)

要求：頁(yè)面中有三個(gè)段落，內(nèi)容任意，段落內(nèi)容使用默認(rèn)樣式效果，當(dāng)鼠標(biāo)指向段落時(shí)，將段

落背景改為黃色，文本改為紅色，鼠標(biāo)離開(kāi)段落時(shí)，將背景改為白色，文本改為藍(lán)色：鼠標(biāo)單

擊段落時(shí)，段落字號(hào)放大為原來(lái)的1.2倍

(1)添加頁(yè)面元素，設(shè)計(jì)css()動(dòng)畫(huà)

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

2.使用顯隱動(dòng)畫(huà)模擬文件夾的樹(shù)形列表結(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è)計(jì)元素結(jié)構(gòu)

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

3.顯示隱藏動(dòng)畫(huà)函數(shù)（55分鐘）

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

（2）示例講解：有動(dòng)畫(huà)效果的顯示與隱藏動(dòng)畫(huà)

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

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

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

作業(yè)：

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

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

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

動(dòng)畫(huà)效果要求為：?jiǎn)螕舻?到第5個(gè)div時(shí)，完成自身的隱藏，單

擊第1個(gè)div時(shí)完成后面4個(gè)div的顯示。

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

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

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

教學(xué)目標(biāo)

掌握淡入淡出動(dòng)畫(huà)函數(shù)的用法

知識(shí)目標(biāo)

掌握上卷下拉動(dòng)畫(huà)函數(shù)的用法

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

能力目標(biāo)

果

淡入淡出動(dòng)畫(huà)函數(shù)

重點(diǎn)

上卷下受動(dòng)畫(huà)函數(shù)

使用上卷下拉動(dòng)畫(huà)實(shí)現(xiàn)階梯式的動(dòng)畫(huà)效果

難點(diǎn)

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

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

1.淡入淡出動(dòng)畫(huà)函數(shù)(35分鐘)

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

(2)使用4個(gè)函數(shù)實(shí)現(xiàn)笥單的淡入淡出動(dòng)畫(huà)，重點(diǎn)演示fadeTo。透明度對(duì)「adelnO和fadeOul。

透明度的影響。

2.上卷下拉動(dòng)畫(huà)函數(shù)(55分鐘)

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

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

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

3?階梯式的上卷下拉動(dòng)畫(huà)(85分鐘)

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

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

(3)使用隊(duì)列控制方法實(shí)現(xiàn)階梯式的上卷下拉動(dòng)畫(huà)

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

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

完善階梯式的上卷下拉動(dòng)畫(huà)效果，改寫(xiě)程序。題反饋給學(xué)生

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

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

主題animate（）動(dòng)畫(huà)和動(dòng)畫(huà)控制所屬任務(wù)任務(wù)5

教學(xué)目標(biāo)

掌握animate。動(dòng)畫(huà)方法的用法

知識(shí)目標(biāo)

理解動(dòng)畫(huà)控制方法的作用和用法

能力目標(biāo)能夠熟練使用animate。函數(shù)實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果

animate］）動(dòng)畫(huà)函數(shù)

重點(diǎn)

動(dòng)畫(huà)控制方法

難點(diǎn)使用animate。函數(shù)實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

l.animate（）動(dòng)畫(huà)函數(shù)（45分鐘）

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

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

2.動(dòng)畫(huà)控制方法（25分鐘）

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

（2）延時(shí)動(dòng)畫(huà)函數(shù)delay。的用法

3.動(dòng)畫(huà)相關(guān)小測(cè)試（15分鐘）

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

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

作業(yè)：

復(fù)習(xí)動(dòng)畫(huà)相關(guān)的所有函數(shù)。

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

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

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

教學(xué)目標(biāo)

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

能力目標(biāo)能夠熟練完成索引切換輪播特效

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

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

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

（1）任務(wù)描述

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

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

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

解決定時(shí)器疊加問(wèn)題帶來(lái)的影響

（2）后退和前進(jìn)功能

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

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

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

作業(yè)：

完善索引切換輪播特效。

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

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

使用animate。實(shí)現(xiàn)無(wú)縫滾動(dòng)輪

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

播

教學(xué)目標(biāo)

知識(shí)目標(biāo)掌握實(shí)現(xiàn)無(wú)縫滾動(dòng)輪播的方法和思路

能力目標(biāo)能夠熟練完成無(wú)縫滾動(dòng)輪播特效

重點(diǎn)無(wú)縫滾動(dòng)輪播的實(shí)現(xiàn)方法

無(wú)縫滾動(dòng)輪播中無(wú)縫銜接問(wèn)題的解決方案和思路

難點(diǎn)

判斷動(dòng)畫(huà)是否正在進(jìn)行中的條件的應(yīng)用

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

1.實(shí)現(xiàn)最簡(jiǎn)單的無(wú)縫滾動(dòng)輪播（90分鐘）

（1）任務(wù)描述

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

（3）無(wú)縫滾動(dòng)輪播的實(shí)現(xiàn)原理說(shuō)明

（4）定義函數(shù)實(shí)現(xiàn)無(wú)縫滾動(dòng)輪播

（5）無(wú)縫滾動(dòng)輪播中的定時(shí)器時(shí)間設(shè)置

2.擴(kuò)展無(wú)縫滾動(dòng)輪播功能（85分鐘）

（1）停止和重啟輪播功能：解決定時(shí)器疊加問(wèn)題帶來(lái)的影響

（2）后退和前進(jìn)功能

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

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

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

作業(yè)：

完善無(wú)縫滾動(dòng)輪播特效。

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

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

使用CSS3動(dòng)畫(huà)實(shí)現(xiàn)無(wú)縫滾動(dòng)輪

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

播

教學(xué)目標(biāo)

知識(shí)目標(biāo)掌握使用CSS3動(dòng)畫(huà)實(shí)現(xiàn)無(wú)縫滾動(dòng)輪播的方法和思路

能力目標(biāo)能夠熟練完成無(wú)縫滾動(dòng)輪播特效

重點(diǎn)使用CSS3動(dòng)畫(huà)實(shí)現(xiàn)無(wú)縫滾動(dòng)輪播的方法

難點(diǎn)滾動(dòng)條元素的樣式定義

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

1.使用CSS3動(dòng)畫(huà)實(shí)現(xiàn)無(wú)縫滾動(dòng)輪播（85分鐘）

（1）任務(wù)描述

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

（3）定義函數(shù)實(shí)現(xiàn)無(wú)縫滾動(dòng)輪播

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

作業(yè)：

完善無(wú)縫滾動(dòng)輪播特效。

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

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

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

教學(xué)目標(biāo)

知識(shí)目標(biāo)掌握實(shí)現(xiàn)旋轉(zhuǎn)滾動(dòng)滾動(dòng)輪播的方法和思路

能力目標(biāo)能夠熟練完成旋轉(zhuǎn)滾動(dòng)輪播特效

重點(diǎn)實(shí)現(xiàn)旋轉(zhuǎn)滾動(dòng)輪播的方法

難點(diǎn)旋轉(zhuǎn)滾動(dòng)輪播中每個(gè)圖片更換位置時(shí)的坐標(biāo)設(shè)置要求

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

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

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

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

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

2.嘗試并思考問(wèn)題（10分鐘）

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

么？

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

么？

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

作業(yè)：

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

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

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

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

教學(xué)目標(biāo)

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

知識(shí)目標(biāo)

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

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

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

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

難點(diǎn)

移動(dòng)塊的坐標(biāo)計(jì)算方法

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

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

（2）添加頁(yè)面元素。

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

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

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

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

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

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

作業(yè)：

完善放大鏡特效。

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

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

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

教學(xué)目標(biāo)

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

知識(shí)目標(biāo)

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

能力目標(biāo)能夠熟練完成瀑布流圖像布局特效

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

難點(diǎn)瀑布流圖像布局中每個(gè)11元素的坐標(biāo)位置計(jì)算方法

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

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

（2）添加頁(yè)面元素并定義元素樣式。

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

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

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

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

對(duì)學(xué)牛.課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

作業(yè)：

完善瀑布流布局特效。

任務(wù)7-3添加文件類(lèi)型圖標(biāo)（1次課）

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

主題添加文件類(lèi)型圖標(biāo)所屬任務(wù)任務(wù)7

教學(xué)目標(biāo)

知識(shí)目標(biāo)掌握添加文件類(lèi)型圖標(biāo)功能的實(shí)現(xiàn)思路和方法

能力目標(biāo)能夠熟練完成添加文件類(lèi)型圖標(biāo)功能

重點(diǎn)實(shí)現(xiàn)判斷上傳文件的類(lèi)型的方法

難點(diǎn)FileReader對(duì)象的應(yīng)用

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

1.添加文件類(lèi)型圖標(biāo)（75分鐘）

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

（2）添加頁(yè)面元素并定義元素樣式。

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

使用數(shù)組保存文件類(lèi)型和圖標(biāo)文件名稱(chēng)

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

（4）觀察思考并解決問(wèn)期

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

（1）FilcRcadcr對(duì)象的事件

（2）FileReader對(duì)象的屬性

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

作業(yè)：

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

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

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

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

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

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

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

據(jù)

教學(xué)目標(biāo)

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

知識(shí)目標(biāo)

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

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

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

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

難點(diǎn)

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

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

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

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

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

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

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

（4）觀察思考并解決問(wèn)題

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

（1）FileReader對(duì)象的事件

（2）FileReader對(duì)象的屬性

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

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

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

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

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

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

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

能

教學(xué)目標(biāo)

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

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

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

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

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

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

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

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

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

元素樣式定義

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

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

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

（3）完成選項(xiàng)卡的切換功能

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

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

（6）進(jìn)行單一評(píng)分和批量評(píng)分

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

（8）復(fù)選框全選控制

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

對(duì)學(xué)生課前預(yù)習(xí)效果、本次課的實(shí)施效果進(jìn)行點(diǎn)評(píng)，并提出新的要求

課后活動(dòng)

學(xué)生活動(dòng)（約30分鐘）教師活動(dòng)

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

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

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

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

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

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

操作

教學(xué)目標(biāo)

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

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

能力目標(biāo)

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

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

重點(diǎn)將數(shù)據(jù)表數(shù)據(jù)添加到頁(yè)面的表格中

對(duì)頁(yè)面表格中的數(shù)據(jù)按照用戶點(diǎn)擊操作完成排序

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

教學(xué)方法與教學(xué)手段

教學(xué)方法線上線下結(jié)合、項(xiàng)目驅(qū)動(dòng)、啟發(fā)引導(dǎo)、問(wèn)題導(dǎo)向、案例演示

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

課中活動(dòng)及需要時(shí)間

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

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

（2）添加頁(yè)面元素并定義元素樣式（使用字體圖標(biāo)添加升序或降序的小三角符號(hào)）（25分鐘）。

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

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

（2）為表格添加標(biāo)題行，為列標(biāo)題引用類(lèi)名sort,增加自定義屬性data-isasc

（3）為表格