安装和引入 jQuery

在开始使用 jQuery 之前，我们需要先将其引入到我们的项目中。jQuery 提供了多种引入方式，以适应不同的开发环境和需求。

引入方式概述

jQuery 提供了以下几种引入方式：

CDN 引入：最简单快捷的方式，适合快速原型开发
下载文件：适合离线环境或需要完全控制文件的情况
NPM 安装：适合现代前端项目，便于版本管理和构建优化
包管理器：如 Yarn、Bower . 下载文件到本地

访问 jQuery 官网，点击 "Download" 按钮，选择需要的版本下载。

2. 将文件复制到项目中

将下载的 jQuery 文件复制到你的项目目录中，例如：

your-project/
├── js/
│   ├── jquery-3.6.0.min.js
│   └── main.js
├── css/
│   └── style.css
└── index.html

3. 在 HTML 中引入

在 HTML 文件中添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery 示例</title>
</head>
<body>
    <!-- 你的页面内容 -->
    
    <!-- 引入 jQuery -->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!-- 你的 JavaScript 代码 -->
    <script src="js/main.js"></script>
</body>
</html>

方式三：通过 NPM 安装

对于使用现代前端构建工具（如 Webpack、Vite 等）的项目，推荐使用 NPM 安装。

1. 安装 jQuery

在项目根目录下打开终端，运行以下命令：

npm install jquery

2. 在项目中引入

根据你使用的框架和构建工具，引入方式略有不同：

在 JavaScript 文件中引入：

// 在你的主 JS 文件中
import $ from 'jquery';
// 或者
import jQuery from 'jquery';

// 将 jQuery 绑定到全局变量
window.$ = window.jQuery = jQuery;

在 CommonJS 环境中引入：

// 在你的主 JS 文件中
const $ = require('jquery');

方式四：使用包管理器

使用 Yarn 安装：

yarn add jquery

使用 Bower 安装：

bower install jquery

jQuery 版本选择

jQuery 有多个版本可供选择：

1. jQuery 3.x（推荐）

最新版本
不支持 IE 6/7/8
性能优化
使用严格模式

2. jQuery 2.x

不支持 IE 6/7/8
文件体积较小
性能有所提升

3. jQuery 1.x

支持 IE 6/7/8
文件体积较大
适用于需要兼容老版本浏览器的项目

4. jQuery Compat 3.x

包含废弃 API 的兼容版本
适用于从旧版本迁移的项目

验证安装

无论使用哪种方式引入 jQuery，都可以通过以下方式验证是否安装成功：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery 测试</title>
    <!-- 根据你选择的方式引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>jQuery 测试</h1>
    <p id="test">如果看到这条消息，说明 jQuery 没有正常工作</p>
    
    <script>
        // 等待文档加载完成
        $(document).ready(function() {
            // 修改页面内容
            $('#test').text('jQuery 已成功加载并正常工作！');
            $('#test').css('color', 'green');
        });
        
        // 或者使用简写形式
        // $(function() {
        //     $('#test').text('jQuery 已成功加载并正常工作！');
        //     $('#test').css('color', 'green');
        // });
    </script>
</body>
</html>

如果页面上显示 "jQuery 已成功加载并正常工作！" 并且文字为绿色，说明 jQuery 已经成功安装并可以使用了。

多版本共存

在某些情况下，可能需要在同一个项目中使用多个版本的 jQuery：

<!-- 引入 jQuery 1.x -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    var $jq1 = jQuery.noConflict(true); // 释放 $ 符号，并保存 jQuery 1.x 的引用
</script>

<!-- 引入 jQuery 3.x -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    var $jq3 = jQuery.noConflict(true); // 释放 $ 符号，并保存 jQuery 3.x 的引用
</script>

<script>
    // 使用 jQuery 1.x
    $jq1(document).ready(function() {
        // jQuery 1.x 的代码
    });
    
    // 使用 jQuery 3.x
    $jq3(document).ready(function() {
        // jQuery 3.x 的代码
    });
</script>

注意事项

引入顺序：确保 jQuery 在使用它的脚本之前引入
网络连接：使用 CDN 方式需要稳定的网络连接
版本兼容性：确保使用的 jQuery 版本与项目需求兼容
文件路径：本地引入时确保文件路径正确
浏览器缓存：如果更新了 jQuery 版本，可能需要清除浏览器缓存
安全性：使用 CDN 时，建议指定完整性校验（integrity）

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous">
</script>

通过以上方式，你可以成功在项目中引入 jQuery，并开始使用它来简化你的 JavaScript 开发工作。

#安装和引入 jQuery

#引入方式概述

#2. 将文件复制到项目中

#3. 在 HTML 中引入

#方式三：通过 NPM 安装

#1. 安装 jQuery

#2. 在项目中引入

#在 JavaScript 文件中引入：

#在 CommonJS 环境中引入：

#方式四：使用包管理器

#使用 Yarn 安装：

#使用 Bower 安装：

#jQuery 版本选择

#1. jQuery 3.x（推荐）

#2. jQuery 2.x

#3. jQuery 1.x

#4. jQuery Compat 3.x

#验证安装

#多版本共存

#注意事项