如何在Web项目中正确引入jQuery-html教程-PHP中文网

如何在Web项目中正确引入jQuery

聖光之護

发布： 2025-09-05 13:16:34

原创

623人浏览过

如何在Web项目中正确引入jQuery

本教程详细介绍了在Web项目中引入jQuery的正确方法。通过在HTML文件中使用<script>标签引用jQuery库，无论是通过CDN还是本地文件，即可使其全局可用，允许后续JavaScript脚本通过$或jQuery对象访问其功能。文章将提供示例代码和使用注意事项，确保您能顺利集成jQuery。

理解jQuery的引入机制

jquery作为一个经典的javascript库，其设计哲学是在浏览器环境中通过全局对象提供功能。与现代javascript模块（es modules）使用import语句的方式不同，jquery的引入并不直接发生在独立的javascript文件中。它的核心机制是先将jquery库文件加载到html页面中，使其在全局作用域内创建jquery和$这两个对象，然后页面中的其他javascript脚本才能访问并利用这些全局对象。因此，正确引入jquery的关键在于html文件。

通过HTML <script> 标签引入jQuery

在Web项目中引入jQuery最常见且推荐的方式是通过HTML的<script>标签。您可以通过内容分发网络（CDN）或本地托管文件两种方式实现。

1. 通过CDN引入 (推荐)

使用CDN（Content Delivery Network）是引入jQuery的推荐方式。CDN能够提供更快的加载速度，因为用户可能已经从其他网站缓存了该文件，并且CDN通常会选择离用户最近的服务器来提供服务。

示例代码：

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery CDN 引入示例</title>
</head>
<body>
    <!-- 页面内容 -->

    <!-- 在这里引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
            crossorigin="anonymous"></script>

    <!-- 您的自定义 JavaScript 文件，必须在 jQuery 之后引入 -->
    <script src="your-script.js"></script>
</body>
</html>

登录后复制

属性解释：

src: 指定jQuery库文件的URL。这里使用的是jQuery官方提供的CDN链接。
integrity: 这是一个安全特性，称为子资源完整性（Subresource Integrity, SRI）。它包含一个哈希值，浏览器会根据这个哈希值验证所下载的脚本文件是否与预期的一致，防止CDN被篡改而注入恶意代码。强烈建议在使用CDN时保留此属性。
crossorigin: 与integrity属性配合使用，指定如何处理跨域请求。anonymous表示不发送用户凭证（如cookies）。

2. 本地文件引入

如果您需要在离线环境工作，或者对项目资源有严格的控制需求，可以选择下载jQuery文件并将其托管在您的服务器上。

步骤：

从jQuery官方网站（jquery.com）下载所需版本的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>
</head>
<body>
    <!-- 页面内容 -->

    <!-- 在这里引入本地的 jQuery 库文件 -->
    <script src="js/jquery-3.6.0.min.js"></script>

    <!-- 您的自定义 JavaScript 文件，必须在 jQuery 之后引入 -->
    <script src="your-script.js"></script>
</body>
</html>

登录后复制

在JavaScript中访问jQuery

一旦jQuery通过<script>标签成功加载到HTML页面中，它就会在全局作用域中创建jQuery和$这两个对象。这意味着，所有在jQuery加载之后执行的JavaScript代码，无论是内联脚本还是外部JavaScript文件，都可以直接使用$或jQuery来调用其功能。

示例代码：

假设您有一个HTML文件如下：

<!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>
    <style>
        #myHeading {
            color: #333;
            font-family: Arial, sans-serif;
        }
        #myButton {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        #myButton:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1 id="myHeading">欢迎来到jQuery世界！</h1>
    <button id="myButton">点击我</button>

    <!-- 引入 jQuery 库 -->
    <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>

    <!-- 也可以直接在 HTML 中编写 jQuery 代码 -->
    <script>
        $(document).ready(function() {
            console.log("jQuery 已加载并可用！");
            // 改变标题颜色
            $('#myHeading').css('color', 'green');
        });
    </script>
</body>
</html>

登录后复制

以及一个名为my-script.js的外部JavaScript文件：

// my-script.js
// 确保在 DOM 完全加载后执行 jQuery 代码
$(document).ready(function() {
    // 为按钮添加点击事件
    $('#myButton').on('click', function() {
        alert('按钮被点击了！');
        // 动画效果：增大标题字体大小
        $('#myHeading').animate({
            fontSize: '3em'
        }, 500);
    });
});

登录后复制

在这个例子中，my-script.js文件可以直接使用$符号，因为它在HTML中位于jQuery库的<script>标签之后，确保了jQuery对象在my-script.js执行时已经可用。

最佳实践与注意事项

脚本加载顺序至关重要： 任何依赖jQuery的自定义JavaScript文件或内联脚本，都必须在jQuery库的<script>标签之后引入。如果jQuery未加载就尝试使用$或jQuery，将会导致ReferenceError。
<script>标签的位置：
- 传统做法（推荐）： 将jQuery的<script>标签放置在<body>标签的末尾，</body>关闭标签之前。这样做可以确保HTML内容先被解析和渲染，避免JavaScript文件加载阻塞页面的显示，从而提升用户体验。
- 在<head>中使用defer： 如果您选择将<script>标签放置在<head>中，可以添加defer属性（例如：<script src="..." defer></script>）。defer属性会告诉浏览器异步加载脚本，并在HTML文档解析完成后才执行脚本，但仍会保持脚本的执行顺序。

避免$符号冲突： 如果您的页面中同时使用了其他也使用$作为快捷方式的JavaScript库（如Prototype.js），可能会发生冲突。jQuery提供了jQuery.noConflict()方法来解决这个问题。调用此方法后，$符号将放弃对jQuery的控制权，您需要使用jQuery来代替$。

<script src="other-library.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var jq = jQuery.noConflict(); // 'jq' 现在是 jQuery 的别名
    jq(document).ready(function() {
        jq('#myElement').text('使用 jq 别名');
    });
    // 这里的 $ 符号现在可以被其他库使用
</script>

登录后复制

版本管理： 选择稳定且适合项目需求的jQuery版本。定期检查是否有安全更新或性能改进，但也要注意新版本可能引入的兼容性问题。
安全性（SRI）： 在使用CDN时，务必包含integrity属性，以增强安全性，防止第三方篡改。

总结

在Web项目中引入jQuery的核心方法是在HTML文件中使用<script>标签。无论是通过CDN提供的高效服务，还是通过本地托管文件，一旦jQuery库被正确加载，它就会在全局作用域中暴露$和jQuery对象，使得后续的所有JavaScript脚本都能无缝地利用jQuery提供的强大功能。遵循正确的加载顺序和最佳实践，可以确保jQuery在您的项目中稳定、高效地运行。

以上就是如何在Web项目中正确引入jQuery的详细内容，更多请关注php中文网其它相关文章！