《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同胞遍历指的是以指定元素为出发点，遍历与该元