在 Web 开发的世界里，JavaScript 是无可争议的基石，但直接使用原生 JavaScript（Vanilla JS）处理 DOM 操作、事件监听和异步请求时，我们往往会发现代码变得冗长且难以跨浏览器兼容。这正是 jQuery 诞生的理由——作为一个“写得少，做得多”的快速、小巧且功能丰富的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。
如果你刚开始接触前端，或者正在维护一个遗留项目，掌握如何在 HTML 页面中正确引入 jQuery 是至关重要的一步。在本文中，我们将深入探讨两种核心方法：下载本地库文件和使用内容分发网络（CDN）。我们不仅会学习“怎么做”，还会深入理解“为什么”，并通过实际的代码示例来验证我们的配置是否成功。
为什么选择 jQuery？
在正式开始之前，让我们简单回顾一下为什么尽管现代前端框架（如 React、Vue）层出不穷，jQuery 依然在许多项目中占有一席之地。首先，它的 API 设计非常人性化，比如使用 $ 符号作为选择器，让我们能像 CSS 选择器一样轻松地选取页面元素。其次，它完美处理了跨浏览器的兼容性问题，这意味着我们不需要为了适配不同版本的浏览器而编写大量的“Polyfill”代码。
要在我们的项目中享受这些便利，首先得让浏览器“认识”jQuery。这可以通过两种主要途径实现。
方法一：下载 jQuery 库并在本地引用
这种方法最稳健，特别适合需要离线开发的企业内部项目，或者你希望对加载的代码有完全控制权的场景。我们将 jQuery 文件下载到本地项目文件夹中，就像引用我们自己的 CSS 或 JS 文件一样引用它。
#### 1. 选择合适的版本
当我们访问官方网站下载页面时，通常会看到两个主要的版本选项，理解它们的区别对于我们的开发流程至关重要：
- 生产版本：这是一个经过压缩和优化的版本。代码中的空格、换行和注释都被移除了，变量名也被缩短。这使得文件体积非常小，加载速度极快。这是我们在项目正式上线时必须使用的版本。
- 开发版本：这是一个未压缩的、完全可读的版本。虽然体积较大，但方便我们在开发过程中阅读源码、调试错误或学习 jQuery 的内部实现逻辑。在开发阶段，我们建议使用这个版本。
#### 2. 下载并配置
具体的操作步骤非常简单：打开浏览器，访问 jQuery 官网，找到下载页面。在页面中，你会看到不同版本的下载链接。为了便于学习，请右键点击“Download the uncompressed, development jQuery”链接，选择“另存为…”。
重要提示：请务必将下载的文件保存到你 HTML 文件所在的目录中。保持文件结构的整洁是专业开发者的基本素养。例如，如果你的 HTML 在根目录，可以将 jQuery 文件也放在根目录，或者创建一个 js 文件夹专门存放第三方库。在本示例中，为了简化，我们假设它就在同级目录下。
#### 3. 在 HTML 中编写链接代码
一旦文件就位，我们就可以在 HTML 中通过 INLINECODE3e431d4f 标签引入它了。请记住，jQuery 通常依赖于 DOM（文档对象模型），因此我们习惯将 INLINECODEfee8f4f8 标签放在 INLINECODEb721bcb0 部分或者 INLINECODEd415778e 的底部。放在 INLINECODE5bf9c491 中时，如果要操作 DOM，通常需要包裹在 INLINECODE76f2e3f3 中，确保页面加载完毕后再执行代码。
jQuery 本地引入示例
// $(document).ready() 确保 DOM 完全加载后再执行代码
$(document).ready(function () {
console.log("jQuery 已成功加载并准备就绪！");
// 绑定按钮点击事件
$("button").click(function () {
// 修改 h2 标签的 HTML 内容
$("h2").html("操作成功！内容已更新。");
});
});
开发者测试平台
点击下方按钮测试 jQuery 是否工作。
在这个例子中，你可以看到当我们在代码中使用了 $ 函数时，浏览器并没有报错，这说明我们成功地在本地链接了 jQuery 库。通过控制台日志，我们可以直观地确认加载状态。
方法二：通过 CDN 包含 jQuery
如果你不想管理文件下载，或者希望利用浏览器的缓存机制来加速页面加载，那么使用 CDN（内容分发网络）是最佳选择。CDN 是一组分布在全球各地的服务器，它们托管了常见的库文件。当用户访问你的网站时，他们会从物理距离最近的服务器获取 jQuery 代码，这通常比从你自己的服务器下载要快得多。
此外，如果用户之前访问过其他使用相同 CDN 链接的网站，他们的浏览器可能已经缓存了 jQuery 文件，这意味着你的页面将无需再次下载，从而实现“秒开”。
#### 1. 常见的 CDN 提供商
有几个大型科技公司提供免费的 jQuery CDN 托管，最常用的包括：
- Google CDN：速度极快，稳定性高，是全球使用最广泛的公共 CDN 之一。
- Microsoft CDN：同样稳定，常用于企业环境。
- cdnjs (Cloudflare)：拥有非常全面的库集合。
- jQuery 官方 CDN：由 jQuery 团队直接维护的 CodeIgniter。
#### 2. 编写 CDN 链接代码
使用 CDN 的方法甚至比下载更简单，我们不需要保存任何文件，只需要将指向远程 URL 的 标签复制到我们的 HTML 中即可。以下是使用 Google CDN 引入 jQuery 3.6.0 版本的示例：
jQuery CDN 引入示例
// 简单的验证脚本
if (typeof jQuery != ‘undefined‘) {
console.log("jQuery 通过 CDN 加载成功！版本号：" + jQuery.fn.jquery);
} else {
console.log("jQuery 加载失败，请检查网络连接。");
}
$(document).ready(function () {
// 鼠标悬停效果示例
$("h2").on("mouseover", function () {
$(this).css("color", "blue").text("鼠标悬停触发！");
}).on("mouseout", function () {
$(this).css("color", "black").text("开发者测试平台");
});
});
开发者测试平台
将鼠标移动到标题上查看效果。
实用见解： 在上面的代码中，我们添加了一个 INLINECODE5254c6fa 的检查。这是一个很好的调试习惯。如果你在写代码时发现 INLINECODE2039be8a 未定义，控制台日志会告诉你是否是因为网络问题导致 CDN 加载失败。
深入探讨：最佳实践与常见错误
作为开发者，仅仅知道如何引入是不够的，我们需要考虑如何更稳健、更高效地使用它。以下是我们在实战中总结的一些经验。
#### 1. 文件放置位置：Head 还是 Body 结束前？
这是一个经典的问题。将 INLINECODE15c39c5e 放在 INLINECODE8413096f 中是常见的做法，特别是对于像 jQuery 这样的库，因为我们需要在写页面逻辑之前确保库已经存在。然而，脚本加载会阻塞 HTML 解析。为了优化首屏加载速度，现代性能优化的建议是将非关键的脚本放在 INLINECODE4826c0f7 标签结束之前。但对于 jQuery，如果你在页面中直接使用了内联脚本（如上面的例子），那么放在 INLINECODE14ee568b 中并配合 $(document).ready() 是最安全的选择。
#### 2. 本地文件与 CDN 的混合使用策略
在大型商业项目中，我们通常会采用一种“容错机制”。我们可以这样写代码：
// 检查 jQuery 是否加载成功，如果没有，则加载本地备份
window.jQuery || document.write(‘‘);
这段代码的逻辑非常聪明：它首先尝试从速度最快的 Google CDN 加载。如果 CDN 因为网络故障（比如在某些地区被屏蔽）无法访问，INLINECODE65b844a0 将为空，此时 JavaScript 会动态生成一个新的 INLINECODEf8169df1 标签，强制加载本地备份的文件。这保证了我们的应用在任何网络环境下都能运行。
#### 3. 版本选择与兼容性
jQuery 在 1.x、2.x 和 3.x 版本之间有重大的差异。特别是 jQuery 2.0+ 版本不再支持 Internet Explorer 6/7/8。如果你的用户群体中依然有人使用老旧的 IE 浏览器，请务必使用 jQuery 1.12.4 或更早版本。但在新项目中，我们强烈建议使用最新的 3.x 版本，因为它提供了更好的性能和更现代的 API 支持。
#### 4. 常见错误：$ 符号冲突
在项目中，我们可能会同时使用多个 JavaScript 库。有些库（如 Prototype.js）也使用 INLINECODE89e00940 作为简写。为了避免命名冲突，jQuery 提供了一种释放 INLINECODE5d88b42f 控制权的方法，强制使用 INLINECODE6b0f1108 关键字代替 INLINECODE6cad1524：
var $jq = jQuery.noConflict();
// 现在我们必须使用 $jq 来调用 jQuery 功能
$jq(document).ready(function(){
$jq("button").click(function(){
// 逻辑代码
});
});
或者，你可以将你的代码包裹在一个立即执行函数表达式中，在函数内部安全地使用 $：
(function($) {
// 在这里，$ 指的是 jQuery
$("body").css("background", "#eee");
})(jQuery);
进阶实战：构建一个简单的 AJAX 交互
既然我们已经成功引入了 jQuery，让我们看一个稍微复杂一点的例子，展示它的强大功能——AJAX。我们将使用 jQuery 从一个模拟的 API 获取数据并显示在页面上，而不需要刷新页面。
AJAX 数据加载示例
#data-container {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
min-height: 50px;
background-color: #f9f9f9;
}
$(document).ready(function() {
// 监听按钮点击
$("#load-btn").click(function() {
// 显示加载状态
$("#data-container").html("正在加载数据...
");
// 模拟 AJAX 请求
// 在实际项目中，URL 应该是真实的 API 地址
$.ajax({
url: "https://jsonplaceholder.typicode.com/users/1",
type: "GET",
dataType: "json",
success: function(data) {
// 请求成功后的回调
// 清空容器并填充数据
var html = "用户名： " + data.username + "
";
html += "邮箱： " + data.email;
$("#data-container").html(html).css("border-color", "green");
},
error: function(xhr, status, error) {
// 请求失败的处理
$("#data-container").html("加载失败：" + error + "
");
}
});
});
});
jQuery AJAX 实战
在这个例子中，我们利用了 INLINECODE910ad347 方法。代码的清晰度比原生 JavaScript 的 INLINECODEb39c9075 要高出许多。我们可以专注于业务逻辑（获取数据、更新 UI），而不用担心底层的网络连接细节。
性能优化建议
最后，让我们聊聊性能。虽然 jQuery 很方便，但如果不注意细节，页面依然会变慢。我们需要避免在循环中频繁进行 DOM 查询。例如：
// 不好的做法：在循环中查询 DOM
for (var i = 0; i < 100; i++) {
$(".items").append("Item " + i + ""); // 每次循环都要查找 .items
}
// 好的做法：先缓存 DOM 元素，再操作
var $container = $(".items");
var htmlString = "";
for (var i = 0; i < 100; i++) {
htmlString += "Item " + i + "";
}
$container.html(htmlString); // 只操作一次 DOM
通过缓存选择器结果（在变量名前加 INLINECODE004fb29a 是表示 jQuery 对象的常见约定）和使用字符串拼接代替多次 INLINECODE180e1640，我们可以显著提高页面的渲染速度。
总结
至此，我们已经全面探讨了如何在 HTML 页面中链接 jQuery。无论是选择直接下载库文件以获得离线稳定性，还是使用 CDN 以追求加载速度，关键在于理解它们背后的原理和适用场景。
我们了解到，作为开发者，我们需要根据项目环境选择正确的版本，处理可能的命名冲突，并时刻关注性能优化。jQuery 作为一个经过时间考验的工具，其简洁的语法依然能帮助我们快速构建交互性强的 Web 应用。
现在，你已经掌握了这些知识，不妨打开你的编辑器，尝试在一个新的 HTML 文件中引入 jQuery，并写下你的第一行交互代码吧！