jQuery网页特效设计基础教程--第4章-使用jQuery操作DOM-教案.docx

《jQuery网页特效设计基础教程--第4章-使用jQuery操作DOM-教案.docx》由会员分享，可在线阅读，更多相关《jQuery网页特效设计基础教程--第4章-使用jQuery操作DOM-教案.docx（4页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4章使用jQuery操作DOM课程名称jQuery网页特效设计基础教程项目名称使用jQuery操作DOM任务名称使用jQuery操作DOM课时5项目性质演示性 验证性 设计性 4综合性授课班级授课日期授课地点教学目标能力目标：1 .具备使用jQuery操作DOM中的元素的能力2 .具备使用jQuery操作DOM中的对象的能力知识目标：1 . 了解DOM操作的分类2 .掌握对元素内容、值、属性、CSS样式操作的方法3 .掌握对DOM文档节点操作的用法素质目标：1 .培养学生信息搜集能力2 .培养学生团结合作、互帮互助的能力教学内容1 .任务描述2 .任务展示与实现(1)对元素内容和元素值进行操

2、作(2)在页面中对DOM文档节点进行操作(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结教学重点1 .兀素内容的操作方法2 . DOM文档节点的操作方法3 .编写jQuery代码教学难点1 .使用jQuery操作DOM中的元素及对象教学准备1 .装有jQuery的电脑2 .教学课件PPT3 .教材：jQuery网页特效设计基础教程（慕课版）刘刚 人民邮电出版社作业设计1.应用jQuery实现开心小农场游戏教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）哪组织做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开 课件、打开软件、打

3、开u盘中的素材位置、打开授课计划、教案等），吸引学生注意力。潮呈【课前说明】本章主要介绍了 DOM操作的分类、jQuery对元素的内容和值的操作方法、jQuery对DOM文档 节点的操作方法、jQuery对元素属性的操作方法、jQuery对元素的CSS样式的操作方法等知识点。 其中重点介绍了对DOM文档节点的创建、查找、插入、删除、复制、替换、包裹、遍历等。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目 标。濡呈内容擀一、DOM操作的分类通常来说，DOM操作分为3方面：DOMCore、HTML-DOM和CSS-DOM。二、使用jQuery操作DOM中

4、的元素及对象通过多个案例讲解jQuery的操作方法，包括jQuery对元素的内容和值的操作方法、jQuery对 DOM文档节点的操作方法、jQuery对元素属性的操作方法、jQuery对元素的CSS样式的操作方法 等。案例：1 .设置div元素的文本内容（1）创建一个名称为index.html的文件，在该文件的标记中应用下面的语句引入jQuery 库。(2)在页面的标记中添加一个元素，令它的文本内容为空。代码如下：(3)在引入jQuery库的代码下方编写jQuery代码，实现为标记设置文本内容。具体代码 如下： $(document).ready (function() $(div”).tex

5、t(“我是通过text()方法设置的文本内容)；2.使用each。方法img遍历元素(1)创建一个名称为index.html的文件，在该文件的标记中应用下面的语句引入jQuery 库。(2)在页面的标记中，使用标签添加5张图片，代码如下：(3)在引入jQuery库的代码下方编写jQuery代码，使用each。方法遍历img全部图片，给每 一张图片添加一个title属性，即鼠标指针移动到图片上面时的提示信息。具体代码如下：$(nimgH).each(function(index)$(this).attr(ntitlen；第 +(index+1)+” 张图片)综合实例：实现我的开心小农场实UII通

6、过jQuery可以很方便地对DOM节点进行操作，通过“我的开心小农场”实例来说明通过jQuery操作DOM节点的具体应用。本实例的需求主要有以下两点。(1)在页面中引入农场图片，单击“播种”“生长”“开花”“结果”按钮时，在农场中显示相应效果。(2)在IE 6之前版本的浏览器下，png格式图片有背景，将其处理为透明效果。通过学习，学生能够掌握DOM操作的分类、使用jQuery操作DOM中的元素及对象的方法。评价本节课主要运用案例教学法，通过对jQuery操作DOM中元素及对象方法的深入理解，掌握 jQuery操作DOM中元素及对象方法的特点及优势，深入探讨jQuery操作DOM中元素及对象的编 程方法，通过实例的方法加强对jQuery操作DOM中元素及对象方法的掌握，达到能够独立熟练运 用jQuery操作DOM来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评 价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习 的方式。