- 跨平台移动APP设计及应用
- 张思民
- 377字
- 2021-03-23 13:28:08
3.3.2 jQuery的层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和兄弟元素等,那么层次选择器是一个非常好的选择。元素的层次关系如图3.6所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00051001.jpg?sign=1739389630-hvyt73PAQWofOP2ExM3dJfm3mCdS6RC9-0-a0f444402d5193b4ffc731d3c2638c0d)
图3.6 元素的层次关系示意图
jQuery的层次选择器如表3.2所示。
表3.2 jQuery的层次选择器
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00051002.jpg?sign=1739389630-TQXEdRJQzDJXJJE0RK3MVgpGSYk9ZQLM-0-a4771380e879823bdbc5a9ef7950c43a)
【例3-6】 jQuery的层次选择器应用示例。使用层次选择器,获取<div>元素中的全部<span>元素,并设置它们的内容。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00051003.jpg?sign=1739389630-w74C0TvhkD0XAupmjGOUAw21qVJEXlWJ-0-2695ed663261dec0e9b8493cf18b59eb)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00052001.jpg?sign=1739389630-0eXphW0v8wkeJKoQT1CIlf5DnDMFH7hn-0-5b0aaaf60e12fa8c0a349cb33329ffc6)
在本例中,使用层次选择器$("div span")获取了在<div id="d1">区域中的两个元素,一个是<div id="d2">区域下的子元素,另一个是< div id="d2">区域外的同级元素,但它们都是在一个<div id="d1">元素下,也就是说在一个“家族”下。
程序运行结果如图3.7所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00052002.jpg?sign=1739389630-mM22mYOhh5g1bKpEz3L0RqfsnhuaYpV9-0-c31ac305ef824ac00b81d1f260c109d9)
图3.7 层次选择器应用示例
【例3-7】 jQuery的层次选择器应用示例。控制HTML文档各级元素的样式。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00052003.jpg?sign=1739389630-FQVPI5Z0f7nIjewo4RON0SMsfvGu9UlL-0-b61b4fb00e55cd6a436827f099ae9ffd)
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00053001.jpg?sign=1739389630-wL6QutkJRCiEyaK24SE0EqD2iSs76e2S-0-3e0df78c757ac0a7484fd41404970fad)
本例中虽然没有定义id或class属性,但是并不影响页面的显示样式。程序的运行结果如图3.8所示。
![](https://epubservercos.yuewen.com/DB5EE7/14615888805744006/epubprivate/OEBPS/Images/img00053002.jpg?sign=1739389630-vcqNRJIHR6KncqKo7DiXm3B16nFAekXo-0-9a92f12b9aaafd925c9b6e7ca0681791)
图3.8 应用层次选择器控制HTML文档各级元素的样式