jQuery网页特效设计基础教程--第4章-使用jQuery操作DOM-教案.docx
-
资源ID：35070918
资源大小：16.59KB
全文页数：4页
- 资源格式： DOCX
下载积分：15金币
快捷下载
会员登录下载
微信登录下载
三方登录下载：
微信扫一扫登录
|
友情提示
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。
5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。
|
jQuery网页特效设计基础教程--第4章-使用jQuery操作DOM-教案.docx
第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)在页面中对DOM文档节点进行操作(2)学生动手操作3 .教师讲解本任务涉及的知识点4 .任务小结教学重点1 .兀素内容的操作方法2 . DOM文档节点的操作方法3 .编写jQuery代码教学难点1 .使用jQuery操作DOM中的元素及对象教学准备1 .装有jQuery的电脑2 .教学课件PPT3 .教材：jQuery网页特效设计基础教程（慕课版）刘刚 人民邮电出版社作业设计1.应用jQuery实现开心小农场游戏教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）哪组织做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开 课件、打开软件、打开u盘中的素材位置、打开授课计划、教案等），吸引学生注意力。潮呈【课前说明】本章主要介绍了 DOM操作的分类、jQuery对元素的内容和值的操作方法、jQuery对DOM文档 节点的操作方法、jQuery对元素属性的操作方法、jQuery对元素的CSS样式的操作方法等知识点。 其中重点介绍了对DOM文档节点的创建、查找、插入、删除、复制、替换、包裹、遍历等。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目 标。濡呈内容擀一、DOM操作的分类通常来说，DOM操作分为3方面：DOMCore、HTML-DOM和CSS-DOM。二、使用jQuery操作DOM中的元素及对象通过多个案例讲解jQuery的操作方法，包括jQuery对元素的内容和值的操作方法、jQuery对 DOM文档节点的操作方法、jQuery对元素属性的操作方法、jQuery对元素的CSS样式的操作方法 等。案例：1 .设置div元素的文本内容（1）创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery 库。<script type=ntext/javascriptn src=n./js/jquery-3.3.1 ,min.jsH></script>(2)在页面的<body>标记中添加一个<div>元素，令它的文本内容为空。代码如下：<div></div>(3)在引入jQuery库的代码下方编写jQuery代码，实现为<div>标记设置文本内容。具体代码 如下：<script type=ntext/javascriptn> $(document).ready (function() $("div”).text(“我是通过text()方法设置的文本内容)；</script>2.使用each。方法img遍历元素(1)创建一个名称为index.html的文件，在该文件的<head>标记中应用下面的语句引入jQuery 库。<script type=ntext/javascriptn src=,./js/jquery-3.3.1 .min.jsnx/script>(2)在页面的<body>标记中，使用<img>标签添加5张图片，代码如下：<img height=60 src="images/01 .jpgn width=80 /><img height=60 src="images/02.jpgn width=80 /><img height=60 src=nimages/03.jpgn width=80 /><img height=60 src=nimages/04.jpgn width=80 /><img height=60 src=nimages/05.jpgn width=80 />(3)在引入jQuery库的代码下方编写jQuery代码，使用each。方法遍历img全部图片，给每 一张图片添加一个title属性，即鼠标指针移动到图片上面时的提示信息。具体代码如下：$(nimgH).each(function(index)$(this).attr(ntitlen；'第 "+(index+1)+” 张图片)综合实例：实现我的开心小农场实UII通过jQuery可以很方便地对DOM节点进行操作，通过“我的开心小农场”实例来说明通过jQuery操作DOM节点的具体应用。本实例的需求主要有以下两点。(1)在页面中引入农场图片，单击“播种”“生长”“开花”“结果”按钮时，在农场中显示相应效果。(2)在IE 6之前版本的浏览器下，png格式图片有背景，将其处理为透明效果。通过学习，学生能够掌握DOM操作的分类、使用jQuery操作DOM中的元素及对象的方法。评价本节课主要运用案例教学法，通过对jQuery操作DOM中元素及对象方法的深入理解，掌握 jQuery操作DOM中元素及对象方法的特点及优势，深入探讨jQuery操作DOM中元素及对象的编 程方法，通过实例的方法加强对jQuery操作DOM中元素及对象方法的掌握，达到能够独立熟练运 用jQuery操作DOM来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评 价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习 的方式。
