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

《jQuery网页特效任务驱动式教程（微课版）教学教案.docx》由会员分享，可在线阅读，更多相关《jQuery网页特效任务驱动式教程（微课版）教学教案.docx（44页珍藏版）》请在优知文库上搜索。

1、任务17DOM和jQuery（2次课）课程内容信息说明主题DOM和jQuery所属任务任务1教学目标知识目标理解DOM树形结构和DOM节点的类型及概念掌握jQuery的入口函数及ready事件掌握jQuery对象与DoM对象相互转换的方法能力目标能够熟练应用jQuery的入口函数和ready事件完成基本的jQuery操作，能够熟练进行jQuery对象与DoM对象的转换，并完成相关对象的操作。重点jQuery的入口函数及ready事件jQuery对象与DOM对象相互转换的方法难点jQuery对象与DOM对象的区别及相互转换的方法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向

2、、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间LDOM树形结构和DOM节点的类型及概念（30分钟）（1）文档对象模型DOM（2）各种类型的DOM节点，着重讲解元素节点、属性节点和文本节点，通过示例获取三种节点的信息并在控制台中输出，观察结果2JQuery概述（20分钟）（1）简介jQuery的功能（2）下载并使用jQuery（3）jQuery的入口函数及用法3 .jQuery中的ready事件（30分钟）（1） ready事件的几种写法（2） jQuery的ready与js的load对比分析4 .jQuery对象与DOM对象的相互转换（40分钟）（1）两种对

3、象的获取方法说明及进行相互转换的必要性说明（2）将jQuery对象转换为DOM对象的方法（3）将DoM对象转换为jQuery对象的方法5 .课堂小练习（40分钟，学生完成+教师讲解）（1）学生完成小练习页面中有一组单选按钮，在选择某个选项后判断哪个radio按钮被选中，然后获取其Vakle属性值并在控制台输出。你所属的年龄段是：1120岁2130岁3140岁4150岁提交要求：分别使用JavaScript和jQuery完成（2）教师讲解小练习6 .小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的

4、实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动完成作业获取一组列表项的文本并在控制台输出要求：分别使用JavaScript和jQuery完成检查学生作业，总结作业中的问题，并反馈给学生任务1-2JQUery选择器及元素的查找方法(2次课)课程内容信息说明主题jQuery选择器及元素的查找方法所属任务任务1教学目标知识目标掌握基本选择器、层级选择器的作用和用法掌握伪类选择器的用法掌握各种查找方法的作用和用法能力目标能够熟练应用jQuery的选择器选择需要的jQuery对象；能够熟练应用查找方法根据指定的元素查找到另外的元素。重点基本选择器、层级选择器的作用和用法伪类选择器

5、的用法各种查找方法的作用和用法难点伪类选择器中的:first-child和:first的用法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间IJQuery的基本选择器(20分钟)(1)ID选择器(2)类选择器(3)标记名选择器(4)组选择器2JQuery的层级选择器(30分钟)(1)包含选择器(2)子对象选择器(3)相邻选择器(4)兄弟选择器3JQuery中的伪类选择器和过滤器(40分钟)(I)伪类选择器frst,frst-child,mth-child,:even,:odd,:not,:eq

6、()(2)过滤器eq()4.jQuery中的查找操作(70分钟)(1)向下查找后代元素（2）向上查找祖先元素（3）查找兄弟元素（4）应用查找方法5.小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动复习任务1-3jQuery操作DoM元素的几个基本方法(2次课)课程内容信息说明主题jQuery操作DOM元素的几个基，本方法所属任务任务1教学目标知识目标掌握attr()和PrOPo方法掌握each()方法掌握获取元素索引的不同方法

7、及区别掌握为元素添加和移除类的操作方法能力目标能够熟练使用jQuery的各种方法操作DOM元素。重点attr()PrOP()和each()方法遍历中的index。方法和遍历函数参数中的index作用的不同之处难点遍历中的index。方法和遍历函数参数中的index作用的不同之处教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间1,复习巩固选择和查找方法的应用学生思考并讲解(45分钟)要选择body中的第3个段落，如何操作？要得到body中第3个段落的下一个元素，如何操作？$(span).pare

8、nt()获取的元素有几个？$(span).ParentS()获取的元素有几个?代码$(”p).Parent()获取的元素有几个？代码$(p).parent(div，)获取的元素有几个?要根据div2-2l找到div222,有哪几种查找路径？要根据div2-2l找到div2J,有哪几种查找路径？要根据div2-2-l找到divl,有哪几种查找路径?2 .attr()和ProPo方法(45分钟)(1)两个方法在获取和设置元素属性值中的应用格式(2)两个方法在获取和设置布尔类型属性取值中的差异及选择3 .jQuery中的each。方法(60分钟)(1)each。函数的作用、格式及用法（2）元素的in

9、dex问题4.为元素添加和移除类（10分钟）（1） addClass（）（2） removeClass（）5.小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：页面中有4个img元素，文件夹中有4幅图，分别是imgl.jpgimg4加g,为4个img元素设置其src属性的取值分别是这4个文件检查作业，并将作业问题反馈给学生任务1-4jQuery中的事件机制(2次课)课程内容信息说明主题jQuery中的事件机制所属任务任务1

10、教学目标知识目标掌握使用Ono方法、事件的快捷方法和Oneo方法为元素注册事件的做法掌握使用off()方法为元素注销事件的做法能力目标能够根据元素的具体情况和要求使用相应的方法为元素注册事件或者注销事件。重点注册事件和注销事件的方法On()、one()off()和事件的快捷方法难点为动态生成的元素注册事件或者注销事件的做法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间L注册事件(55分钟)(1)使用on()方法为元素自身或者后代元素注册一个或多个事件(2)使用事件的快捷方法为元素自身注册事件

11、(3)one()方法与on()方法的区别2.注销事件(35分钟)(1)使用。ff()方法为元素自身注销事件(2)使用Off()方法为后代元素注销事件(3)使用off()方法的注意事项3,应用事件和查找及选择方法为div设置阴影(70分钟)(1)设置div阴影的功能实现思路说明(2)定义页面元素及相关样式(3)定义jQuery代码为指定div设置阴影效果4.小测试(15分钟)(1)学生完成完成在教学平台中设计的在线测试(填空、选择和判断)(2)教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：按照要求修改为di

12、v设置阴影的小案例，并提交作业检查作业，并将作业问题反馈给学生任务27制作漂浮的广告（2次课）课程内容信息说明主题制作漂浮广告所属任务任务2教学目标知识目标掌握实现漂浮广告时的方法和思路掌握对漂浮广告进行控制的做法掌握jQuery中的css（）方法能力目标能够根据要求完成漂浮广告的设计，能够使用css（）方法设置或者获取元素的样式属性取值。重点漂浮广告实现原理jQuery中的css（）方法难点漂浮广告实现原理jQuery中使用css（）方法设置元素样式属性取值时，样式属性的不同写法教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件

13、应用或腾讯会议应用课中活动及需要时间1 .基于fixed定位的元素的漂浮效果设计（65分钟）（1）广告移动方向说明（2）使用JavaScript代码定义move（）函数实现元素的漂浮功能（3）使用SeUnterValo调用函数move（）时的注意事项（4）关于全局变量gox和goy的问题（5）使用jQuery代码实现漂浮广告功能2 .jQuery中的css（）方法（45分钟）（1）使用css（）方法返回元素的样式属性取值2 2）CSSCWidth”）与Width（）的对比（3）使用css（）方法设置元素样式属性值3 .为漂浮广告增加控制功能（50分钟）（1）关闭按钮的添加（2）设置广告停止移动

14、（3）单击关闭按钮隐藏漂浮广告4 .小测试（15分钟）（1）学生完成完成在教学平台中设计的在线测试（填空、选择和判断）（2）教师讲解小测试课堂小结（5分钟）对学生课前预习效果、本次课的实施效果进行点评，并提出新的要求课后活动学生活动（约30分钟）教师活动作业：按照要求完善漂浮广告小案例，并提交作业检查作业，并将作业问题反馈给学生任务3表单数据验证（2次课）课程内容信息说明主题表单数据验证所属任务任务3教学目标知识目标掌握表单数据验证中各种函数的定义和调用形式、正则表达式的应用方法等掌握使用正则表达式及事件动态识别密码强度的做法能力目标能够使用正则表达式或者普通的函数定义完成表单数据验证的各项功能、能够在输入密码的过程中动态识别密码强度重点定义函数，在表单数据提交时进行表单数据验证使用正则表达式动态识别密码强度定义函数，对表单数据进行即时验证难点使用正则表达式动态识别密码强度定义函数，对表单数据进行即时验证教学方法与教学手段教学方法线上线下结合、项目驱动、启发引导、问题导向、案例演示教学手段信息化手段应用，机房传屏软件应用或腾讯会议应用课中活动及需要时间