任务描述
本关任务：用
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>。
编程要求
在右侧编辑器Begin至End之间填充代码，运用本关学到的
方法实现下面的效果。要求如下:
本关操作的
元素是p
元素；
设置div
元素的背景色为#fff；
设置body
元素的背景色为#ccc。
格式注意：
获取
元素统一用类名获取；
统一用双引号""表示字符串。
效果如下：
测试说明
平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。
开始你的任务吧，祝你成功！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
jQuery 效果演示</title>
<style>
.orange-box {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<script src="https://code.
jquery.com/
jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="hide-btn">
隐藏</button>
<button id="show-btn">显示</button>
<button id="toggle-btn">切换</button>
<div class="orange-box"></div>
<script>
$(document).ready(function () {
// 点击
隐藏按钮
$("#hide-btn").click(function () {
$(".orange-box").hide("slow", function () {
alert("我
隐藏了");
});
});
// 点击显示按钮
$("#show-btn").click(function () {
$(".orange-box").show(1000, function () {
alert("我显示了");
});
});
// 点击切换按钮
$("#toggle-btn").click(function () {
$(".orange-box").toggle("fast", function () {
alert("
隐藏显示的切换");
});
});
});
</script>
</body>
</html>
本文介绍了如何使用jQuery库来隐藏HTML文档中的元素，通过一个简单的示例展示了如何选取并隐藏所有的元素，当按钮被点击时，元素将变为不可见。
订阅专栏 解锁全文
扫一扫
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
