引入 jQuery

认识完 jQuery 的"前世今生"，本章带你把它真正接到自己的页面里。引入 jQuery 有三种主流方式：CDN、本地文件、npm 安装。理解它们的差别，才能在不同项目里做对选择。

1. CDN 引入（推荐新手）

CDN（内容分发网络）引入是最快上手的方式：在 HTML 的 head 里加一行 script 标签，浏览器加载页面时会自动从最近的 CDN 节点下载 jQuery。优点是不用下载文件、不用配环境；缺点是依赖外网，CDN 挂了页面就废了。

<!-- 方式 1:CDN 引入(最快,推荐快速试验)
     从 jQuery 官方 CDN 加载 3.7.1 压缩版 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- 国内访问更快的中国科学技术大学 CDN -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- 或用字节跳动静态资源公共库 -->
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/jquery/3.7.1/jquery.min.js"></script>

国内用户优先选 bootcdn 或字节跳动的源，访问速度比 jQuery 官方 CDN 快得多。生产环境建议加上 integrity 属性（SRI 校验），防止 CDN 被篡改。

2. 本地引入（推荐生产）

本地引入是把 jQuery 的 JS 文件下载到自己项目里，跟着代码一起部署。优点是完全可控、不依赖外网、可上 HTTPS；缺点是要自己管版本升级。

<!-- 方式 2:本地引入(可控,不依赖外网)
     先从 https://jquery.com/download/ 下载两个文件:
       jquery-3.7.1.js        开发版(未压缩,可读,体积 ~290KB)
       jquery-3.7.1.min.js    生产版(压缩过,体积 ~88KB)
     放到项目的 js/ 目录下 -->
<script src="js/jquery-3.7.1.min.js"></script>

从 jquery.com/download/ 下载时会看到两个版本：开发版（.js，未压缩，约 290KB，可读、便于调试）和生产版（.min.js，压缩过，约 88KB，体积小、加载快）。本地开发用开发版，上线用生产版。

3. npm 安装（推荐现代工程）

如果你的项目本身用 Webpack/Vite/Rollup 这类构建工具，那应该用 npm 装 jQuery，再用 import 引入。这样可以享受 tree-shaking、版本锁定、模块化等好处。

# 方式 3:npm 安装(适合现代工程化项目)
npm install jquery

# 然后在 JS 里 import
# import $ from "jquery";
# 或全局挂载
# window.$ = window.jQuery = require("jquery");

注意：用 import 引入后 $ 默认只在当前模块可见，不会自动挂到 window 上。如果项目里还有老 jQuery 代码（比如 WordPress 主题里的）依赖全局 $，需要手动挂上去。

4. 版本怎么选？

jQuery 当前主要有三条版本线：

jQuery 3.x：现代版，去掉了一堆过时 API（如 .bind()、.live()、.die()），更轻量更快。新项目必须用 3.x。
jQuery 2.x：放弃了 IE6-8 支持，体积比 1.x 小。已停止维护，不建议新项目用。
jQuery 1.x：兼容 IE6-8，老国企/政府网站仍可能用。除非维护老代码，否则别碰。

本教程统一使用 jQuery 3.7.1（写作时最新稳定版）。如果你的老项目用的是 1.x 或 2.x，遇到 API 不一致时查官方的 jQuery Migrate 插件，它能帮你平滑升级。

5. 验证 jQuery 已加载

无论用哪种方式引入，下一步都是验证它真的能用。最简单的办法是看 $ 或 jQuery 是否已定义：

<!-- 完整示例:验证 jQuery 已加载 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>jQuery 探活</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <p id="msg">还没加载</p>
  <script>
    // 写法 1:完整版 - 等 DOM 完全解析后执行
    $(document).ready(function () {
      $("#msg").text("jQuery 加载成功!版本是 " + $().jquery);
    });

    // 写法 2:简写 - 等价于上面
    $(function () {
      console.log("DOM 就绪");
    });
  </script>
</body>
</html>

页面打开后，如果看到"jQuery 加载成功！版本是 3.7.1"，说明引入成功。如果显示"还没加载"或控制台报 Uncaught ReferenceError: $ is not defined，说明 script 标签没写对、CDN 被墙、或 DOM 还没解析完就执行了脚本——这三个是新手最常见的坑。

6. $ 与 jQuery 的关系

jQuery 库只往全局挂一个名字：jQuery。然后它又给自己起了个简写别名 $。所以下面两句完全等价：

// 查看当前 jQuery 版本
console.log($.fn.jquery);   // 字符串,例如 "3.7.1"
console.log($().jquery);    // 同上,等价写法

// 判断 jQuery 是否加载
if (typeof $ === "undefined") {
  console.log("jQuery 没加载,检查 script 标签");
} else {
  console.log("jQuery 已就绪");
}

// 多版本共存(极端情况,不推荐)
// 用 jQuery.noConflict() 释放 $ 给别的库
$.noConflict();
jQuery(document).ready(function () {
  jQuery("p").text("用 jQuery 全名调用");
};

极少数情况下（比如同时引入了 Prototype.js，它也用 $），需要用 $.noConflict() 把 $ 让出来，改用全名 jQuery(...)。新项目几乎遇不到，但维护老代码时偶尔会撞上。

小结

到这里你应该能把 jQuery 接到任何项目里了：试验用 CDN，生产用本地或 npm，统一选 3.x。下一篇我们正式学 jQuery 的第一个核心能力——选择器，看看怎么用一行 $() 选中页面上的任意元素。

← 上一篇 jQuery 简介

下一篇 jQuery 选择器 →

✈️💬