如何在HTML中正确引入jQuery库并使其在JavaScript中可用-html教程-PHP中文网

如何在HTML中正确引入jQuery库并使其在JavaScript中可用

霞舞

发布： 2025-09-05 12:01:37

原创

905人浏览过

如何在HTML中正确引入jQuery库并使其在JavaScript中可用

本教程详细介绍了在Web项目中引入jQuery库的标准方法。通过在HTML文件中使用<script>标签加载jQuery CDN或本地文件，可以确保jQuery及其全局对象$在所有关联的JavaScript文件中无缝可用，从而实现高效的DOM操作和事件处理。

1. 理解jQuery的引入机制

jquery是一个javascript库，它通过在全局作用域中注册一个名为jquery（通常简写为$）的对象来工作。这意味着，一旦jquery库被加载到浏览器中，这个全局对象就会变得可用，并且可以在页面上的任何其他javascript代码中直接访问。因此，传统的web开发中，我们不是将jquery“导入”到某个javascript文件内部，而是将其“加载”到html页面中，使其成为所有后续脚本可用的全局资源。

2. 通过内容分发网络（CDN）引入jQuery

这是最常见和推荐的引入jQuery方式。CDN（Content Delivery Network）能够提供更快的加载速度和更好的缓存效果，因为许多用户可能已经从同一CDN加载过jQuery，从而避免了重复下载。

示例代码：

将以下<script>标签添加到你的HTML文件的<head>标签内，或者更推荐地，在<body>标签的结束之前。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 引入示例</title>
    <!-- 引入 jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
            crossorigin="anonymous"></script>
    <!-- 你的自定义 JavaScript 文件，必须在 jQuery 之后加载 -->
    <script src="my-script.js"></script>
</head>
<body>
    <h1>欢迎使用 jQuery！</h1>
    <button id="myButton">点击我</button>
    <p id="myParagraph">这是一个段落。</p>

    <!-- 如果将 jQuery 放在 body 底部，则如下所示 -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
            crossorigin="anonymous"></script>
    <script src="my-script.js"></script> -->
</body>
</html>

登录后复制

在上述示例中：

src属性指定了jQuery库文件的URL。
integrity属性提供了子资源完整性（Subresource Integrity, SRI）哈希值，用于验证从CDN加载的脚本是否被篡改，增强了安全性。
crossorigin属性用于处理CORS（跨域资源共享）请求，对于CDN资源通常设置为anonymous。

3. 本地引入jQuery

如果你更倾向于将jQuery文件托管在自己的服务器上，或者在没有网络连接的环境中开发，你可以下载jQuery库文件并本地引入。

百度文心百中

百度大模型语义搜索体验中心

查看详情

立即学习“Java免费学习笔记（深入）”；

步骤：

从jQuery官方网站（https://jquery.com/download/）下载最新版本的jQuery文件（通常选择压缩版.min.js）。
将下载的文件放置在你的项目目录中，例如 js/jquery-3.6.0.min.js。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 本地引入示例</title>
    <!-- 本地引入 jQuery -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!-- 你的自定义 JavaScript 文件 -->
    <script src="my-script.js"></script>
</head>
<body>
    <!-- ... 页面内容 ... -->
</body>
</html>

登录后复制

4. 在JavaScript文件中使用jQuery

一旦jQuery通过上述任一方式成功引入到HTML页面中，你就可以在任何关联的JavaScript文件中（例如 my-script.js）使用$或jQuery对象了。

my-script.js 示例：

// 确保DOM加载完成后执行代码
$(document).ready(function() {
    // 选中ID为myButton的元素，并添加点击事件监听器
    $('#myButton').on('click', function() {
        // 改变ID为myParagraph的元素的文本内容
        $('#myParagraph').text('按钮被点击了！');
        // 切换段落的可见性
        $('#myParagraph').toggle();
    });

    // 示例：使用jQuery选择器和方法
    console.log('页面加载完成！');
    $('h1').css('color', 'blue'); // 将H1标题文字颜色设为蓝色
});

// 你也可以使用更简洁的语法来替代 $(document).ready()
// $(function() {
//     console.log('DOM ready (简洁语法)!');
// });

登录后复制

5. 注意事项与最佳实践

脚本标签位置：
- <head>中： 如果将jQuery放在<head>中，浏览器会先下载和解析jQuery，然后再渲染页面内容。这可能导致页面渲染阻塞，但确保了所有后续脚本在DOM加载前就能使用jQuery。
- <body>结束前： 将<script>标签放在</body>标签之前是更常见的做法。这样浏览器会先渲染HTML内容，再加载JavaScript，从而提高页面的感知加载速度。在jQuery加载完成后，可以使用$(document).ready()来确保在DOM完全构建后执行依赖DOM的jQuery代码。
加载顺序： 引入jQuery的<script>标签必须放在所有依赖jQuery的自定义JavaScript文件之前。否则，你的自定义脚本在执行时将无法找到$或jQuery对象，导致错误。
安全性（SRI）： 对于从CDN加载的脚本，强烈建议使用integrity属性。它通过加密哈希值验证脚本内容，防止CDN被攻击时注入恶意代码。
性能优化： 尽管jQuery是一个同步加载的库，但在某些情况下，可以考虑使用defer或async属性来优化脚本加载，但这需要仔细评估，因为jQuery通常需要在使用它的脚本之前完全加载并解析。对于依赖性强的jQuery，直接同步加载并放在body底部通常是最佳实践。
现代前端框架与模块化： 在现代前端开发中，尤其是在使用Webpack、Rollup等模块打包工具和React、Vue、Angular等框架时，jQuery的引入方式可能更倾向于通过npm安装并在JavaScript文件中使用import语句。然而，对于传统的Web项目或简单的页面，本教程中介绍的<script>标签方式仍然是标准且有效的。