网络技术问题 | jQuery 测验 | 第 2 组 | 问题 1

欢迎参加本次网络技术问题的 jQuery 测验！以下是本测验的第一道题目。

问题描述

请问以下代码片段的输出结果是什么？

<div id="example"></div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('#example').addClass('highlight');
    });
</script>

问题分析

本题考查的是 jQuery 的基本用法和选择器的应用。

首先，这段代码分为两个部分。第一部分是用 HTML 创建一个空的 div 元素，并为其添加了一个 ID 为 example。第二部分是用 jQuery 选择器选择了 ID 为 example 的元素，并给它添加了一个类名为 highlight。

在第二部分的代码中，关键代码是 $('#example').addClass('highlight')。这行代码通过 $ 符号调用了 jQuery 库，并将其作为函数的参数传入一个 CSS 选择器 '#example'。因为该选择器以井号 # 开头，表示要选中的是 ID 属性为 example 的元素。然后，addClass 方法给这个元素添加了一个名为 highlight 的类，从而让它拥有了 highlight 类的样式。

在这段代码执行后，浏览器会渲染出一个空 div 元素，并为其添加了 highlight 类的样式，从而使其变为黄色背景色。

输出结果

本题的输出结果是一个黄色背景色的 div 元素。

参考链接

• jQuery文档
• W3Schools jQuery 教程