jQuery前端开发任务驱动教程 教案-教学设计 第3章 jQuery实现页面交互（上）

博学谷——让IT教学更简单，让IT学习更有效PAGE12PAGE6《jQuery前端开发任务驱动教程》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称第3章jQuery实现页面交互（上）计划课时8课时教学引入在网页开发中,开发具有交互效果的页面可以提升用户的使用体验,增强页面的可用性可视性和吸引力。jQuery为开发者提供了许多便捷的方法，使得页面交互效果的开发更加简单和高效。本章将讲解如何使用jQuery实现页面交互。教学目标使学生掌握元素class属性操作，能够灵活应用操作元素class属性的方法使学生掌握元素过滤操作，能够灵活应用元素过滤方法使学生掌握浏览器事件，能够灵活应用常用的浏览器事件使学生掌握元素位置操作，能够灵活应用元素位置操作方法使学生掌握fadeTo()方法的使用方法，能够使用fadeTo()方法调整元素的不透明度使学生掌握元素内容操作，能够灵活应用元素内容操作的方法使学生掌握元素追加操作，能够灵活应用元素追加操作的方法使学生掌握Tab栏切换的实现方法，能够完成Tab栏切换的开发使学生掌握返回页面顶部的实现方法，能够完成返回页面顶部的开发使学生掌握高亮显示图像的实现方法，能够完成高亮显示图像的开发使学生掌握留言板的实现方法，能够完成留言板的开发教学重点元素class属性操作元素过滤操作浏览器事件元素位置操作fadeTo()方法元素内容操作元素追加操作教学难点元素过滤操作元素追加操作教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（元素class属性操作、元素过滤操作、任务3.1Tab栏切换）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课某在线教育公司正在开发一个IT教育网站，在开发过程中，需要实现Tab栏切换的页面交互效果，当用户单击Tab栏中的选项卡时，显示选项卡对应的内容。其中，Tab栏中的选项卡为学科名称，主要包括Java、大数据、Python、Web前端、Android、C/C++、PHP。本节课将学习元素class属性操作、元素过滤操作，并开发一个Tab栏切换效果。三、新课讲解知识点1-元素class属性操作教师通过PPT结合实际操作的方式讲解元素class属性操作。元素class属性操作的使用场景。列举jQuery中操作元素class属性的方法。addClass()removeClass()hasClass()toggleClass()通过代码演示元素class属性操作的方法的使用方法。知识点2-元素过滤操作教师通过PPT结合实际操作的方式讲解元素过滤操作。元素过滤操作的使用场景。列举jQuery中常用的元素过滤方法。eq()filter()is()has()slice()first()last()以filter()方法为例，演示如何在该方法中接收函数fn作为参数。知识点3-任务3.1Tab栏切换教师通过PPT结合实际操作的方式讲解任务3.1Tab栏切换。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第二课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。上机：（考察知识点为元素class属性操作、元素过滤操作、任务3.1Tab栏切换）形式：单独完成具体要求：开发一个Tab栏切换的页面交互效果，当用户单击Tab栏中的选项卡时，能够显示选项卡对应的内容。Tab栏中的选项卡为学科名称，主要包括Java、大数据、Python、Web前端、Android、C/C++、PHP。第三课时（浏览器事件、元素位置操作、任务3.2返回页面顶部）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课在网页开发中，当页面需要显示的内容较多时，通常会设计返回页面顶部的功能，该功能可以方便用户快速回到页面的顶部，从而使用户更加轻松地浏览网页。前端开发实习生小超发现他们团队中的某个项目页面很长，经常需要上下滚动，操作起来比较烦琐，于是小超提出了项目页面的优化建议：在页面右下角提供一个用于返回页面顶部的超链接，当向下滚动页面时，该超链接就会显示，单击该超链接即可立即返回页面顶部。本节课将讲解浏览器事件、元素位置操作，并开发一个返回页面顶部的效果。三、新课讲解知识点1-浏览器事件教师通过PPT结合实际操作的方式讲解浏览器事件。浏览器事件的使用场景。列举常用的浏览器事件。scrollresize以resize事件为例，演示浏览器事件的使用方法。知识点2-元素位置操作教师通过PPT结合实际操作的方式讲解元素位置操作。列举常用的元素位置操作方法。offsetscrollTopscrollLeft以scrollTop()方法和scrollLeft()方法为例，演示演示如何获取和设置元素相对滚动条顶部和左部的位置。知识点3-任务3.2返回页面顶部教师通过PPT结合实际操作的方式讲解任务3.2返回页面顶部。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第四课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习考察学生对知识点的掌握情况。上机：（考察知识点为浏览器事件、元素位置操作、任务3.2返回页面顶部）形式：单独完成具体要求：开发一个返回页面顶部的功能，在页面右下角提供一个用于返回页面顶部的超链接，当向下滚动页面时，该超链接就会显示。第五课时（fadeTo()方法、任务3.3高亮显示图像）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课为了提高学生的环保意识，倡导学生能够积极参与到环境保护中，某高校计划在学校官网中增加一个校园环保页面。在校园环保页面的开发过程中，负责人提出了要求：设计一个显示垃圾分类图像的区域，该区域能够同时显示可回收物图像、有害垃圾图像、厨余垃圾图像和其他垃圾图像；当鼠标指针移入某张图像时，其他图像半透明显示，从而使鼠标指针移人的图像高亮显示。本节课将学习fadeTo()方法，并开发一个高亮显示图像的效果。三、新课讲解知识点1-fadeTo()方法教师通过PPT结合实际操作的方式讲解fadeTo()方法。fadeTo()方法的作用。介绍fadeTo()方法的语法格式。通过代码演示fadeTo()方法的使用方法。知识点2-任务3.3高亮显示图像教师通过PPT结合实际操作的方式讲解任务3.3高亮显示图像。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第六课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习考察学生对知识点的掌握情况。上机：（考察知识点为fadeTo()方法、任务3.3高亮显示图像）形式：单独完成具体要求：设计一个能够展示垃圾分类的图像区域，该区域能够同时显示可回收物图像、有害垃圾图像、厨余垃圾图像和其他垃圾图像。当鼠标指针移入某张图像时，其他图像半透明显示，从而使鼠标指针移入的图像高亮显示。第七课时（元素内容操作、元素追加操作、任务3.4留言板）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过直接引入的方式导入新课在社区、博客等网站中，留言板功能被广泛应用。用户通过留言板可以分享个人观点和意见、提出问题、回答疑问等。这种交互性的功能可以使用户社区更活跃，提升用户的参与感。职场新人李明负责公司的前端页面开发工作，最近公司承接了一个公共服务机构的网站开发项目。这个网站旨在提供优质的公共服务,让用户不仅能够轻松地访问和获取所需信息还可以在网站中留言。项目经理安排李明为该网站开发留言板功能。本节课将讲解元素内容操作、元素追加操作，并开发一个留言板功能。三、新课讲解知识点1-元素内容操作教师通过PPT结合实际操作的方式讲解元素内容操作。元素内容操作的使用场景。列举jQuery中元素内容操作的方法。html()text()val()通过代码演示元素内容操作的方法的使用。知识点2-元素追加操作教师通过PPT结合实际操作的方式讲解元素追加操作。元素追加操作的使用场景。列举常用的元素追加方法。append()prepend()appendTo()prependTo()after()before()insertAfter()insertBefore()知识点3-任务3.4留言板教师通过PPT结合实际操作的方式讲解任务3.4留言板。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第八课时（上机练习）上机练习主要针对本章中需