环境搭建 2.1 下载与引入 jQuery 的教程

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它使得 HTML 文档遍历和操作、事件处理、动画以及 Ajax 交互变得更加简单。为了开始使用 jQuery，首先需要在你的项目中下载并引入 jQuery。本文将详细介绍如何下载和引入 jQuery，包括每种方法的优缺点和注意事项。

1. 下载 jQuery

1.1 从 jQuery 官方网站下载

步骤：

访问 jQuery 的官方网站 jQuery.com。
点击导航栏中的“Download”链接。
你将看到多个版本的 jQuery，包括压缩版和非压缩版。选择适合你项目的版本：
- 压缩版（minified）：适合生产环境，文件体积小，加载速度快。
- 非压缩版（uncompressed）：适合开发环境，便于调试，代码可读性强。
点击相应的链接下载 jQuery 文件。

示例代码：

假设你下载了 jquery-3.6.0.min.js 文件并将其放置在项目的 js 文件夹中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <script>
        $(document).ready(function() {
            $('h1').css('color', 'blue');
        });
    </script>
</body>
</html>

优点：

完全控制：你可以选择特定的版本，确保与项目的兼容性。
离线使用：下载后可以在没有网络的情况下使用。

缺点：

手动更新：需要手动下载新版本，可能会错过重要的更新和安全补丁。

注意事项：

确保下载的版本与你的项目需求相匹配，避免使用过时的版本。

1.2 使用 CDN 引入 jQuery

步骤：

使用内容分发网络（CDN）引入 jQuery 是一种常见的做法。CDN 提供了 jQuery 的托管服务，用户可以直接通过 URL 引入。

选择一个常用的 CDN，例如 Google、Microsoft 或 jsDelivr。
在你的 HTML 文件中添加以下 <script> 标签。

示例代码：

使用 Google CDN 引入 jQuery：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h1>Hello, jQuery!</h1>
    <script>
        $(document).ready(function() {
            $('h1').css('color', 'green');
        });
    </script>
</body>
</html>

优点：

快速加载：CDN 通常会在全球多个节点上缓存文件，用户可以从离他们最近的节点加载 jQuery，速度更快。
自动更新：如果使用的是最新版本的 CDN，用户可以自动获得最新的功能和安全修复。

缺点：

依赖网络：如果用户的网络连接不稳定，可能会导致 jQuery 加载失败。
隐私问题：某些用户可能不希望通过第三方 CDN 加载库，出于隐私和安全的考虑。

注意事项：

在使用 CDN 时，建议提供一个本地备份，以防 CDN 加载失败。可以通过以下方式实现：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    window.jQuery || document.write('<script src="js/jquery-3.6.0.min.js"><\/script>');
</script>

2. 总结

在本节中，我们详细介绍了如何下载和引入 jQuery，包括从官方网站下载和使用 CDN 的方法。每种方法都有其优缺点，选择合适的方法取决于你的项目需求和开发环境。

下载 jQuery：适合需要完全控制版本和离线使用的项目。
使用 CDN：适合需要快速加载和自动更新的项目，但需考虑网络依赖性。

在实际开发中，建议结合使用这两种方法，以确保在不同环境下的灵活性和可靠性。希望本教程能帮助你顺利搭建 jQuery 开发环境，开启你的 jQuery 学习之旅！