本关任务:用 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>
;
基本的html结构如下(CSS已省略):
<div>div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
效果图如下:
如何给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>
。
在右侧编辑器Begin
至End
之间填充代码,运用本关学到的方法实现下面的效果。要求如下:
- 本关操作的元素是
p
元素; - 设置
div
元素的背景色为#fff
; - 设置
body
元素的背景色为#ccc
;
格式注意:
- 获取元素统一用类名获取;
- 统一用双引号
""
表示字符串;
效果如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.container{
width: 300px;
margin: 30px auto;
border: 2px solid #000;
}
.item{
font-size: 60px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="container">
<p class="item">
404
</p>
</div>
<script>
$(function(){
//------------ Begin -----------
$(".item").parents().css("background","#ccc");
$(".item").parent().css("background","#fff");
//------------ End --------------
})
</script>
</body>