第11章教案_jQuery遍历.doc

《JavaScript与jQuery网页前端开发与设计-第2版》教案

第11章jQuery遍历

一、教学目标：

了解什么是HTML家族树结构；

掌握jQuery后代遍历相关函数children()、find()的使用；

掌握jQuery同胞遍历相关函数siblings()、next()系列函数、prev()系列函数的使用；

掌握jQuery祖先遍历相关函数parent()、parents()、parentsUntil()的使用。

二、教学重点和难点：

重点：jQuery后代和同胞遍历相关函数的用法；

难点：jQuery祖先遍历相关函数的用法。

三、教学方法与手段：

采取互动式教学方法，理论教学使用多媒体投影教室。

四、课程简介：

jQuery遍历指的是在HTML页面上沿着某个指定元素节点位置进行移动，直到查找到需要的HTML元素为止。本章主要内容是jQuery遍历技术的应用，包括HTML家族树概念的介绍、jQuery后代遍历、同胞遍历以及祖先遍历的相关函数用法。

五、教学基本内容：

11.1HTML家族树简介

同一个HTML页面上的所有元素按照层次关系可以形成树状结构，这种结构称为家族树（FamilyTree）。最常见的遍历方式统称为树状遍历（TreeTraversal）。根据移动的层次方向可以分为向下移动（后代遍历）、水平移动（同胞遍历）和向上移动（祖先遍历）。其中后代遍历指的是元素的子、孙、曾孙元素等；同胞遍历指的是具有同一个父元素的其他元素；祖先遍历指的是元素的父、祖父、曾祖父元素等。

例如以下这段HTML代码：

div

ul

liitem01/li

liitem02/li

/ul

p

这是一个span段落元素/span

/p

/div

将上述代码转换为家族树结构关系，如图11-1所示。

图11-1HTML家族树结构图示例

元素关系解释如下：

div元素：是无序列表元素ul和段落元素p的父元素，同时也是其他所有元素的祖先元素。

ul元素：是两个列表选项元素li的父元素，也是div的子元素。与段落元素p互为同胞元素。

p元素：是span元素的父元素，也是div的子元素。与无序列表元素ul互为同胞元素。

li元素：是ul元素的子元素，同时也是div元素的后代。两个li元素互为同胞元素。

span元素：是p元素的子元素，同时也是div元素的后代。该元素没有同胞元素。

11.2jQuery后代遍历

jQuery后代遍历指的是以指定元素为出发点，遍历该元素内部包含的子、孙、曾孙等后代元素，直到全部查找完毕。常用的方法有：

children()：查找元素的直接子元素。

find()：查找元素的全部后代，直到查找到最后一层元素。

11.2.1jQuerychildren()

jQuerychildren()方法只能查找指定元素的第一层子元素，其语法结构如下：

.children([selector])

其中selector参数为可选内容，可以是任意jQuery选择器，用于进一步筛选需要匹配的子元素。如果不填写任何参数，则表示查找所有的子元素。例如：

$(p).children()

上述代码表示查找HTML页面上所有段落元素p的子元素。

如果加上参数，可以进一步匹配子元素。例如：

$(p).children(.style01)

上述代码表示在HTML页面上所有段落元素p中查找class=style01的子元素。

【例11-1】jQuery后代遍历children()方法的应用

以本章一开始介绍的家族树结构图（图11-1）为例，使用jQuerychildren()方法查找div元素的所有子元素。

11.2.2jQueryfind()

jQueryfind()方法可用于查找指定元素的所有后代元素，其语法结构如下：

.find(selector)

其中selector参数可以是任意jQuery选择器，用于进一步筛选需要匹配的子元素。例如：

$(p).find(span).css(border,1pxsolidred);

上述代码表示在段落元素p中找到所有的span元素，并为其设置1像素宽的红色实线边框。

selector参数位置也可以填入元素对象。例如上述代码可以改写为以下内容：

varspans=$(span);

$(p).find(spans).css(border,1pxsolidred);

修改后的代码运行效果完全相同。

【例11-2】jQuery后代遍历find()方法的应用

以本章一开始介绍的家族树结构图（图11-1）为例，使用jQueryfind()方法查找div元素的所有后代元素。

11.3jQuery同胞遍历

jQuery同胞遍历指的是以指定元素为出发点，遍历与该元