📅 最后修改于: 2023-12-03 15:02:14.403000 🧑 作者: Mango
jQuery是一个非常流行的JavaScript框架，其中包含了许多方便的方法，可以用来获取和修改HTML元素的内容和属性。
DOM（文档对象模型）是一个页面的结构化表示，包括HTML元素，属性和文本。可以使用jQuery选择器来选择一个或多个DOM元素，并对其进行操作。
选择器可以按标签名、类、ID、属性等多个方式选择DOM元素。例如：
// 选择所有p标签
$("p")
// 选择类名为"myClass"的元素
$(".myClass")
// 选择ID为"myId"的元素
$("#myId")
// 选择有"data-value"属性的元素
$("[data-value]")
可以使用text或者html方法获取或设置一个元素的文本或HTML内容。例如：
// 获取第一个p标签的文本内容
$("p:first").text()
// 设置最后一个p标签的HTML内容
$("p:last").html("<strong>Hello, world!</strong>")
可以使用attr方法获取或设置一个元素的属性。例如：
// 获取第一张图片的src属性
$("img:first").attr("src")
// 设置最后一张图片的alt属性
$("img:last").attr("alt", "My image")
下面是一个完整的示例，演示了如何使用jQuery获取一个列表中每个链接的文本和URL。每次点击按钮，都会将结果添加到一个预设的<div>元素中。
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("#getLinks").click(function() {
$("a").each(function() {
var linkText = $(this).text();
var linkUrl = $(this).attr("href");
$("#results").append("<p>" + linkText + " - " + linkUrl + "</p>");
});
});
});
</script>
</head>
<body>
<h1>Links</h1>
<ul>
<li><a href="https://www.google.com">Google</a></li>
<li><a href="https://www.bing.com">Bing</a></li>
<li><a href="https://www.yahoo.com">Yahoo</a></li>
</ul>
<button id="getLinks">Get Links</button>
<div id="results"></div>
</body>
</html>
在该示例中，页面加载完成后会添加一个单击事件处理程序，该处理程序会遍历列表中的每个链接，获取文本和URL，然后将其添加到<div>元素中。
jQuery是一个非常强大的JavaScript框架，可以大大简化操作DOM元素的过程。本文介绍了如何使用jQuery选择DOM元素，获取和设置其内容和属性，并演示了一个完整的示例。