在 JavaScript 文件中引用 jQuery的常见方法包括通过CDN加载、下载jQuery库文件并本地引入、使用包管理工具如npm安装等。最推荐的是通过CDN加载，因为它可以加速加载时间，并且可能已经被用户的浏览器缓存。下面我们详细说明其中的一种方法。
通过CDN加载： 通过CDN引入jQuery非常简单，只需要在HTML文件的
或部分添加一行在上面的代码中，通过CDN加载了jQuery库，这样在随后的JavaScript文件中就可以直接使用jQuery了。
一、通过CDN加载
通过CDN加载jQuery是最简单和直接的方法之一。CDN（内容分发网络）提供了全球分布的服务器，可以快速、可靠地加载jQuery库文件。使用CDN加载jQuery有几个明显的优势：
加快加载速度：CDN服务器分布在全球各地，用户可以从最近的服务器获取文件，从而加快文件加载速度。
缓存共享：由于CDN上的jQuery文件是标准化的，用户浏览器可能已经缓存了该文件，这将进一步减少加载时间。
减少服务器负担：将文件托管在CDN上，可以减少你自己服务器的负担，提高网站的响应速度。
在HTML文件中引入jQuery库的CDN地址非常简单，只需在
或部分添加如下代码：通过这种方式，jQuery库会在HTML页面加载时自动引入，确保后续的JavaScript代码能够使用jQuery。
二、下载jQuery库文件并本地引入
如果你希望在没有网络连接的情况下，也能使用jQuery库，那么可以选择下载jQuery库文件并在本地引入。具体步骤如下：
下载jQuery库文件：访问jQuery官方网站（https://jquery.com/），下载最新版本的jQuery库文件。
将文件保存到项目目录：将下载的jQuery库文件保存到项目的指定目录下，例如js目录。
在HTML文件中引入jQuery库文件：使用
这种方法确保了在没有网络连接的情况下，jQuery库文件依然可以正常加载和使用。
三、使用包管理工具如npm安装
在现代前端开发中，使用包管理工具如npm（Node Package Manager）来管理依赖项已经成为主流。通过npm安装jQuery库文件，可以方便地管理版本和依赖关系。具体步骤如下：
初始化npm项目：在项目根目录运行npm init命令，按照提示填写项目信息。
安装jQuery库文件：运行npm install jquery命令，npm会自动下载并安装jQuery库文件。
在JavaScript文件中引入jQuery库文件：使用require或import语句在JavaScript文件中引入jQuery库文件。
示例代码如下：
// 使用CommonJS语法
const $ = require('jquery');
// 使用ES6模块语法
import $ from 'jquery';
这种方法适用于使用模块化开发的项目，尤其是使用构建工具（如Webpack、Parcel等）的项目。
四、通过模块化引入jQuery
在现代Web开发中，模块化开发已经成为趋势。通过模块化引入jQuery，可以更好地管理和组织代码。下面我们介绍两种常见的模块化方法：CommonJS和ES6模块。
CommonJS模块
CommonJS模块是Node.js中的标准模块系统，通过require语句引入模块。示例代码如下：
const $ = require('jquery');
// 使用jQuery库操作DOM
$(document).ready(function() {
$('body').append('
Hello, jQuery!
');});
ES6模块
ES6模块是JavaScript中的标准模块系统，通过import语句引入模块。示例代码如下：
import $ from 'jquery';
// 使用jQuery库操作DOM
$(document).ready(function() {
$('body').append('
Hello, jQuery!
');});
使用模块化引入jQuery，可以更好地管理和组织代码，提高开发效率和代码质量。
五、结合构建工具引入jQuery
在现代前端开发中，使用构建工具（如Webpack、Parcel等）来打包和优化代码已经成为常态。通过构建工具引入jQuery，可以实现自动化构建和优化，提高开发效率和性能。
使用Webpack引入jQuery
Webpack是一个流行的模块打包工具，可以将多个模块打包成一个或多个文件。使用Webpack引入jQuery的步骤如下：
安装Webpack和jQuery：运行npm install webpack webpack-cli jquery命令，安装Webpack和jQuery。
创建Webpack配置文件：在项目根目录创建webpack.config.js文件，配置Webpack。
在JavaScript文件中引入jQuery：使用import语句在JavaScript文件中引入jQuery。
示例代码如下：
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
// src/index.js
import $ from 'jquery';
// 使用jQuery库操作DOM
$(document).ready(function() {
$('body').append('
Hello, jQuery!
');});
通过这种方式，可以实现自动化构建和优化，提高开发效率和性能。
六、通过脚本延迟加载jQuery
在某些情况下，我们可能希望延迟加载jQuery库文件，以提高页面加载速度。通过脚本延迟加载jQuery，可以在页面加载完成后，再动态加载jQuery库文件。具体步骤如下：
创建一个JavaScript文件：在项目目录下创建一个JavaScript文件，例如load-jquery.js。
在JavaScript文件中编写延迟加载代码：使用
最后，确保你的js文件在引用jQuery之前被加载，这样你就可以在js文件中使用jQuery的功能了。
2. 在js文件中如何引用jQuery库？
问题描述：我希望在我的js文件中使用jQuery库，应该如何正确引用它？
回答：你可以按照以下步骤在js文件中引用jQuery库：
首先，在你的项目中创建一个文件夹，用于存放所有的外部库文件。
其次，从jQuery官方网站上下载最新版本的jQuery库文件，并将其保存到刚刚创建的文件夹中。
然后，在你的js文件中添加以下代码行：
最后，确保你的js文件在引用jQuery库之前被加载，这样你就可以在js文件中使用jQuery提供的功能了。
3. 我应该如何在js文件中正确地引用jQuery？
问题描述：我正在编写一个js文件，想要使用jQuery库的功能。请问我应该如何正确地引用jQuery？
回答：下面是在js文件中正确引用jQuery的步骤：
首先，从jQuery官方网站上下载最新版本的jQuery库文件。
其次，将下载的jQuery文件保存在你的项目文件夹中的适当位置。
然后，在你的js文件中添加以下代码行来引用jQuery：
最后，确保你的js文件在引用jQuery之前被加载，这样你就可以在js文件中使用jQuery的功能了。记得在引用jQuery之前，先添加一个DOM加载完成的事件监听器，以确保在文档完全加载之后再使用jQuery的功能。
原创文章，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3629939