jQuery |获取span元素的文本(1)

📌 相关文章

📜 jQuery |获取span元素的文本(1)

📅 最后修改于: 2023-12-03 15:16:47.940000 🧑 作者: Mango

介绍如何使用jQuery获取span元素的文本

在前端开发中，我们经常需要操作DOM元素，而jQuery是一个广泛使用的JavaScript库，可以方便地操作HTML文档。在这篇文章中，我们将介绍如何使用jQuery获取span元素的文本。

步骤

引入jQuery

在使用jQuery之前，我们需要先引入它。可以通过以下方式来引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

在这里，我们使用了jQuery的CDN地址来引入它。如果你已经下载了jQuery文件，也可以使用本地文件的路径进行引入。

获取span元素

在HTML文档中，我们可以使用如下方式来创建一个span元素：

<span id="example">Hello World!</span>

这里我们给span元素添加了一个id属性，值为example。在jQuery中，我们可以通过id来选中这个元素，并获取它的文本内容。代码如下：

var text = $("#example").text();

这里的$符号是jQuery的简写，等价于jQuery或者document.querySelector。在这里，我们使用了id选择器来选中id为example的元素，然后使用text()函数来获取它的文本内容。text()函数可以获取元素中的纯文本内容，包括其子元素中的文本内容。

如果需要获取元素中的HTML内容，可以使用html()函数：

var html = $("#example").html();

与text()函数不同，html()函数返回的是HTML内容，包括标签和文本内容。

示例代码

下面是获取span元素文本的完整示例代码，供参考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery获取span元素的文本</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <span id="example">Hello World!</span>
    <script>
        // 获取span元素的文本内容
        var text = $("#example").text();
        console.log(text); // 输出：Hello World!

        // 获取span元素的HTML内容
        var html = $("#example").html();
        console.log(html); // 输出：<em>Hello</em> World!
    </script>
</body>
</html>

结论

本文介绍了如何使用jQuery获取span元素的文本内容。通过使用简单的代码示例，我们展示了获取纯文本内容和HTML内容的不同方法。作为一个强大的JavaScript库，jQuery可以在前端开发中提供许多方便的DOM操作方法。