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

博学谷——让IT教学更简单，让IT学习更有效PAGE12PAGE6《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折叠式菜单。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习考察学生对知识点的掌握情况。上机：（考察知识点为任务2.2折叠式菜单）形式：单独完成具体要求：开发一个折叠式菜单，当用户单击一级菜单项时，对应的二级菜单项能够展开。折叠式菜单的一级菜单项和二级菜单项具体如下。行政部：物资采购部、后勤保障部、行政办公室。财务部：财务核算部、税务管理部、薪资管理部。技术部：Java研发部、Python研发部、PHP研发部。市场部：北京事业部、上海事业部、深圳事业部。第五课时（获取元素索引、根据索引取出元素、任务2.3热卖展示菜单）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课某电商公司是一家利用互联网技术和电子商务模式进行商品销售的企业。为了提供更加便利的购物渠道，该电商公司需要开发一个新的电商网站。在电商网站的开发过程中，需要设计一个热卖展示菜单，该菜单用于展示热卖的9种商品，并支持快速切换商品。当鼠标指针移动到热卖展示菜单左侧的某个选项上时，右侧的图像区域显示对应的商品图。其中，热卖的商品包括茶具、文具、毛巾、羽绒服、靴子、耳机、收纳盒、吉他和珠宝。本节课将讲解获取元素索引、根据索引取出元素，并开发一个热卖展示菜单。三、新课讲解知识点1-获取元素索引教师通过PPT结合实际操作的方式讲解获取元素索引。获取元素索引的使用场景。介绍index()方法的语法格式。通过代码演示index()方法的使用方法。知识点2-根据索引取出元素教师通过PPT结合实际操作的方式讲解根据索引取出元素。根据索引取出元素的使用场景。介绍eq()方法的语法格式。通过代码演示eq()方法的使用方法。知识点3-任务2.3热卖展示菜单教师通过PPT结合实际操作的方式讲解任务2.3热卖展示菜单。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第六课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习考察学生对知识点的掌握情况。上机：（考察知识点为获取元素索引、根据索引取出元素、任务2.3热卖展示菜单）形式：单独完成具体要求：开发一个热卖展示菜单，该菜单用于展示热卖的9款商品，并支持快速切换商品。当鼠标指针移动到商品菜单左侧时，右侧的图像区域能够显示对应的商品图。热卖的商品包括茶具、文具、毛巾、羽绒服、靴子、耳机、收纳盒、吉他和珠宝。第七课时（停止动画的方法、任务2.4左进左出导航菜单）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过情景引入的方式导入新课随着互联网和移动技术的快速发展，外卖行业呈现出快速增长的趋势。某外卖企业为了提高管理效率，决定开发一个外卖点餐后台管理系统。在这个项目中，项目经理提出需要开发一个带有左进左出效果的导航菜单页面，具体要求是单击一级菜单项时，一级菜单项下的二级菜单项能够以从屏幕左侧滑人的方式显示；再次单击一级菜单项时，二级菜单项能够以从屏幕左侧滑出的方式隐藏，从而实现左进左出导航菜单效果。本节课将讲解停止动画的方法，并开发一个左进左出导航菜单。三、新课讲解知识点1-停止动画的方法教师通过PPT结合实际操作的方式讲解停止动画的方法。停止动画的方法的使用场景。介绍stop()方法的语法格式。以div元素为例，演示使用stop()方法的3种常用方式。知识点2-任务2.4左进左出导航菜单教师通过PPT结合实际操作的方式讲解任务2.4左进左出导航菜单。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第八课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习考察学生对知识点的掌握情况。上机：（考察知识点为停止动画的方法、任务2.4左进左出导航菜单）形式：单独完成具体要求