如何引入jquery：三种实用引入方法

如何引入jquery主要有CDN在线引入、本地文件引入、模块化引入三种主流方式，其中CDN引入适合快速开发、无需本地存储文件，本地引入适配离线项目、加载稳定性较强，模块化引入适配Vue、React等现代前端工程化项目，普通静态网页优先选用CDN引入，企业级工程化项目建议用模块化引入。

jqueryCDN在线引入方式

你可以直接在HTML文件的head或body标签底部，写入jQuery官方CDN链接完成引入，无需下载任何文件，引入后即可直接使用jQuery的$语法编写代码。目前国内开发者常用百度静态资源CDN提供的jQuery资源，该资源节点覆盖国内大部分地区，访问稳定性优于部分海外CDN资源，适配绝大多数国内静态网页、小程序官网、简单H5页面场景。完整引入代码为，推荐将代码放置在body标签末尾，可避免页面DOM加载阻塞，提升页面渲染速度。

CDN引入有明显的使用优势。

jquery本地文件引入方式

该方式需要你提前下载jQuery官方压缩版min.js文件，登录jQuery官网可获取所有稳定版本，下载后将文件放入项目根目录或专门的js文件夹中，通过相对路径在HTML中引入文件。常用引入代码为，路径需要根据项目文件层级精准调整，路径错误会直接导致引入失效，页面控制台会报$未定义的错误。这种方式不受网络环境影响，离线开发、内网项目、局域网系统开发场景均可稳定使用，适配传统多页面静态网站开发。

jquery模块化引入方式

针对Webpack、Vite搭建的前端工程化项目，你需要通过npm工具完成引入，首先在项目终端执行npminstalljquery命令安装依赖，安装完成后在需要使用的js文件中，写入import$from'jquery'完成全局或局部引入。工程化项目中不建议混用CDN和模块化引入，容易出现变量重复定义、方法冲突的问题，该引入方式适配现代前端单页项目，兼容性覆盖主流打包工具，在企业后台管理系统、复杂交互页面开发中使用频率较高。

三种引入方式均兼容IE9及以上主流浏览器，老旧IE8及以下版本仅支持jQuery1.x系列版本，高版本jQuery已放弃低版本IE兼容。

CDN引入的适用边界是线下无网络环境、严格内网隔离的项目无法使用，这类场景强制依赖本地文件引入。

引入完成后可通过控制台验证有效性，在浏览器开发者工具控制台输入$，不出现报错即代表引入成功。

工程化项目中，可通过npmuninstalljquery快速卸载无用依赖，清理项目冗余文件。