尽管现代 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() { ... }); 块中以防止出错。并将您的