Educoder jQuery动画 第1关:jQuery——遍历DOM元素的祖先元素
任务描述
本关任务:用 jQuery
遍历 DOM
的祖先元素。效果如下:
相关知识
为了完成本关任务,你需要掌握:1.节点树,2.parent()
,3.parents()
。
节点树
基本的html
结构如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点树</title>
</head>
<body>
<div>我是div</div>
<a href="#">我是链接</a>
</body>
</html>
把它转换成DOM
节点树的效果图如下:
说明:
-
每个
html
元素都是元素节点,html
元素内的文本是文本节点; -
在节点树中,顶端节点叫根节点,每个节点都有父节点(除了根节点)。这里
html
是根节点,<head>
的父节点是<html>
,<title>
的父节点是<head>
节点; -
一个节点可拥有任意数量的子节点。比如:
<body>
拥有子节点<a>
和<div>
,这里只是举例,<body>
还可拥有其他的节点; -
兄弟节点是拥有相同父节点的节点。比如:
<a>
和<div>
就是兄弟节点,因为它们拥有相同的父节点<body>
。
向上遍历DOM节点
基本的html
结构如下(CSS
已省略):
<div>div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
效果图如下:
parent()
如何给span
元素的父元素设置背景色呢?这里用parent()
获取父元素。代码如下:
$("span").parent().css("background", "lightgreen");
效果图如下:
从上面可以看出: parent()
会返回被选元素的直接父元素;
如果给span
元素的祖父元素设置背景色呢?利用jQuery
链式调用的特点,再加一个parent()
就可以了。代码如下:
$("span").parent().parent().css("background","orange");
效果图如下:
如果给span
元素的所有祖先元素设置背景色呢? 这里用parents()
来实现,代码如下:
$("span").parents().css("background","orange");
效果如下:
从上面可以看出:parents()
会返回被选元素的所有祖先元素,直到根元素<html>
。