jQuery网页特效任务驱动式教程（微课版）教学教案

任务17DOM和jQuery（2次课）

课程内容信息说明

主题DOM和jQuery所属任务任务1

教学目标

理解D0M树形结构和DOM节点的类型及概念

知识目标掌握jQuery的入口函数及ready事件

掌握jQuery对象与DOM对象相互转换的方法

能够熟练应用jQuery的入口函数和ready事件完成基本的

能力目标jQuery操作，能够熟练进行jQuery对象与DOM对象的转

换，并完成相关对象的操作。

jQuery的入口函数及ready事件

重点

jQuery对象与DOM对象相互转换的方法

难点jQueiy对象与DOM对象的区别及相互转换的方法

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.DOM树形结构和DOM节点的类型及概念（30分钟）

（1）文档对象模型DOM

（2）各种类型的DOM节点，着重讲解元素节点、属性节点和文本节点，通过示例获取三种

节点的信息并在控制台中输出，观察结果

2.jQuery概述（20分钟）

（1）简介jQuery的功能

（2）下载并使用jQuery

（3）jQuery的入口函数及用法

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

（1）ready事件的几种写法

（2）jQuery的ready与js的load对比分析

4.jQuery对象与DOM对象的相互转换（40分钟）

（1）两种对象的获取方法说明及进行相互转换的必要性说明

（2）将jQuery对象转换为DOM对象的方法

（3）将DOM对象转换为jQuery对象的方法

5.课堂小练习（40分钟，学生完成+教师讲解）

（1）学生完成小练习

页面中有一组单选按钮，在选择某个选项后判断哪个radio按钮被选中，然后获取其value

属性值并在控制台输出。

你所属的年龄段是：-11~2。岁。21~3。岁。31~4。岁G41~5。岁

提交

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

（2）教师讲解小练习

6.小测试（15分钟）

（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）

（2）教师讲解小测试

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

完成作业检查学生作业，总结作

获取一组列表项的文本并在控制台输出业中的问题，并反馈给

要求：分别使用JavaScript和jQuery完成学生

任务1-2jQuery选择器及元素的查找方法(2次课)

课程内容信息说明

jQuer选择器及元素的查找方

主题所属任务任务1

法

教学目标

掌握基本选择器、层级选择器的作用和用法

知识目标掌握伪类选择器的用法

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

能够熟练应用jQuery的选择器选择需要的jQuery对象；能

能力目标

够熟练应用查找方法根据指定的元素查找到另外的元素。

基本选择器、层级选择器的作用和用法

重点伪类选择器的用法

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

难点伪类选择器中的:first-child和:first的用法

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

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）应用查找方法

5.小测试（15分钟）

（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）

（2）教师讲解小测试

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

复习

任务1-3jQuery操作DOM元素的几个基本方法(2次课)

课程内容信息说明

jQuery操作D0M元素的几个基

主题所属任务任务1

本方法

教学目标

掌握altr()和prop。力法

掌握each。方法

知识目标

掌握获取元素索引的不同方法及区别

掌握为元素添加和移除类的操作方法

能力目标能够熟练使用jQuery的各种方法操作D0M元素。

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

重点

遍历中的index。方法和遍历函数参数中的index作用的不同之处

难点遍历中的index。方法和遍历函数参数中的index作用的不同之处

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

L复习巩固•选择和查找方法的应用•学生思考并讲解(45分钟)

要选择body中的第3个段落，如何操作？

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

$("span").parem()获取的元素有几个?

$("span").parents()获取的元素有几个?

代码$(”p").pareni()获取的元素有几个?

代码$("p").parentCdiv)获取的元素有几个?

要根据div2-2-l找到div2-2-2,有哪几种查找路径?

要根据div2・2・l找到div2-l,有哪几种查找路径?

要根据div2-2-l找到divl,有哪几种查找路径?

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

(1)两个方法在获取和设置元素属性值中的应用格式

(2)两个方法在获取和设置布尔类型属性取值中的差异及选择

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

(1)each。函数的作用,格式及用法

(2)元素的index问题

4.为元素添加和移除类(10分钟)

(1)addClass()

(2)removeClass()

5.小测试(15分钟)

(1)学生完成完成在教学平台中设计的在线测试(填空、选择和判断)

(2)教师讲解小测试

课堂小结(5分钟)

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动(约30分钟)教师活动

作业：

页面中有4个img元素，文件夹中有4幅图，分别是检杳作业，并将作业问

imgl.jpg-img4.jpg,为4个img元素设置其src属性的取值分别是题反馈给学生

这4个文件

任务1-4jQuery中的事件机制(2次课)

课程内容信息说明

主题jQuery中的事件机制所属任务任务1

教学目标

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

知识目标事件的做法

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

能够根据元素的具体情况和要求使用相应的方法为元素注册

能力目标

事件或者注销事件。

重点注册事件和注销事件的方法。n。、one。、off()和事件的快捷方法

难点为动态生成的元素注朋事件或者注销事件的做法

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.注册事件(55分钟)

(1)使用on()方法为元素自身或者后代元素注册一个或多个事件

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

(3)one()方法与on()方法的区别

2.注销事件(35分钟)

(1)使用off()方法为元素自身注销事件

(2)使用off()方法为后代元素注销事件

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

3.应用事件和查找及选择方法为div设置阴影(7()分钟)

(1)设置div阴影的功能实现思路说明

(2)定义页面元素及相关样式

(3)定义jQuery代码为指定div设置阴影效果

4.小测试(15分钟)

(1)学生完成完成在教学平台中设计的在线测试(填空、选择和判断)

(2)教师讲解小测试

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：检查作业，并将作业问

按照要求修改为div设置阴影的小案例，并提交作业题反馈给学生

任务27制作漂浮的广告（2次课）

课程内容信息说明

主题制作漂浮广告所属任务任务2

教学目标

掌握实现漂浮广告时的方法和思路

知识目标掌握对漂浮广告进行控制的做法

掌握jQuery中的css（）方法

能够根据要求完成漂浮广告的设计，能够使用css（）方法设置

能力目标

或者获取元素的样式属性取值。

漂浮广告实现原理

重点

jQuery中的css（）方法

漂浮广告实现原理

难点

jQuery中使用css（）方法设置元素样式属性取值时，样式属性的不同写法

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.基于fixed定位的元素的漂浮效果设计（65分钟）

（1）广告移动方向说明

（2）使用JavaScripl代码定义move。函数实现元素的漂浮功能

（3）使用setlnterval。调用函数move。时的注意事项

（4）关于全局变量gox和goy的问题

（5）使用jQuery代码实现漂浮广告功能

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

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

（2）css（"width"）与width。的对比

（3）使用css（）方法设置元素样式属性值

3.为漂浮广告增加控制功能（50分钟）

（1）关闭按钮的添加

（2）设置广告停止移动

（3）单击关闭按钮隐藏漂浮广告

4•小测试（15分钟）

（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）

（2）教师讲解小测试

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：检查作业，并将作业问

按照要求完善漂浮广告小案例，并提交作业题反馈给学生

任务3表单数据验证（2次课）

课程内容信息说明

主题表单数据验证所属任务任务3

教学目标

掌握表单数据验证中各种函数的定义和调用形式、正则表达

知识目标式的应用方法等

掌握使用正则表达式及事件动态识别密码强度的做法

能够使用正则表达式或者普通的函数定义完成表单数据验证

能力目标

的各项功能、能够在输入密码的过程中动态识别密码强度

定义函数，在表单数据提交时进行表单数据验证

重点使用正则表达式动态识别密码强度

定义函数，对表单数据进行即时验证

使用正则表达式动态识别密码强度

难点

定义函数，对表单数据进行即时验证

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1,使用HTML5表单元素属性对部分数据进行验证（15分钟）

（1）对用户名进行验证

（2）对密码进行验证

（3）对手机号进行验证

（4）对密码问题答案进行验证

2.为form标记定义submit事件函数，完成部分元素的表单数据验证（45分钟）

（1）验证性别和兴趣爱好是否选择

（2）验证密码保护问题是否选择

（3）验证确认密码和密码是否一致

3.设置密码强度（50分钟）

（1）JS中的正则表达式

（2）正则表达式的test。方法

（3）使用正则式检测密码串，根据检测结果显示密码强弱信息

4.使用JavaScript正则表达式完成数据的即时验证（50分钟）

（1）输入完用户名之后的验证

（2）输入完密码之后的验证

（3）输入完手机号之后的验证

5•小测试（15分钟）

（I）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）

（2）教师讲解小测试

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：检查作业，并将作业问

使用jQucry实现邮箱自动导航，井提交作业题反馈给学生

任务4实现级联菜单（3次课）

课程内容信息说明

主题实现级联菜单所属任务任务4

教学目标

掌握使用卜拉列表实现年月口级联菜单的方法和步骤

知识目标

掌握使用选项卡方式实现省市区级联菜单的方法和步骤

能力目标能够使用闭包实现不同类型级联菜单的功能

使用下及列表实现年月日级联菜单

重点JSON数据的访问

使用选项卡实现省市区级联菜单

JSON数据的异步处理问题

难点

省市区级联中元素定位坐标的设计要求

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1,使用下拉列表实现年月日级联菜单（65分钟）

（1）JS和jQuery操作select和option

（2）年月日级联菜单实现步骤

（3）观察、发现并解决问题：如果用户已经选择过年月日信息，重新点开月份下拉列表框，

选择的是第一个选项（--请选择月份此时点开日期列表框，看到下面有31个日期列表项，

为什么会出现这种现象？要如何解决？

（4）观察、发现开解决问题：选择一次年月日之后，不刷新页面，重新更换月份和日期，发

现什么问题？再更换一次月份和日期？再更换一次年月日？

2.改变DOM树形结构的常用方法（25分钟）

（1）创建元素

（2）更换元素的内部结构

（3）在元素内部插入子元素

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

3.关于JSON（40分钟）

（1）JSON数据的各种定义和访问形式

（2）独立存储的JSON数据及访问方式

（3）访问数据文件cily.json

4.实现省市区级联功能（120分钟）

（1）设计页面元素并定义元素样式

（2）应用闭包实现级联功能

对每个选项卡注册click事件

为.prov中的span（省份名称）注册click事件

为.city中的span元素（地市名称）注册click事件

为.area中的span元素（区县名称）注册click事件

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

5.小测试（15分钟）

（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）

（2）教师讲解小测试

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：检查作业，并将作业问

完善省市区级联菜单功能，并提交作业题反馈给学生

任务57文本动画和显隐动画(2次课)

课程内容信息说明

主题实现动画效果所属任务任务5

教学目标

掌握使用css()制作动画的方法

知识目标

掌握显隐动画函数的用法

能够熟练使用css()方法实现文本动画，使用显隐动画模拟文

能力目标

件夹的树形列表结构

重点制作动画的各种函数的作用和用法：css()、显隐动画

难点使用显隐动画模拟文件夹的树形列表结构

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

L使用css()方法实现文本动画效果(35分钟)

要求：页面中有三个段落，内容任意，段落内容使用默认样式效果，当鼠标指向段落时，将段

落背景改为黄色，文本改为红色，鼠标离开段落时，将背景改为白色，文本改为蓝色：鼠标单

击段落时，段落字号放大为原来的1.2倍

(1)添加页面元素，设计css()动画

(2)jQuery中hover。方法的应用

2.使用显隐动画模拟文件夹的树形列表结构(55分钟)

C。127A0.1々9。

任务1jQuery

7911-1dom.MnW

示例L2error.html

ready.html

任务2克观0叔叁.联

9G0x♦~城市松*

closepng

>C0mXMMSMMQutMTUWO-O©O

down.png

cityjson

向1

任务2交年月日敏察Mmi

(1)设计元素结构

(2)使用脚本代码实现功能

3.显示隐藏动画函数（55分钟）

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

（2）示例讲解：有动画效果的显示与隐藏动画

4.应用动画的回调函数（30分钟）

观察给定代码的运行效果，思考问题，给出相应的解决方案

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：

使用循环结构在页面中添加5个div,div的样式要求为宽度100像

素，高度100像素，背景绿色，边距2像素，行内块布局，内容为检查作业，并将作业问

序号1、2、3、4、5,内容在水平和垂直方向都居中；题反馈给学生

动画效果要求为：单击第2到第5个div时，完成自身的隐藏，单

击第1个div时完成后面4个div的显示。

任务5-2淡入淡出和上卷下拉动画(2次课)

课程内容信息说明

主题淡入淡出和上卷下拉动画所属任务任务5

教学目标

掌握淡入淡出动画函数的用法

知识目标

掌握上卷下拉动画函数的用法

能够熟练使用淡入淡出动画和上卷下拉动画函数实现动画效

能力目标

果

淡入淡出动画函数

重点

上卷下受动画函数

使用上卷下拉动画实现阶梯式的动画效果

难点

淡入淡出函数中fadeTo()中透明度的问题

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.淡入淡出动画函数(35分钟)

(1)4个函数的格式和用法：fadcln()xfadcOut()^fadeTogglc()^fadcTo()

(2)使用4个函数实现笥单的淡入淡出动画，重点演示fadeTo。透明度对「adelnO和fadeOul。

透明度的影响。

2.上卷下拉动画函数(55分钟)

(1)3个函数的格式和用法：slideDown。、slideUp()^slideToggle()

(2)使用上卷下拉函数实现百叶窗效果

(3)使用上卷下拉函数实现折叠框动画

3•阶梯式的上卷下拉动画(85分钟)

(1)阶梯式上卷下拉动画的效果演示及任务描述

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

(3)使用队列控制方法实现阶梯式的上卷下拉动画

课堂小结(5分钟)

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：检查作业，并将作业问

完善阶梯式的上卷下拉动画效果，改写程序。题反馈给学生

任务5-3animate（）动画和动画控制（1次课）

课程内容信息说明

主题animate（）动画和动画控制所属任务任务5

教学目标

掌握animate。动画方法的用法

知识目标

理解动画控制方法的作用和用法

能力目标能够熟练使用animate。函数实现复杂的动画效果

animate］）动画函数

重点

动画控制方法

难点使用animate。函数实现复杂的动画效果

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

l.animate（）动画函数（45分钟）

（1）animate。函数的格式和用法

（2）使用animale。函数实现返1可页面顶部的滚动动画,

2.动画控制方法（25分钟）

（1）停止动画函数stop。的格式和用法

（2）延时动画函数delay。的用法

3.动画相关小测试（15分钟）

完成任务5的所有内容相关小测试

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：

复习动画相关的所有函数。

任务67索引切换轮播（1次课）

课程内容信息说明

主题索引切换轮播所属任务任务6

教学目标

知识目标掌握实现索引切换轮播的方法和思路

能力目标能够熟练完成索引切换轮播特效

重点索引切球轮播的实现方法

难点索引切度轮播的实现方法、定时器膏加问题及原因分析

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.实现最简单的索引切换轮播（35分钟）

（1）任务描述

（2）定义函数实现索引切换轮播，调用函数。

2,扩展索引切换轮播功能（50分钟）

（1）停止和重启轮播功能

解决定时器叠加问题带来的影响

（2）后退和前进功能

（3）跟随变化的数字索引

（4）单击数字索引进行图片切换

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：

完善索引切换轮播特效。

任务6-2使用animate。实现无缝滚动轮播（2次课）

课程内容信息说明

使用animate。实现无缝滚动轮

主题所属任务任务6

播

教学目标

知识目标掌握实现无缝滚动轮播的方法和思路

能力目标能够熟练完成无缝滚动轮播特效

重点无缝滚动轮播的实现方法

无缝滚动轮播中无缝衔接问题的解决方案和思路

难点

判断动画是否正在进行中的条件的应用

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.实现最简单的无缝滚动轮播（90分钟）

（1）任务描述

（2）添加页面元素，定义元素的样式。

（3）无缝滚动轮播的实现原理说明

（4）定义函数实现无缝滚动轮播

（5）无缝滚动轮播中的定时器时间设置

2.扩展无缝滚动轮播功能（85分钟）

（1）停止和重启轮播功能：解决定时器叠加问题带来的影响

（2）后退和前进功能

（3）添加跟随变化的数字索引

（4）前进后退功能中的动画是否正在进行中的判断条件的作用和应用

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：

完善无缝滚动轮播特效。

任务6-3使用CSS3动画实现无缝滚动轮播（1次课）

课程内容信息说明

使用CSS3动画实现无缝滚动轮

主题所属任务任务6

播

教学目标

知识目标掌握使用CSS3动画实现无缝滚动轮播的方法和思路

能力目标能够熟练完成无缝滚动轮播特效

重点使用CSS3动画实现无缝滚动轮播的方法

难点滚动条元素的样式定义

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.使用CSS3动画实现无缝滚动轮播（85分钟）

（1）任务描述

（2）添加页面元素，定义元素的样式。

（3）定义函数实现无缝滚动轮播

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：

完善无缝滚动轮播特效。

任务6-4旋转滚动轮播（1次课）

课程内容信息说明

主题旋转滚动轮播所属任务任务6

教学目标

知识目标掌握实现旋转滚动滚动轮播的方法和思路

能力目标能够熟练完成旋转滚动轮播特效

重点实现旋转滚动轮播的方法

难点旋转滚动轮播中每个图片更换位置时的坐标设置要求

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.旋转滚动滚动轮播（75分钟）

（1）任务描述及旋转方向说明

（2）添加页面元素，定义元素的样式。

（3）定义函数实现旋转滚动轮播

（4）停止和重启旋转轮播

2.尝试并思考问题（10分钟）

（1）若是将css（）方法中设置z-index取值的代码放入animate。动画内部,效果会如何?为什

么？

（2）若是将修改z-index取值的代码放入animate。动画的回调函数内部，效果会如何？为什

么？

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：

完善旋转滚动轮播特效。

任务77购物网站中的放大镜（2次课）

课程内容信息说明

主题购物网站中的放大镜所属任务任务7

教学目标

掌握放大镜的实现原理

知识目标

掌握放大镜功能的实现思路和方法

能力目标能够熟练完成购物网站中的放大镜特效

重点实现放大镜功能的方法

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

难点

移动块的坐标计算方法

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.放大镜的贝囿布局及样式定义（90分钟）

（1）任务描述及效果演示

（2）添加页面元素。

（3）定义页面元素的样式，强调各种元素的定位要求

2.放大镜的实现（85分钟）

（1）放大镜的实现原理说明

（2）使用脚本实现放大镜功能

（3）更换需要放大的图片

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：

完善放大镜特效。

任务7-2瀑布流图像布局（1次课）

课程内容信息说明

主题瀑布流图像布局所属任务任务7

教学目标

掌握瀑布流图像布局的实现原理

知识目标

掌握瀑布流图像布局功能的实现思路和方法

能力目标能够熟练完成瀑布流图像布局特效

重点实现瀑布流图像布局的方法

难点瀑布流图像布局中每个11元素的坐标位置计算方法

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.瀑布流图像布局（85分钟）

（1）任务描述及效果演示

（2）添加页面元素并定义元素样式。

（3）瀑布流的实现原理•第一行坐标的设置

（4）瀑布流的实现原理-第二行坐标的设置

（5）脚本功能实现

课堂小结（5分钟）

对学牛.课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：

完善瀑布流布局特效。

任务7-3添加文件类型图标（1次课）

课程内容信息说明

主题添加文件类型图标所属任务任务7

教学目标

知识目标掌握添加文件类型图标功能的实现思路和方法

能力目标能够熟练完成添加文件类型图标功能

重点实现判断上传文件的类型的方法

难点FileReader对象的应用

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.添加文件类型图标（75分钟）

（1）任务描述及效果演示

（2）添加页面元素并定义元素样式。

（3）脚本功能实现

使用数组保存文件类型和图标文件名称

定义每个文件域元素的change事件函数

（4）观察思考并解决问期

2.JavaScript读取外部文件（10分钟）

（1）FilcRcadcr对象的事件

（2）FileReader对象的属性

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：

页面初始时只有一个上传文件的文件域元素和一个空白的图像元批改作业并向学生反馈

素，空白的图像元素并没有任何显示效果，选择任意位置的任意图作业问题

片上传，读取之后将其显示在页面中V

任务87应用模态框添加和修改表格数据（1.5次课）

课程内容信息说明

应用模态框添加和修改表格数

主题所属任务任务8

据

教学目标

理解模态框的概念和用法

知识目标

掌握应用模态框添加和修改表格数据的思路和方法

能力目标能够熟练应用模态框添加和修改表格数据

重点应用模态框添加和修改表格数据

表格操作中行序号的应用

难点

修改行功能中表格行号全局变量的定义及应用

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.应用模态框添加和修改表格数据（120分钟）

（1）任务描述及效果演示（15分钟）

（2）添加页面元素并定义元素样式（35分钟）。

（3）脚本功能实现（70分钟）

删除某个行之后修改行号、删除行功能、修改行功能（进入修改界面、完成修改）、关闭

模态框、添加行功能

（4）观察思考并解决问题

2.模态框的概念及应用（10分钟）

（1）FileReader对象的事件

（2）FileReader对象的属性

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：批改作业并向学生反馈

完善模态框应用。作业问题

任务8-2应用模态框实现签到和评分功能（2次课）

课程内容信息说明

应用模态框实现签到和评分功

主题所属任务任务8

能

教学目标

知识目标掌握应用应用模态框实现签到和评分功能的思路和方法

能力目标能够熟练应用模态框实现签到和评分功能

重点应用模态框实现签到和评分功能

难点控制签到状态变化的方案

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.应用模态框实现签到和评分功能•兀素设计与样式定义（90分钟）

（1）任务描述及效果演示（25分钟）

（2）添加页面元素并定义元素样式（65分钟）。

页面元素-签到模态框、单一评分、批量评分模态框

页面元素-已签到和未签到选项卡及内容区

元素样式定义

2.应用模态框实现签到和评分功能-脚本功能（85分钟）

（1）定义学生信息的数据对象

（2）向选项卡内容区的表格添加学生信息

（3）完成选项卡的切换功能

（4）表格行序号的调整

（5）完成签到状态的修改

（6）进行单一评分和批量评分

（7）模态框的关闭

（8）复选框全选控制

课堂小结（5分钟）

对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求

课后活动

学生活动（约30分钟）教师活动

作业：批改作业并向学生反馈

完善应用模态框实现签到和评分功能。作业问题

任务8-3读取Excel数据表并进行排序操作（3次课）

课程内容信息说明

读取Excel数据表并进行排序

主题所属任务任务8

操作

教学目标

知识目标掌握读取Excel数据表并进行排序操作的思路和方法

能够熟练应用FilcRcader对象读取excel数据表，并对数据

能力目标

表中的数据进行排序操作

使用EleReadei•对象读取excel数据表

重点将数据表数据添加到页面的表格中

对页面表格中的数据按照用户点击操作完成排序

难点对页面表格中的数据按照用户点击操作完成升序或者降序排序

教学方法与教学手段

教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示

教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用

课中活动及需要时间

1.读取Excel数据表并进行排序操作.元素定义（45分钟）

（1）任务描述及效果演示（20分钟）

（2）添加页面元素并定义元素样式（使用字体图标添加升序或降序的小三角符号）（25分钟）。

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

（1）读取excel文件，得到JSON数据形式

（2）为表格添加标题行，为列标题引用类名sort,增加自定义属性data-isasc

（3）为表格