《JavaScript与jQuery网页前端开发与设计-第2版》教案
第7章jQuery选择器与过滤器
一、教学目标：
理解jQuery选择器和过滤器的作用；
掌握jQuery选择器的常见用法；
掌握jQuery过滤器的常见用法。
二、教学重点和难点：
重点：jQuery选择器的用法；
难点：jQuery过滤器的用法。
三、教学方法与手段：
采取互动式教学方法，理论教学使用多媒体投影教室。
四、课程简介：
本章主要介绍jQuery选择器与jQuery过滤器的相关知识。jQuery选择器包括基础选择器、属性选择器、表单选择器、层次选择器以及CSS选择器；jQuery过滤器包括基础过滤器、子元素过滤器、内容过滤器和可见性过滤器。
五、教学基本内容：
7.1jQuery选择器
jQuery选择器可用于快速选定需要的HTML元素，并为其进行后续处理。jQuery选择器的部分语法规则来自于CSS选择器，加上其他功能模块形成了jQuery特有的选择匹配元素工具，简化了用户使用JavaScript选择和操作元素的复杂度。
7.1.1基础选择器(BasicSelector)
jQuery基础选择器(BasicSelector)的语法规则基本和CSS选择器相同，可以通过指定HTML元素的标签名称、类名称或ID名称对元素进行筛选定位。
常见用法如表7-1所示。
表7-1jQuery基础选择器常见用法示例
选择器
描述
用法示例
示例描述
*
用于选择所有元素
$(*)
选择文档中的所有元素
element
元素选择器，用于选择指定标签名称的元素。
$(p)
选择文档中所有的段落标签p元素
#id
ID选择器，用于选择指定id的元素。
$(#test)
选择文档中id=test的元素
.class
类选择器，用于选择所有具有同一个指定class的元素。
$(.style01)
选择文档中所有class=style01的元素
selector1,selector2,
...
selectorN
多重选择器，用于选择符合条件的所有结果。
$(p,h1,div)
选择文档中所有段落元素p、标题元素h1和块元素div
1. 全局选择器
全局选择器用于选择文档中所有的元素。其语法结构如下：
$(*)
全局选择器会遍历文档中所有的元素标签，甚至包括首部标签head及其内部的meta、script等，运行速度较慢。
【例7-1】jQuery全局选择器的使用
【代码说明】
本示例使用了jQuery全局选择器将所有的HTML元素都设置为带有5像素宽的红色实线边框样式。由图可见，页面中的所有内容都显示了红色边框。由于全局选择器也包括了body、head等通常不在页面具体显示的元素，因此页面中的红色边框个数大于可见元素个数。
2. 元素选择器
元素选择器用于选择所有指定标签名称的元素。其语法结构如下：
$(element)
这里的element在使用时需要换成真正的元素标签名称。例如，$(h1)表示选中所有h1标题元素。使用元素选择器时，jQuery会调用JavaScript中的原生方法getElementsByTagName()来获取指定的元素。该方法化简了原先JavaScript的代码量。
【例7-2】jQuery元素选择器的使用
【代码说明】
本示例包含了区域元素div与段落元素p各两个，并在CSS内部样式表中为其设置统一样式：宽和高均为100像素，向左浮动，各边内外边距均为10像素，带有1像素宽的灰色实线边框。
使用jQuery元素选择器选择所有的段落元素p并将其设置为带有5像素宽的红色实线边框样式。由图可见，只有p元素的样式被更改，div元素没有受到任何影响。
3. ID选择器
ID选择器用于选择指定ID名称的单个元素。其语法结构如下：
$(#ID)
这里的ID在使用时需要换成元素真正的ID名称。例如，$(#test)表示选中id=test的元素。使用ID选择器时，jQuery会调用JavaScript中的原生方法getElementById()来获取指定ID名称的元素。
ID选择器也可以和元素选择器配合使用，例如：
$(p#test01)
表示选择id=test01的段落元素p。
【例7-3】jQueryID选择器的使用
4. 类选择器
类选择器用于筛选出具有同一个class属性值的所有元素。其语法结构如下：
$(.class)
这里的class在使用时需要换成真正的类名称。例如，$(.box)表示选择所有class=box的元素。如果一个元素包含了多个类，只要其中任意一个类符合条件即可被选中。使用类选择器时，jQuery会调用JavaScript中的原生方法getElementsByClassName()来获取指定的元素。
类选择器也可