jQuery前端开发任务驱动教程 教案-教学设计 第2章 jQuery实现多样化菜单.doc

博学谷——让IT教学更简单，让IT学习更有效

PAGE12

PAGE6

《jQuery前端开发任务驱动教程》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

第2章jQuery实现多样化菜单

计划课时

8课时

教学引入

菜单是网站和应用程序的重要组成部分，可以有效地呈现网站和应用程序的信息结构合理地设计菜单的层次结构和分类方式，可以清晰地展示不同页面或功能模块之间的关系帮助用户了解网站的整体布局，让用户快速地访问不同的页面，降低操作难度，提升用户的使用体验。本章将详细讲解如何使用jQuery实现多样化菜单。

教学目标

使学生掌握显示和隐藏元素的方法，能够使用显示和隐藏元素的方法实现页面特效

使学生掌握查找元素的方法，能够灵活应用查找元素的方法查找页面元素

使学生掌握元素索引的获取方法，能够使用index()方法获取元素索引

使学生掌握利用索引取出元素的方法，能够使用eq()方法从元素集中取出指定索引的元素

使学生掌握停止动画的方法，能够灵活应用stop()方法停止元素的动画效果

使学生掌握下拉菜单的实现方法，能够完成下拉菜单的开发

使学生掌握折叠式菜单的实现方法，能够完成折叠式菜单的开发

使学生掌握热卖展示菜单的实现方法，能够完成热卖展示菜单的开发

使学生掌握左进左出导航菜单的实现方法，能够完成左进左出导航菜单的开发

教学重点

显示和隐藏元素的方法

查找元素的方法

获取元素索引

根据索引取出元素

停止动画的方法

教学难点

查找元素的方法

任务2.2折叠式菜单

任务2.4左进左出导航菜单

教学方式

课堂教学以PPT讲授为主，并结合多媒体进行教学

教

学

过

程

第一课时

（显示和隐藏元素的方法、查找元素方法、任务2.1下拉菜单）

一、复习巩固

教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。

二、通过需求引入的方式导入新课

为了进一步推广传统文化，某传统文化研究院正在打造一个传统文化精品展示网站，该网站将为专家、学者、传统文化爱好者等提供一个学习和交流传统文化的平台。为了提升用户体验，网站的产品经理建议使用下拉菜单的形式来优化导航栏，实现当用户将鼠标指针移入一级菜单项后，在一级菜单项的下方展示二级菜单项，让用户获得更多的选择。

本节课将学习显示和隐藏元素的方法、查找元素方法，并开发一个下拉菜单。

三、新课讲解

知识点1-显示和隐藏元素的方法

教师通过PPT的方式讲解显示和隐藏元素的方法。

显示和隐藏元素的方法的使用场景。

列举jQuery中用于显示和隐藏元素的方法。

show()

hide()

toggle()

知识点2-查找元素方法

教师通过PPT结合实际操作的方式讲解查找元素方法。

元素查找方法的使用场景。

列举jQuery中常用的查找元素的方法。

children()

find()

parents()

parent()

siblings()

next()

prev()

通过代码演示查找元素方法的使用方法。

知识点3-任务2.1下拉菜单

教师通过PPT结合实际操作的方式讲解任务2.1下拉菜单。

四、归纳总结

教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。

五、布置作业

教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。

第二课时（上机练习）

上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。

上机：（考察知识点为显示和隐藏元素的方法、查找元素方法、任务2.1下拉菜单）

形式：单独完成

具体要求：

当用户将鼠标指针移入一级菜单项后，在一级菜单项的下方展示二级菜单项。

一级菜单项以及相应的二级菜单项具体如下。

传统工艺：剪纸、陶瓷、刺绣。

传统戏剧：京剧、川剧、粤剧。

传统节日：春节、端午节、重阳节。

传统乐器：二胡、琵琶、编钟。

第三课时

（任务2.2折叠式菜单）

一、复习巩固

教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。

二、通过情景引入的方式导入新课

为了更好地管理公司各部门，某科技公司将要对办公系统进行升级，以便用户可以快速查看各部门和子部门。项目经理提出，需要在部门管理页面中开发一个折叠式菜单，当用户单击一级菜单项时，对应的二级菜单项能够展开。

本节课将开发一个折叠式菜单。

三、新课讲解

知识点1-任务2.2折叠式菜单

教师通过PPT结合实际操作的方式讲解任务2.2折叠式菜单。

四、归纳总结

教师回顾本节课所讲的知识，并通过测试题的