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

博学谷——让IT教学更简单，让IT学习更有效PAGE12PAGE2《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设计一个古诗词里的“一带一路”网页。三、新课讲解知识点1-jQuery的主要功能教师通过PPT讲解jQuery的主要功能。选择元素。列举jQuery中常用的选择器。基本选择器层次选择器筛选选择器属性选择器子元素选择器表单选择器元素操作。列举jQuery中常用的元素操作。元素遍历操作元素内容操作元素样式操作元素属性操作元素查找操作元素过滤操作元素追加操作元素替换操作元素删除操作元素复制操作事件操作jQuery简化了JavaScript中的事件操作，通过调用事件操作方法即可实现事件的处理。jQuery中常用的事件操作方法有on()、off()、trigger()、triggerHandler()等。动画操作列举jQuery中常用的动画类型。显示和隐藏滑动淡入和淡出自定义动画停止动画Ajax操作Ajax用于实现浏览器与服务器进行异步数据交互的功能。jQuery提供了一些方法用于简化JavaScript中的Ajax操作，常用的Ajax操作方法有$.ajax()、$.get()、$.post()等。知识点2-$()函数教师通过PPT讲解$()函数。介绍$()函数及其参数。通过代码演示$()函数的使用。知识点3-jQuery对象教师通过PPT结合实际操作的方式讲解jQuery对象。介绍jQuery对象的两种语法格式。通过代码演示jQuery对象的使用方法。知识点4-选择器教师通过PPT结合实际操作的方式讲解选择器。介绍使用jQuery的选择器获取元素的语法格式。介绍基本选择器。列举jQuery中常用的基本选择器。#id*.classelementselector1,selector2,…演示基本选择器的使用方法。介绍层次选择器。列举jQuery中常用的层次选择器。parent>childselectorselector1prev+nextprev~siblings演示层次选择器的使用方法。知识点5-on()方法教师通过PPT结合实际操作的方式讲解on()方法。介绍为什么需要使用事件以及什么是事件。on()方法注册事件的语法格式。对on()方法中的参数events、selector、data和handler进行解释。eventsselectordatahandler通过代码演示如何使用on()方法注册click事件。知识点6-鼠标事件教师通过PPT结合实际操作的方式讲解鼠标事件。介绍鼠标事件的使用场景。列举一些常用的鼠标事件类型。mousemovemouseovermouseoutmouseentermouseleaveclickdblclickmousedownmouseup以click事件和mouseenter事件为例演示鼠标事件的使用。知识点7-css()方法教师通过PPT结合实际操作的方式讲解css()方法。介绍css()方法的使用场景。css()方法的具体用法和说明。css(propertyName)css(propertyName,value)css(properties)通过代码演示如何使用css()方法操作元素的样式。知识点8-任务1.2jQuery的简单使用教师通过PPT结合实际操作的方式讲解任务1.2jQuery的简单使用。四、归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。五、布置作业教师通过高校教辅平台（）布置本节课的作业以及下节课的预习内容。第五课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习考察学生对知识点的掌握情况。上机：（考察知识点为$()函数、jQuery对象、选择器、on()方法、鼠标事件、css()方法、任务1.2jQuery的简单使用）形式：单独完成具体要求