第07章教案_jQuery选择器与过滤器.doc

《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()来获取指定的元素。

类选择器也可