jQuery网页特效设计基础教程（慕课版）（第2版）-教案 第3、4章 使用jQuery选择器、 使用jQuery操作DOM.docx
PAGE1
PAGE
第3章使用jQuery选择器
课程名称
jQuery网页特效设计基础教程
项目名称
使用jQuery选择器
任务名称
使用jQuery选择器
课时
5
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
知识目标
1.了解什么是jQuery的工厂函数。
2.了解什么是jQuery选择器。
3.掌握基本选择器的使用。
4.掌握层次选择器的使用。
5.掌握过滤选择器的使用。
6.掌握属性选择器的使用。
7.掌握表单选择器的使用。
8.了解混淆选择器的使用。
能力目标
1.能够熟练使用jQuery各种选择器的使用。
2.能够选择合适的选择器进行开发。
素质目标
1.培养学生探索精神的学习态度。
2.培养学生目标导向的工作态度。
教学内容
1.任务描述
2.任务展示与实现
（1）在页面中通过选择器添加按钮、表单等
（2）编程jQuery实现综合实例
（2）学生动手操作
3.教师讲解本任务涉及的知识点
4.任务小结
教学重点
1.jQuery的基本选择器
2.jQuery选择器的基本语法
3.编写jQuery脚本
教学难点
1.在jQuery中通过选择器快速定位元素
教学准备
1.装有jQuery的电脑
2.教学课件PPT
3.教材：《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社
作业设计
1．应用jQuery实现表格隔行换色及鼠标指针指向行变色
教学过程
教学
环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。
课程
说明
【课前说明】
分别从jQuery工厂函数，什么事jQuery选择器，选择器的优势，基本选择器，层次选择器，过滤选择器，属性选择器，表单选择器，混淆选择器等知识点进行初步的了解。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。
课程
内容
描述
一、什么是jQuery选择器？
jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法，能够轻松快速地对页面进行设置。jQuery选择器是打开高效开发jQuery之门的钥匙。一个典型的jQuery选择器的语法格式为：
$(selector).methodName();
二、jQuery选择器的优势
与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下3个方面。
?代码更简单。
?支持CSS1到CSS3选择器。
?完善的处理机制。
三、jQuery基本选择器
jQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。
案例：
应用jQuery实现获取超级链接地址
（1）创建一个名称为index.html的文件，在该文件中应用DIV+CSS样式进行页面布局，并添加4个超级链接，关键代码如下：
divstyle=float:right;text-align:right;
ahref=index.html首页/a
nbsp;|nbsp;ahref=index1.htmlclass=main登录/a
nbsp;|nbsp;ahref=index2.htmlclass=main注册/a
nbsp;|nbsp;ahref=index3.htmlclass=main找回密码/a
/div
（2）在index.html文件的head标记中应用下面的语句引入jQuery库。
scripttype=text/javascriptsrc=../js/jquery-3.6.4.min.js/script
（3）在引入jQuery库的代码下方编写jQuery代码，实现绑定鼠标指针移到超级链接事件，通过元素选择器和类名选择器获取超链接地址。具体代码如下：
scripttype=text/javascript
$(document).ready(function(){
$(a.main).mouseover(function(){ //绑定鼠标指针移到超级链接事件
varurl=$(this).attr(href); //超链接地址
alert(超链接地址是：+url);
});
});
/script
课堂
实训
综合实例：表格隔行换色及鼠标指针指向行变色
对于一些清单型数据，通常是利用表格展示到页面中。如果数