《JavaScript前端开发案例教程》教学设计课程名称：JavaScript前端开发案例教程授课年级：年级授课学期：学年第一学期
教师姓名：某某老师年月日课题名称第11章jQuery计划学时8学时内容分析jQuery是一款优秀的JavaScript框架
库，它通过JavaScript的函数封装，简化了HTML与JavaScript之间的操作，使得DOM对象、事件处理、动画效果、Aj
ax等操作的实现语法更加简洁，同时提高了程序的开发效率，消除很多跨浏览器的兼容问题。本章将针对jQuery的使用进行详细讲解。教学
目标及基本要求掌握元素与节点的操作掌握事件与动画特效的实现掌握jQuery中插件机制的使用教学重点jQuery选择器、元素操作、节
点操作、事件、动画、Ajax教学难点元素筛选、事件绑定与切换、自定义动画、插件机制教学方式教学采用教师课堂讲授为主概念性知识点：提
出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。综合实战操作
：分析整体的设计思路和步骤，对具体操作进行上机演练。教学过程第一学时（什么是jQuery、下载jQuery、使用jQuery、jQ
uery对象）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）介绍jQuery在Web开发中的应用
，引出本次要学习的课程。jQuery的作用：简化JavaScript代码，提高开发效率。jQuery的流行：大部分网站都在使用，如
百度、Google等。（3）明确学习方向。理解什么是jQuery库。了解jQuery的优势和设计理念。掌握jQuery的下载与引入
。了解jQuery代码与JavaScript代码的区别。二、知识讲解什么是jQueryjQuery是一个用JavaScript编写
的库，相当于一个工具包（工具库）。列举jQuery的优势，提高开发效率，简化代码编写，解决浏览器兼容问题。下载jQuery查看jQ
uery官方网站，了解版本的发布情况。介绍1.x、2.x、3.x版本的区别。获取jQuery的下载。在网页中引入jQuery。使用
jQuery演示JavaScript原生代码实现创建新元素并追加到中。演示如何用jQuery来实现同样的效果。总结jQ
uery的宗旨，writeless，domore（写的更少，做的更多）。jQuery对象什么是jQuery对象：是对DOM对象
的一层包装。作用：通过自身提供的一系列快捷功能来简化DOM操作。基本语法：$(DOM对象)。包装结构验证：$(document)[
0]===document。三、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作
业。第二学时（基本选择器、层级选择器、基本过滤选择器、内容选择器、可见性选择器、属性选择器、子元素选择器、表单选择器、元素遍历）一
、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。
理解jQuery选择器的作用和设计思想。掌握常用选择器的使用。掌握元素的遍历操作。二、知识讲解什么是jQuery选择器作用：语法类
似CSS选择器，轻松获取元素。分类：基本选择器、层级选择器、基本过滤选择器、内容选择器、可见性选择器、属性选择器、子元素选择器和表
单选择器。基本选择器介绍常用的基本选择器。演示基本选择器的使用。在控制台中查看选择器获取对象的结果。查看返回的jQuery对象的基
本结构。层级选择器讲解层级的概念，列举层级选择器的使用。通过代码演示用层级选择器获取元素。在控制台中查看层级选择器获取元素的结果。
基本过滤选择器讲解基本过滤选择器的概念。列举常用的基本过滤选择器。通过代码演示基本过滤选择器的使用。在控制台中查看基本过滤选择器的
返回结果。内容选择器讲解内容选择器的作用。列举常用的内容选择器。通过代码演示内容选择器的使用。在控制台中查看内容选择器的返回结果。
可见性选择器讲解可见性选择器的作用。列举常用的可见性选择器。通过代码演示可见性选择器的使用。属性选择器讲解属性选择器的作用。列举常
用的属性选择器。通过代码演示属性选择器的使用。子元素选择器讲解子元素选择器的作用。列举常用的子元素选择器。通过代码演示子元素选择器
的使用。表单选择器讲解表单选择器的作用。列举常用的表单选择器。通过代码演示表单选择器的使用。元素遍历分析需求，什么情况下需要对元素
进行遍历。利用jQuery提供的each()方法实现元素的遍历。获取当前遍历的索引和元素对象。三、知识巩固（1）回顾上课前的学习
目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第三学时（元素内容、元素样式、元素筛选、元素属性、案例：折叠菜单
）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方
向。掌握元素内容操作常用方法。掌握元素样式操作常用方法。掌握元素筛选操作常用方法。掌握元素属性操作常用方法。二、知识讲解元素内容列
举jQuery中常用的元素内容操作方法。通过代码演示元素内容操作方法的使用。对比html()方法和text()方法的区别。元素样式
列举jQuery中常用的元素样式操作方法。通过代码演示元素样式操作方法的使用。对比css()方法获取宽度，与width()方法获取
宽度的区别。元素筛选列举jQuery中常用的元素筛选方法。通过代码演示元素筛选操作方法的使用。对比使用元素筛选方法，和直接通过选择
器进行筛选的区别，分析各自适合的应用场景。元素属性——基本属性操作列举jQuery中常用的基本属性操作方法。通过代码演示基本属性操
作方法的使用。注意对比attr()方法与prop()方法的区别。元素属性——class属性操作除了用attr()可以操作class
属性，jQuery还提供了专门操作class属性的方法。列举常用的class属性操作方法。演示class的追加、移除、切换，以及判
断操作。三、【案例】折叠菜单案例展示演示案例完成后的效果。分析案例的实现原理。代码实现编写HTML页面，实现折叠菜单的基本结构和样
式。为页面中的元素添加事件。利用选择器、元素查找和样式操作，实现折叠菜单功能。四、知识巩固（1）回顾上课前的学习目标，对本节课知
识点进行总结。（2）使用博学谷系统下发课后作业。第四学时（节点追加、节点替换、节点删除、节点复制、案例：左移与右移）一、回顾上节
课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握节点追
加操作。掌握节点替换操作。掌握节点删除操作。掌握节点复制操作。掌握左移与右移案例的开发。二、知识讲解节点追加讲解节点追加方法的应用
场景。分类列举父子节点与兄弟节点的追加方法。对比append()与appendTo()、after()与insertAfter()
的区别。通过代码演示这些方法的使用。节点替换讲解节点替换方法的应用场景。通过代码演示节点替换方法的使用。对比replaceWith
()与replaceAll()方法的区别。节点删除讲解节点删除方法的应用场景。通过代码演示节点删除方法的使用。对比empty()、
remove()和detach()方法的区别。节点复制讲解节点复制方法的应用场景。对比clone()方法添加设置参数true与省略
参数的区别。三、【案例】左移与右移案例分析演示案例完成后的效果。分析案例的使用场景，如权限的增加与移除。代码实现编写HTML页面，
在页面中准备两个多选的select列表，和4个用来移动列表项的按钮。为按钮添加事件，根据实际需求完成列表项的移动操作。实现列表的移
动选中项和全部移动效果。四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第五
学时（常用事件、页面加载事件、事件绑定与切换、案例：手风琴效果）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答
疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握常用动画的使用。掌握jQuery滑动特效、淡入淡出特效的实现
。二、知识讲解常用事件回顾JavaScript的事件操作。分类列举jQuery的常用事件方法，如表单事件、键盘事件、鼠标事件、浏览
器事件。通过代码演示jQuery事件在开发中的使用。实现文本框的获取与失去焦点。实现键盘控制块的移动。实现鼠标移入移出时
改变背景色。页面加载事件对比JavaScript页面加载事件，与jQuery页面加载事件的区别。讲解jQuery实现页面加载事件的
3种语法。事件绑定与切换回顾JavaScript事件监听代码，演示jQuery的事件绑定与切换。实现事件的绑定与取消绑定。实现绑定
单次事件。实现多个事件绑定同一个函数。实现多个事件绑定不同的函数。为以后创建的元素委派事件。实现鼠标移入移出与事件切换。三、【案例
】手风琴效果案例分析展示手风琴的页面效果。分析案例完成后的效果，思考实现原理。代码实现编写HTML页面，准备用于显示的图片。获取当
前元素的兄弟元素，计算宽度。通过控制元素的宽度，实现图片的展开与收起效果。四、知识巩固（1）回顾上课前的学习目标，对本节课知识点
进行总结。（2）使用博学谷系统下发课后作业。第六学时（常用动画、自定义动画、案例：无缝轮播图）一、回顾上节课内容（1）对上节课布
置的作业以及学生提出的问题进行答疑解惑。（2）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握常用动画的使用。掌握jQue
ry滑动特效、淡入淡出特效的实现。掌握无缝轮播图案例的开发。二、知识讲解常用动画演示jQuery动画的呈现效果。列举基本特效、滑动
特效、淡入淡出特效的相关方法。通过案例演示色块的淡入淡出效果，练习jQuery动画的使用。自定义动画列举与自定义动画相关的方法。演
示自定义动画的实现。演示动画队列，实现连续的多种动画效果。三、【案例】无缝轮播图案例展示演示无缝轮播图的实现效果。分析无缝轮播图的
原理。演示轮播图的手动切换，通过底部小圆点和左右箭头进行切换。代码实现在页面中准备5张图片，和5个小圆点用来切换。在页面中添加左右
箭头，在鼠标移入图片时显示箭头。将实现轮播图的代码封装到一个单独的文件中。实现图片的无缝切换，将第1张图片连接到最后1张图片后面。
实现图片自动切换，利用定时器控制图片自动切换的间隔时间。自动切换图片，控制CSS样式中的left，来让图片显示出来。控制小圆点的显
示状态，实现小圆点跟随图片进行切换。当鼠标移入到图片中时，暂停自动播放。移出时，开始自动播放。四、知识巩固（1）回顾上课前的学习
目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第七学时（jQuery操作Ajax、自定义插件、jQuery插件
库、jQueryUI、案例：自定义全选与反选插件）一、回顾上节课内容（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2
）回顾上节课内容，引出本节课主题。（3）明确学习方向。掌握jQuery操作Ajax的基本代码。掌握自定义jQuery插件的代码。掌
握如何从jQuery插件库获取插件。掌握jQueryUI的使用。掌握案例自定义全选与反选插件的实现。二、知识讲解jQuery操作
Ajax回顾传统Ajax的实现方法。列举jQuery提供的常用的Ajax操作方法。注意底层方法$.ajax()与$.get()、$
.post()方法的区别。演示$.get()、$.post()方法的使用。讲解$.ajax()方法，列举常用底层应用选项的设置。A
jax操作的其他方法列举Ajax操作的辅助方法。通过代码演示如何利用辅助方法序列化对象来进行操作。列举Ajax操作相关的事件。通过
代码演示各个事件处理的先后顺序。针对常用事件，讲解应用场景。自定义插件思考什么是插件，插件机制的优势。讲解jQuery插件的基本语
法。讲解jQuery.fn的作用。演示封装单个方法和封装多个方法的代码。讲解如何定义全局函数插件。演示全局函数插件的作用。讲解如何
实现自定义选择器的插件。演示自定义选择器插件的代码实现。jQuery插件库打开jQuery插件库的官方网站，查看jQuery提供的
插件库。讲解如何从jQuery插件库获取插件的下载。jQueryUI介绍什么是jQueryUI，jQueryUI在开发中的应
用。从jQueryUI官方网站获取jQueryUI。查看jQueryUI的示例文件。参考示例文件，实现在自己的网页中引入jQ
ueryUI日历插件。自定义日历的显示样式，和语言文字。将自定义的配置保存到一个单独的配置文件中，方便直接引用。三、【案例】自定义全选与反选插件案例分析演示案例完成后的效果。演示完成的插件的使用方法。代码实现编写HTML页面，准备基本的页面结构。引入JavaScript文件。按照jQuery封装插件的语法，完成基本结构。编写自定义插件，实现全选、全不选、反选功能。总结封装插件的优势。四、知识巩固（1）回顾上课前的学习目标，对本节课知识点进行总结。（2）使用博学谷系统下发课后作业。第八学时（上机练习）教师发放本章相关资料和素材，学生进行上机练习，以此检查学生对相关知识点的掌握情况。上机练习完成后将报告通过平台提交给老师。教学后记第3章面向对象（上）2 |
