jQuery网页特效任务驱动式教程（微课版）-教案全套 任务1.1-9.2 DOM和jQuery - 制作百度新闻页面滑块和随机文本

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分钟）教师活动作业：