详细介绍：jQuery 操作指南：从 DOM 操作到 AJAX

尽管现代 JavaScript 框架层出不穷，jQuery 仍然是 Web 开发中一个强大且极其有用的工具。它简洁的语法和出色的跨浏览器兼容性，使其成为快速为网页添加动态功能的绝佳选择。本指南将引导您全面了解 jQuery 的核心操作，从创建和操纵元素，到处理事件和执行异步 API 调用。

让我们开始吧！

准备工作

在开始之前，请确保您已经在 HTML 文件中引入了 jQuery 库。您可以下载它，或直接链接到 CDN：

jQuery 指南
/* 示例的基本样式 */
body { font-family: sans-serif; padding: 20px; }
.container, .box { border: 1px solid #ccc; padding: 15px; margin-top: 10px; }
.highlight { background-color: #fffbe6; }
jQuery 示例
我是原始内容！
// 你的 jQuery 代码将写在这里

---

1. 创建和添加元素

动态添加内容是交互式网页的基石。jQuery 使这个过程变得异常简单。

第一步：在内存中创建元素

要创建一个新元素，只需将其 HTML 结构包裹在 $() 函数中。这将创建一个尚未附加到页面的 jQuery 对象。

// 创建一个新的  元素
var newHeader = $("我是一个全新的标题！");

第二步：将元素添加到 DOM

jQuery 提供了多种直观的方法，可以精确地将新元素放置到您想要的位置。

在元素内部添加

• prepend(): 在所选元素的开头插入内容。

• append(): 在所选元素的末尾插入内容。

// 获取容器元素
var container = $("#manipulate-container");
// 在容器内部添加元素
container.prepend("-- Prepend: 我在最前面！ --");
container.append("-- Append: 我在最后面！ --");

在元素外部添加（作为兄弟节点）

• before(): 在所选元素之前插入内容。

• after(): 在所选元素之后插入内容。

// 在容器外部添加元素
container.before("-- Before: 我在容器上方。 --");
container.after("-- After: 我在容器下方。 --");

此外，还有像 appendTo() 和 prependTo() 这样的反向方法，在链式调用中非常有用：

$("我被一次性创建并添加了！").appendTo(container);

---

2. 删除和清空元素

与添加元素同样重要的是，要学会如何干净地移除它们。

• remove(): 将所选元素及其所有子元素从 DOM 中完全移除。

• empty(): 移除所选元素的所有子元素，但保留该元素本身。

让我们用下面的 HTML 来演示：

你可以将我完全移除。
你可以清空我的父元素。
我也会被一并移除。

$("#remove-btn").on("click", function() {
$(".removable").remove();
});
$("#empty-btn").on("click", function() {
$(".clearable").empty();
});

---

3. 遍历和查找元素

jQuery 在导航 DOM 树方面表现出色。一旦选中一个元素，您就可以轻松地找到相关的其他元素。

让我们使用以下 HTML 结构进行遍历示例：

项目 1
项目 2
子项目 2.1
项目 3
项目 4

使用 .each() 迭代

要对一组元素集合执行操作，.each() 是您的首选方法。

$("ul.nav-list > li").each(function(index, element) {
// 'index' 是索引号 (0, 1, 2...)
// 'element' 是原生的 DOM 元素
// 重要：要使用 jQuery 方法，必须先将原生元素包装起来
var jqElement = $(element);
console.log(`索引 ${index}: 文本是 "${jqElement.text().trim()}"`);
});

重点提示： 最常见的错误是试图在原生 element 上调用 jQuery 方法（如 .text()）。请始终记得先用 $(element) 将其包装起来！

DOM 遍历方法

类别	方法	描述
向下查找	.find(selector), .children(selector)	查找后代元素（任何层级）或直接子元素（仅下一级）。
向上查找	.parent(), .parents(selector)	查找直接父元素或所有祖先元素。
同级查找	.siblings(), .next(), .prev()	查找所有兄弟节点，或紧邻的上一个/下一个兄弟节点。
筛选	.first(), .last(), .eq(index)	筛选集合，获取第一个、最后一个或指定索引的元素。

var activeItem = $(".nav-list .active");
// 在活动项中查找嵌套的 ul
var sublist = activeItem.find("ul");
console.log("找到子列表:", sublist.length > 0); // true
// 获取活动项的所有兄弟节点
var siblings = activeItem.siblings();
siblings.css("border", "1px dotted blue"); // 高亮显示 项目 1, 3, 4
// 获取活动项的直接父元素
var parentList = activeItem.parent();
parentList.css("background-color", "#f0f0f0");

---

4. 精通事件处理

jQuery 简化了事件处理，屏蔽了浏览器的不一致性。处理事件最现代、最通用的方法是 .on()。

基本的点击事件

点我！

$("#main-btn").on("click", function() {
alert("按钮被点击了！");
});

绑定多个事件

您可以通过多种方式绑定多个事件。

1. 多个事件，同一个处理函数（使用空格分隔的字符串）

$("#main-btn").on("mouseenter mouseleave", function() {
// 这个函数在鼠标悬停进入和离开时都会运行
$(this).toggleClass("highlight");
});

2. 多个事件，不同的处理函数（推荐）（使用对象映射）

这是在单个元素上管理多个事件的最清晰的方式。

$("#main-btn").on({
click: function() {
console.log("被点击了！");
},
mouseenter: function() {
$(this).css("background-color", "lightblue");
},
mouseleave: function() {
$(this).css("background-color", ""); // 恢复默认样式
}
});

---

5. 在页面加载完成后运行代码

一个至关重要的概念是，要确保您的代码在 DOM 完全加载之前不会运行。如果脚本试图查找一个尚未渲染的元素，它将会失败。jQuery 的 ready 事件完美地解决了这个问题。

标准语法：

$(document).ready(function() {
// 所有与 DOM 交互的 jQuery 代码都应该放在这里。
console.log("DOM 已完全加载，可以开始操作了！");
});

简写语法（通用）：

$(function() {
// 这是 ready 事件的首选、简洁写法。
console.log("DOM 已就绪！");
// 把你的所有代码都放在这里。
});

最佳实践： 始终将您的 jQuery 代码包裹在 $(function() { ... }); 块中以防止出错。并将您的 <script> 标签放在 </body> 标签之前，以获得最佳的页面加载性能。

---

6. 理解鼠标事件与事件冒泡

jQuery 提供了两对功能相似的鼠标进入/离开事件。它们的主要区别在于事件冒泡（Event Bubbling）。

• mouseenter / mouseleave: 不冒泡。它们仅在光标进入或离开绑定的元素本身时触发，会忽略其子元素。

• mouseover / mouseout: 会冒泡。当光标进入/离开绑定的元素或其任何子元素时，它们都会触发。

让我们通过一个实例看看它们的区别：

父元素
子元素

// 使用 mouseenter/mouseleave (不冒泡)
$("#parent-box").on("mouseenter", function() {
console.log("--- 鼠标进入了父元素 ---"); // 只在进入父元素时触发一次
});
// 使用 mouseover/mouseout (有冒泡)
$("#parent-box").on("mouseover", function() {
console.log("鼠标在父元素内的某个元素上"); // 进入父元素时触发，进入子元素时再次触发
});

当您测试这段代码时，会发现 mouseenter 只触发一次，而当光标移入子元素时，mouseover 会触发两次。请根据您的具体需求选择合适的事件！

---

7. 使用 AJAX 让页面焕发活力

AJAX（异步JavaScript和XML）技术允许您在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。jQuery 的 $.ajax() 方法使这一切变得异常简单。

通过 AJAX 加载数据

$.ajax() 方法接收一个配置对象作为参数。其中最重要的属性是：

• url: 您要请求的服务器地址。

• type: HTTP 请求方法（如 "GET", "POST" 等）。

• data: 要发送到服务器的数据（用于 POST 请求）。

• success: 请求成功后执行的回调函数。它会接收服务器返回的数据作为参数。

• error: 请求失败时执行的回调函数。

$(function() {
$("#load-data-btn").on("click", function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts/1", // 一个用于测试的免费公共 API
type: "GET",
// 当数据成功接收时，这个函数将会运行
success: function(response) {
console.log("请求成功!", response);
var content = `${response.title}${response.body}`;
$("#ajax-result").html(content);
},
// 如果请求失败，这个函数将会运行
error: function(xhr, status, error) {
console.error("AJAX 错误:", status, error);
$("#ajax-result").html("抱歉，无法加载数据。");
}
});
});
});