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文档各级元素的样式