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

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

PAGE12

PAGE6

《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返回页面顶部）

一、复习巩固

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

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

在网页开发中，当页面需要显示的内容较多时，通常会设计返回页面顶部的功能，该功能可以方便用户快速回到页面的顶部，从而使用户更加轻松地浏览网页。

前端开发实习生小超发现他们团队中的某个项目页面很长，经常需要上下滚动，操作起来比较烦琐，于是小超提出了项目页面的优化建议：在页面右下角提供一