如何在js文件中引入jquery

在JavaScript开发中，引入jQuery库能够极大地简化代码编写，提升开发效率。那么，如何在js文件中引入jQuery呢？以下为您详细介绍。

下载jQuery库

需要获取jQuery库文件。您可以通过jQuery官方网站（https://jquery.com/download/）进行下载。在该页面，您能看到不同版本的jQuery供选择，包括生产版本和开发版本。生产版本经过压缩和优化，适合在正式项目中使用以减少文件体积和加载时间；开发版本则保留了注释等信息，方便开发过程中的调试。

本地引入

将下载好的jQuery库文件（通常是一个.js文件，例如jquery-3.6.0.min.js ）放在项目的合适目录下，比如项目根目录的js文件夹中。然后，在HTML文件中使用script标签引入该文件。例如：

<script src="js/jquery-3.6.0.min.js"></script>

src属性指定了jQuery库文件的路径。在引入jQuery库之后，就可以在HTML页面或者关联的js文件中使用jQuery的各种功能了。

CDN引入

CDN（Content Delivery Network）即内容分发网络，使用CDN引入jQuery是一种便捷且高效的方式。许多知名的CDN服务提供商都提供了jQuery库的引用。例如，谷歌的CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

使用CDN引入的好处在于，CDN节点分布广泛，用户浏览器可以从离自己较近的节点快速获取jQuery库文件，加快页面加载速度。而且，CDN服务商会缓存jQuery库文件，对于经常访问的网站，用户浏览器可能会直接从本地缓存中读取文件，进一步提高加载效率。

在js文件中使用

当在HTML文件中成功引入jQuery库后，在关联的js文件里就可以直接使用jQuery的语法和功能了。例如，使用jQuery选择器选取页面元素：

$(document).ready(function() {
    // 代码放在这里
    $('p').css('color','red');
});

上述代码在文档加载完成后，将页面中所有p元素的颜色设置为红色。

在js文件中引入jQuery并不复杂，通过本地引入或CDN引入的方式，合理运用jQuery的强大功能，能让您的JavaScript开发工作更加顺畅。