jQuery前端开发任务驱动教程 教案-教学设计 第1章 初识jQuery.doc

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

PAGE12

PAGE2

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

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

第1章初识jQuery

计划课时

5课时

教学引入

jQuery提供了丰富的方法，使用这些方法可以简化JavaScript中常见的操作，如元素操作、事件操作、动画操作等。使用jQuery可以快速地实现网页和Web应用程序中的JavaScript交互效果，减少冗余代码，解决浏览器兼容问题。本章将对下载和引入jQuery以及jQuery的简单使用进行讲解。

教学目标

使学生了解什么是jQuery，能够描述jQuery的特点

使学生掌握VisualStudioCode编辑器的下载和安装方法，能够独立完成VisualStudioCode编辑器的下载和安装

使学生熟悉jQuery的主要功能，能够归纳jQuery的主要功能

使学生掌握$()函数的使用方法，能够灵活运用$()函数创建jQuery对象

使学生掌握jQuery对象的使用方法，能够取出jQuery对象中的元素

使学生掌握选择器的使用方法，能够灵活应用选择器获取元素

使学生掌握on()方法的使用方法，能够使用on()方法实现事件的注册

使学生掌握鼠标事件，能够注册鼠标事件

使学生掌握css()方法的使用方法，能够使用css()方法设置或获取元素样式

使学生掌握jQuery的下载和引入，能够独立完成jQuery的下载和引入

使学生掌握jQuery的简单使用，能够使用jQuery实现单击按钮改变诗句文本颜色的效果

教学重点

$()函数

jQuery对象

选择器

on()方法

鼠标事件

css()方法

教学难点

无

教学方式

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

教

学

过

程

第一课时

（什么是jQuery、VisualStudioCode编辑器、任务1.1下载和引入jQuery）

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

在某科技公司的网页开发中，为了确保跨浏览器兼容性，并提高开发效率、简化DOM操作，该科技公司的前端开发实习生小洋需要使用jQuery进行开发。在正式开发网页之前，小洋需要先从jQuery官方网站下载jQuery，并将其引人项目。

本节课将学习什么是jQuery和VisualStudioCode编辑器，并讲解如何下载和引入jQuery。

二、新课讲解

知识点1-什么是jQuery

教师通过PPT的方式讲解什么是jQuery。

什么是jQuery及其设计宗旨。

jQuery的6个特点。

jQuery1.x、jQuery2.x和jQuery3.x的区别。

知识点2-VisualStudioCode编辑器

教师通过PPT结合实际操作的方式讲解VisualStudioCode编辑器。

VisualStudioCode编辑器的特点。

下载和安装VSCode编辑器。

安装中文语言扩展。

安装LiveServer扩展。

VSCode编辑器的简单使用。

知识点3-任务1.1下载和引入jQuery

教师通过PPT结合实际操作的方式讲解下载和引入jQuery。

三、归纳总结

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

四、布置作业

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

第二课时（上机练习）

上机练习主要针对本章中需要重点掌握的知识点进行练习，通过上机练习考察学生对知识点的掌握情况。

上机：（考察知识点为VisualStudioCode编辑器、任务1.1下载和引入jQuery）

形式：单独完成

具体要求：

在Chrome浏览器中访问jQuery官方网站的下载页面，选择minified版本进行下载。

创建hello.html文件，在该文件中创建HTML5页面并引入jquery-3.6.4.min.js文件。

第三、四课时

（jQuery的主要功能、$()函数、jQuery对象、选择器、on()方法、鼠标事件、css()方法、任务1.2jQuery的简单使用）

一、复习巩固

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

二、通过直接引入的方式导入新课

上一节课已经讲解了jQuery的下载和引入，下面这节课将对jQuery的简单使用进行讲解。

本节课将学习jQuery的主要功能、$()函数、jQuery对象、选择器、on()方法、鼠标事件和css()方法，并运用jQuery设计一个古诗词里的“