jQuery网页特效设计基础教程-第3章-使用jQuery选择器-教案

1、第3章使用jQuery选择器课程名称jQuery网页特效设计基础教程项目名称使用jQuery选择器任务名称使用jQuery选择器课时5项目性质演示性 验证性 设计性 4综合性授课班级授课日期授课地点教学目标能力目标：.具备通过选择器快速定位元素的能力.具备使用选择器编写程序的能力知识目标：. 了解什么是jQuery选择器. 了解jQuery选择器的优势.掌握基本选择器的用法素质目标：.培养学生信息搜集能力.培养学生团结合作、互帮互助的能力教学内容.任务描述.任务展示与实现（1）在页面中通过选择器添加按钮、表单等（2）编程jQuery实现综合实例（2）学生动手操作.教师讲解本任务涉及的知识点.任

2、务小结教学重点jQuery的基本选择器jQuery选择器的基本语法编写jQuery脚本教学难点1.在jQuery中通过选择器快速定位元素教学准备.装有jQuery的电脑.教学课件PPT.教材：jQuery网页特效设计基础教程（慕课版）刘刚 人民邮电出版社作业设计1.应用jQuery实现表格隔行换色及鼠标指针指向行变色教学过程和教学内容与过程（教学内容、教学方法、组织形式、教学手段）织做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开 课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。蝴【课前说明】分别从jQuery概述，jQuer

3、y的应用领域、jQuery的特点、jQuery的开发工具以及jQuery的出错 类型、jQuery的调试方式、jQuery库等jQuery基础等知识点进行初步的了解。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目 标。课程内容一、什么是jQuery选择器？jQuery选择器是jQuery库中非常重要的部分之一。它支持网页开发者所熟知的CSS语法，能够 轻松快速地对页面进行设置。jQuery选择器是打开高效开发jQuery之门的钥匙。一个典型的jQuery 选择器的语法格式为：$（selector）. methodN ame（）;二、jQuery选择器

4、的优势与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在 以下3个方面。代码更简单。支持CSS1到CSS3选择器。完善的处理机制。三、jQuery基本选择器jQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选 择器。案例：1.应用jQuery实现获取超级链接地址(1)创建一个名称为index.html的文件，在该文件中应用DIV+CSS样式进行页面布局，并添 加4个超级链接，关键代码如下：-JX | a href=indexl.html class=main登录 | 注册 | a href=index3.h

5、tml class=main,找回密码(2)在index.html文件的标记中应用下面的语句引入jQuery库。(3)在引入jQuery库的代码下方编写jQuery代码，实现绑定鼠标指针移到超级链接事件，通 过元素选择器和类名选择器获取超链接地址。具体代码如下：$(document).ready(function() $(,a.main,).mouseover(function()/绑定鼠标指针移到超级链接事件var url= $(this).attr(,href,); / 超链接地址alert(超链接地址是：+url);)；)；懒综合实例：表格隔行换色及鼠标指针指向行变色实VII对于一些清单型数据，通常是利用表格展示到页面中。如果数据比较多，很容易看串行。这时， 可以为表格添加隔行换色及鼠标指针指向行变色功能。本实例的需求主要有以下两点。(1)在页面中创建一个表格，令表格奇数行显示黄色，偶数行显示浅蓝色；(2)当鼠标指针指向某一行时，该行颜色随之改变。总结通过学习，学生能够掌握jQuery选择器的基本特点、优势以及jQuery基本选择器的编写方法。诏介本节课主要运用案例教学法，通过对jQuery选择器概念的深入理解，掌握jQuery选择器的特点 及优势，深入探讨jQuery选择器编程的方法，通过实例的方法加强对jQuery选择器编程方法的掌握， 达到能够独立熟练