上一篇
HTML如何正确引入jQuery？
在HTML中引入 jQuery主要有两种方式：一是通过CDN链接直接引入在线版本，例如使用` ；二是下载jQuery库文件到本地，通过相对路径引入，如 ，两种方法均需在 或 内添加`标签实现。
在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月,请以官网最新为准。
