jQuery |更改 span 元素的文本(1)

📌 相关文章

📜 jQuery |更改 span 元素的文本(1)

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

jQuery | 更改 span 元素的文本

在 Web 开发中，通常需要使用 JavaScript 对网页进行交互和动态更新。jQuery 是一种流行的 JavaScript 库，它提供了方便易用的 API，使得开发者可以更快速地操作网页元素。

在 jQuery 中，通过选择器获取元素，然后使用 API 来操作这些元素。本文将介绍如何使用 jQuery 更改 span 元素的文本。

步骤

首先，在 HTML 文件中定义一个 span 元素：
```
<span id="my-span">Hello world!</span>
```
注意，这个 span 元素有一个 id 属性，这个属性将用于在 jQuery 中选择这个元素。
在 JavaScript 文件中，使用 jQuery 的 text() 方法来更改这个 span 元素的文本：
```
$(document).ready(function() {
    $("#my-span").text("Hello jQuery!");
});
```
解释一下这段代码：
- $(document).ready(function() { ... }) 这个函数是 jQuery 用来等待页面加载完成后再执行的方法。
- $("#my-span") 使用选择器选择 id 为 "my-span" 的 span 元素。
- .text("Hello jQuery!") 使用 text() 方法设置这个元素的文本为 "Hello jQuery!"。
最后，在 HTML 文件中引入 jQuery 库和 JavaScript 文件：
```
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="path/to/your/javascript.js"></script>
```
这里我们使用了 jQuery 官方提供的 CDN。你也可以下载 jQuery 库并放在你的项目中。

完整代码

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery demo</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="path/to/your/javascript.js"></script>
  </head>
  <body>
    <span id="my-span">Hello world!</span>
  </body>
</html>

$(document).ready(function() {
    $("#my-span").text("Hello jQuery!");
});

结论

使用 jQuery 更改 span 元素的文本非常简单。通过选择器获取元素，然后使用 text() 方法更改文本即可。jQuery 还提供了其他常用的方法，如 html()、attr()、addClass() 等，可以帮助你更快速地操作网页元素。