尽管现代 JavaScript 框架层出不穷，jQuery 仍然是 Web 开发中一个强大且极其有用的工具。它简洁的语法和出色的跨浏览器兼容性，使其成为快速为网页添加动态功能的绝佳选择。本指南将引导您全面了解 jQuery 的核心操作，从创建和操纵元素，到处理事件和执行异步 API 调用。
让我们开始吧！
准备工作
在开始之前，请确保您已经在 HTML 文件中引入了 jQuery 库。您可以下载它，或直接链接到 CDN：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery 指南</title>
<style>
/* 示例的基本样式 */
body { font-family: sans-serif; padding: 20px; }
.container, .box { border: 1px solid #ccc; padding: 15px; margin-top: 10px; }
.highlight { background-color: #fffbe6; }
</style>
</head>
<body>
<h1>jQuery 示例</h1>
<div id="manipulate-container" class="container">
<h2>我是原始内容！</h2>
</div>
<!-- 我们将为其他部分添加更多 HTML -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 你的 jQuery 代码将写在这里
</script>
</body>
</html>
1. 创建和添加元素
动态添加内容是交互式网页的基石。jQuery 使这个过程变得异常简单。
第一步：在内存中创建元素
要创建一个新元素，只需将其 HTML 结构包裹在 $() 函数中。这将创建一个尚未附加到页面的 jQuery 对象。
// 创建一个新的 <h3> 元素
var newHeader = $("<h3>我是一个全新的标题！</h3>");
第二步：将元素添加到 DOM
jQuery 提供了多种直观的方法，可以精确地将新元素放置到您想要的位置。
在元素内部添加
prepend(): 在所选元素的开头插入内容。append(): 在所选元素的末尾插入内容。
// 获取容器元素
var container = $("#manipulate-container");
// 在容器内部添加元素
container.prepend("<p>-- Prepend: 我在最前面！ --</p>");
container.append("<p>-- Append: 我在最后面！ --</p>");
在元素外部添加（作为兄弟节点）
before(): 在所选元素之前插入内容。after(): 在所选元素之后插入内容。
// 在容器外部添加元素
container.before("<div class='highlight'>-- Before: 我在容器上方。 --</div>");
container.after("<div class='highlight'>-- After: 我在容器下方。 --</div>");
此外，还有像 appendTo() 和 prependTo() 这样的反向方法，在链式调用中非常有用：
$("<strong>我被一次性创建并添加了！</strong>").appendTo(container);
2. 删除和清空元素
与添加元素同样重要的是，要学会如何干净地移除它们。
remove(): 将所选元素及其所有子元素从 DOM 中完全移除。empty(): 移除所选元素的所有子元素，但保留该元素本身。
让我们用下面的 HTML 来演示：
<div id="removal-container" class="container">
<p class="removable">你可以将我完全移除。</p>
<div class="clearable">
<span>你可以清空我的父元素。</span>
<span>我也会被一并移除。</span>
</div>
</div>
<button id="remove-btn">移除段落</button>
<button id="empty-btn">清空 Div</button>
$("#remove-btn").on("click", function() {
$(".removable").remove();
});
$("#empty-btn").on("click", function() {
$(".clearable").empty();
});
3. 遍历和查找元素
jQuery 在导航 DOM 树方面表现出色。一旦选中一个元素，您就可以轻松地找到相关的其他元素。
让我们使用以下 HTML 结构进行遍历示例：
<ul class="nav-list">
<li>项目 1</li>
<li class="active">项目 2
<ul>
<li>子项目 2.1</li>
</ul>
</li>
<li>项目 3</li>
<li>项目 4</li>
</ul>
使用 .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()。
基本的点击事件
<button id="main-btn">点我！</button>
$("#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: 会冒泡。当光标进入/离开绑定的元素或其任何子元素时，它们都会触发。
让我们通过一个实例看看它们的区别：
<div id="parent-box" class="container">
父元素
<div id="child-box" class="box" style="background: #e7f5ff;">子元素</div>
</div>
// 使用 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() 方法使这一切变得异常简单。
<div id="ajax-result" class="container"></div>
<button id="load-data-btn">通过 AJAX 加载数据</button>
$.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 = `<h3>${response.title}</h3><p>${response.body}</p>`;
$("#ajax-result").html(content);
},
// 如果请求失败，这个函数将会运行
error: function(xhr, status, error) {
console.error("AJAX 错误:", status, error);
$("#ajax-result").html("<p>抱歉，无法加载数据。</p>");
}
});
});
});