在HTML中引入jQuery是前端开发的基础操作，它能简化DOM操作、事件处理等任务，以下是三种主流方法,根据项目需求选择：
通过CDN引入（推荐）
步骤：
- 在HTML的
<head>或<body>结束前添加jQuery CDN链接 - 选择版本（以jQuery 3.7.1为例）：
<!-- 官方CDN（推荐） --> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
“`
优点：
- 用户访问过其他使用相同CDN的网站时，文件可从缓存加载，加速页面打开
- 无需本地存储文件，减少服务器负担
- 官方CDN提供全球节点，稳定性高
注意事项：
- 优先使用
https协议保障安全性 - 生产环境建议用压缩版（文件名含
.min.js，体积更小） - 非压缩版（无
.min）仅用于调试
下载本地文件引入
步骤：
- 访问jQuery官网下载文件
- 将文件（如
jquery-3.7.1.min.js）放入项目目录（例如js/文件夹） - HTML中引用：
<script src="js/jquery-3.7.1.min.js"></script>
适用场景：
- 内网项目或无法访问外网的环境
- 对第三方CDN有安全顾虑的项目
缺点：
- 无法利用公共CDN缓存，可能影响加载速度
- 需手动更新版本
通过包管理器安装（进阶）
适用于使用构建工具（如Webpack）的项目：
- 安装jQuery：
npm install jquery # 或 yarn add jquery
- 在JavaScript文件中导入：
import $ from 'jquery';
优点：
- 版本管理自动化
- 可结合Tree Shaking优化体积（但jQuery本身不易优化）
关键注意事项
-
加载位置：
- 放在
<body>结束标签前（</body>上方）可避免阻塞页面渲染 - 若需在
<head>中加载，添加defer属性：<script src="..." defer></script>
- 放在
-
避免版本冲突：
- 确保只引入一个jQuery版本
- 若与其他库（如Prototype）冲突，用
jQuery.noConflict()释放符号
-
验证是否生效：
在引入后添加测试代码：<script> $(document).ready(function() { console.log("jQuery版本：" + $.fn.jquery); }); </script>控制台输出当前版本即表示成功（如
7.1）。
总结建议
- 优先选择官方CDN：兼顾速度与稳定性，适合大多数网站
- 本地引入：适用于离线项目或安全要求高的场景
- 包管理器：仅在工程化项目中推荐
引用说明：本文内容参考jQuery官方文档、Google Developers CDN指南及MDN Web Docs最佳实践，版本数据截至2025年10月,请以官网最新为准。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/39905.html
