📅 最后修改于: 2023-12-03 15:06:47.999000 🧑 作者: Mango
jQuery 是一个流行的 JavaScript 库，用于简化 HTML 页面上的 JavaScript 编程。使用 jQuery，您可以更轻松地选择和操作HTML 元素。在本文中，我们将向您展示如何使用 jQuery 更改 HTML。
在使用 jQuery 之前，需要首先将其添加到 HTML 页面中。您可以使用以下两种方式之一将 jQuery 添加到您的页面中：
从 jQuery 官方站点 (http://jquery.com/) 下载最新版的 jQuery(library/jquery.min.js)。然后，将以下代码行添加到 HTML 页面的 head 或 body 元素中，以链接到 jQuery 文件：
<script src="https://cdn.jsdelivr.net/jquery/3.5.1/jquery.min.js"></script>
您可以从 jQuery 官方站点 (http://jquery.com/) 下载最新版的 jQuery(library/jquery.min.js)。 然后，在 HTML 页面中的 head 或 body 元素中，使用以下代码行将文件链接到本地项目：
<script src="library/jquery.min.js"></script>
注：请注意，与 CDN 相比，使用本地文件夹可能会导致加载速度变慢，因为文件需要从本地磁盘中读取。
jQuery 允许使用 CSS 样式选择器轻松选择不同的 HTML 元素。当然，您也可以使用效用选择器来更轻松地选择元素。以下是一些基本的 jQuery 选择器：
元素选择器选择所有特定的 HTML 元素。例如：
$("p")
这将选中 HTML 页面上所有的段落元素（p 标记）。
ID 选择器选中与指定 ID 相匹配的元素。例如：
$("#myid")
这将选中 ID 为"myid"的HTML 元素。
类选择器选中与指定类相匹配的元素。例如：
$(".myclass")
这将选中使用"class=myclass"属性的所有HTML 元素。
jQuery 提供了很多方法来更改 HTML 元素的样式和内容。在本节中，我们将介绍其中一些最常见的方法：
要更改 HTML 元素的内容，可以使用 jQuery 的 text() 或 html() 方法。假设您有以下 HTML 元素：
<p id="myParagraph">This is my paragraph.</p>
要更改该段落的文本，请使用以下代码：
$("#myParagraph").text("This is my new paragraph.");
或者，如果您想使用 html 语法来改变文本，请使用以下代码：
$("#myParagraph").html("<b>This is my new paragraph.</b>");
这将使文本变为 "This is my new paragraph." 或 "This is my new paragraph."，具体取决于您使用的方法。
要显示或隐藏 HTML 元素，可以使用 jQuery 的 show() 或 hide() 方法。例如，要在单击按钮时隐藏一个段落，请使用以下代码：
<button onclick="$('#myParagraph').hide()">Click me</button>
<p id="myParagraph">This is my paragraph.</p>
这将创建一个按钮，单击该按钮将导致段落被隐藏。show() 方法将相反地显示元素。
更改 HTML 元素的属性，可以使用 jQuery 的 attr() 方法。例如，要将图像的 alt 属性更改为 "My Image"，请使用以下代码：
$("img").attr("alt", "My Image");
attr() 方法也可用于获取属性的值。例如，要获取图像的 alt 属性值，请使用以下代码：
var altValue = $("img").attr("alt");
这将将变量 altValue 设置为图像的 alt 属性值。
在本篇文章中，我们介绍了如何使用 jQuery 更改 HTML 元素。通过合适的选择器和方法，您可以轻松自如地更改 HTML 元素的内容、属性、样式和位置，快速地实现精彩的互动效果。