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>。
浙公网安备 33010602011771号