3.3.2　jQuery的层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。元素的层次关系如图3.6所示。

图3.6　元素的层次关系示意图

jQuery的层次选择器如表3.2所示。

表3.2　jQuery的层次选择器

【例3-6】　jQuery的层次选择器应用示例。使用层次选择器，获取＜div＞元素中的全部＜span＞元素，并设置它们的内容。

在本例中，使用层次选择器＄（"div span"）获取了在＜div id="d1"＞区域中的两个元素，一个是＜div id="d2"＞区域下的子元素，另一个是＜ div id="d2"＞区域外的同级元素，但它们都是在一个＜div id="d1"＞元素下，也就是说在一个“家族”下。

程序运行结果如图3.7所示。

图3.7　层次选择器应用示例

【例3-7】　jQuery的层次选择器应用示例。控制HTML文档各级元素的样式。

本例中虽然没有定义id或class属性，但是并不影响页面的显示样式。程序的运行结果如图3.8所示。

图3.8　应用层次选择器控制HTML文档各级元素的样式