垦荒学园

简体中文

English

简体中文

English

切换主题

安装和引入 jQuery ​

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

引入方式概述 ​

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

  1. CDN 引入：最简单快捷的方式，适合快速原型开发
  2. 下载文件：适合离线环境或需要完全控制文件的情况
  3. NPM 安装：适合现代前端项目，便于版本管理和构建优化
  4. 包管理器：如 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 文件中添加以下代码：

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 ​

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

bash
npm install jquery

2. 在项目中引入 ​

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

在 JavaScript 文件中引入： ​

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

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

在 CommonJS 环境中引入： ​

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

方式四：使用包管理器 ​

使用 Yarn 安装： ​

bash
yarn add jquery

使用 Bower 安装： ​

bash
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，都可以通过以下方式验证是否安装成功：

html
<!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：

html
<!-- 引入 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>

注意事项 ​

  1. 引入顺序：确保 jQuery 在使用它的脚本之前引入
  2. 网络连接：使用 CDN 方式需要稳定的网络连接
  3. 版本兼容性：确保使用的 jQuery 版本与项目需求兼容
  4. 文件路径：本地引入时确保文件路径正确
  5. 浏览器缓存：如果更新了 jQuery 版本，可能需要清除浏览器缓存
  6. 安全性：使用 CDN 时，建议指定完整性校验（integrity）
html
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous">
</script>

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