jQuery 介绍
jQuery 与现代前端
jQuery 与 Vue 对比
jQuery 与 React 对比
安装方式概览
下载 jQuery
CDN 引入方式
NPM 安装方式
开发版与生产版区别
版本选择与升级
jQuery 基础语法
jQuery 符号
文档就绪函数
链式调用
jQuery 对象与 DOM 对象
对象相互转换
jQuery 选择器
基本选择器
层次选择器
过滤选择器
表单选择器
属性选择器
内容选择器
  1. jQuery 基础入门
  2. 安装方式概览

安装方式概览

详细介绍jQuery的安装与配置方法，包括下载jQuery、CDN引入方式、NPM安装方式、开发版与生产版的区别以及版本选择与升级指南。

jQuery 安装方式概览

jQuery 提供了多种安装方式，开发者可以根据项目需求选择最适合的方法：

安装方式适用场景优点缺点
本地下载离线开发、内网项目不依赖网络、加载稳定需要手动管理版本
CDN 引入在线项目、快速开发无需下载、自动缓存依赖网络
NPM 安装现代前端项目版本管理方便、易于升级需要构建工具

方法一：本地下载安装

下载步骤

  1. 访问 jQuery 官方网站：https://jquery.com/download/
  2. 选择需要的版本（推荐使用最新稳定版）
  3. 下载对应的文件（开发版或生产版）

文件说明

下载后会得到两个文件：

  • jquery-3.x.x.js：开发版，包含注释和格式化代码，便于调试
  • jquery-3.x.x.min.js：生产版，代码压缩，体积更小，适合线上使用

引入方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 本地引入示例</title>
</head>
<body>

<h1>jQuery 本地引入测试</h1>
<button id="testBtn">点击测试</button>
<p id="result"></p>

<script src="jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#testBtn").click(function(){
    $("#result").text("jQuery 引入成功！");
  });
});
</script>

</body>
</html>

方法二：CDN 引入

常用 CDN 服务商

1. 官方 CDN

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 百度 CDN

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

3. 又拍云 CDN

<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

4. 新浪 CDN

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

5. Google CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CDN 引入示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery CDN 引入示例</title>
<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .cdn-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .cdn-btn {
    padding: 10px 20px;
    margin: 5px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .cdn-btn:hover {
    background-color: #2980b9;
  }
  .status {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
  }
  .success {
    background-color: #d4edda;
    color: #155724;
  }
  .error {
    background-color: #f8d7da;
    color: #721c24;
  }
  .loading {
    background-color: #fff3cd;
    color: #856404;
  }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery CDN 引入测试</h1>

  <div class="cdn-section">
    <h3>测试 CDN 连接</h3>
    <button class="cdn-btn" onclick="testCDN('https://code.jquery.com/jquery-3.6.0.min.js', '官方 CDN')">官方 CDN</button>
    <button class="cdn-btn" onclick="testCDN('https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js', '百度 CDN')">百度 CDN</button>
    <button class="cdn-btn" onclick="testCDN('https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js', '又拍云 CDN')">又拍云 CDN</button>
    <button class="cdn-btn" onclick="testCDN('https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js', '新浪 CDN')">新浪 CDN</button>
    <div id="cdnStatus" class="status">点击按钮测试 CDN 连接</div>
  </div>

  <div class="cdn-section">
    <h3>jQuery 功能测试</h3>
    <button class="cdn-btn" id="fadeInBtn">淡入</button>
    <button class="cdn-btn" id="fadeOutBtn">淡出</button>
    <button class="cdn-btn" id="slideUpBtn">上滑</button>
    <button class="cdn-btn" id="slideDownBtn">下滑</button>
    <div id="testBox" style="width: 200px; height: 200px; background-color: #3498db; color: white; text-align: center; line-height: 200px; margin-top: 20px; border-radius: 8px;">
      测试盒子
    </div>
  </div>

  <div class="cdn-section">
    <h3>版本信息</h3>
    <p id="versionInfo">jQuery 版本：<strong id="jqueryVersion"></strong></p>
  </div>
</div>

<script>
// 测试 CDN 连接
function testCDN(url, name) {
  $("#cdnStatus").removeClass("success error").addClass("loading").text("正在测试 " + name + "...");
  
  $.getScript(url)
    .done(function() {
      $("#cdnStatus").removeClass("loading error").addClass("success").text(name + " 连接成功！jQuery 版本：" + $.fn.jquery);
      $("#jqueryVersion").text($.fn.jquery);
    })
    .fail(function() {
      $("#cdnStatus").removeClass("loading success").addClass("error").text(name + " 连接失败，请检查网络或尝试其他 CDN");
    });
}

// jQuery 功能测试
$(document).ready(function(){
  $("#fadeInBtn").click(function(){
    $("#testBox").fadeIn();
  });
  
  $("#fadeOutBtn").click(function(){
    $("#testBox").fadeOut();
  });
  
  $("#slideUpBtn").click(function(){
    $("#testBox").slideUp();
  });
  
  $("#slideDownBtn").click(function(){
    $("#testBox").slideDown();
  });

  // 显示当前 jQuery 版本
  $("#jqueryVersion").text($.fn.jquery);
});
</script>

</body>
</html>

方法三：NPM 安装

安装命令

# 安装最新版本
npm install jquery

# 安装指定版本
npm install jquery@3.6.0

# 安装到开发依赖
npm install --save-dev jquery

在项目中使用

传统方式引入

<script src="node_modules/jquery/dist/jquery.min.js"></script>

ES6 模块引入

import $ from 'jquery';

$(document).ready(function(){
  console.log("jQuery 引入成功");
});

CommonJS 引入

const $ = require('jquery');

$(document).ready(function(){
  console.log("jQuery 引入成功");
});

开发版与生产版区别

开发版（jquery-3.x.x.js）

  • 特点：代码未压缩，包含完整注释
  • 文件大小：约 280KB
  • 适用场景：开发和调试阶段
  • 优点：便于阅读源码、调试错误
  • 缺点：加载速度慢

生产版（jquery-3.x.x.min.js）

  • 特点：代码压缩，去除注释和空格
  • 文件大小：约 90KB
  • 适用场景：生产环境部署
  • 优点：加载速度快、节省带宽
  • 缺点：无法阅读源码、调试困难

选择建议

<!-- 开发环境 -->
<script src="jquery-3.6.0.js"></script>

<!-- 生产环境 -->
<script src="jquery-3.6.0.min.js"></script>

版本选择与升级

jQuery 版本系列

版本系列IE 支持状态适用场景
1.xIE6+维护中需要兼容旧版 IE
2.xIE9+维护中不需要兼容 IE6-8
3.xIE9+活跃开发现代浏览器项目

版本选择建议

  1. 新项目：使用最新的 3.x 版本
  2. 需要兼容 IE6-8：使用 1.x 版本
  3. 不需要兼容 IE6-8：使用 2.x 或 3.x 版本

版本升级注意事项

  1. 查看更新日志：了解版本间的 API 变化
  2. 测试兼容性：在升级前进行全面测试
  3. 使用迁移插件：jQuery Migrate 插件可以帮助检测不兼容的代码
  4. 逐步升级：不要跨版本升级，建议逐个版本升级

jQuery Migrate 插件

<script src="jquery-3.6.0.js"></script>
<script src="jquery-migrate-3.3.2.js"></script>

完整配置示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 完整配置示例</title>
<style>
  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .config-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .config-section h3 {
    margin-top: 0;
    color: #2c3e50;
  }
  .code-block {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 14px;
  }
  .feature-list {
    list-style: none;
    padding: 0;
  }
  .feature-list li {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
  }
  .feature-list li:last-child {
    border-bottom: none;
  }
  .badge {
    display: inline-block;
    padding: 4px 8px;
    margin-right: 10px;
    border-radius: 3px;
    font-size: 12px;
    color: white;
  }
  .badge.dev { background-color: #e74c3c; }
  .badge.prod { background-color: #2ecc71; }
  .badge.cdn { background-color: #3498db; }
  .badge.npm { background-color: #f39c12; }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery 安装与配置指南</h1>

  <div class="config-section">
    <h3>1. 本地下载安装</h3>
    <div class="code-block">
&lt;!-- 开发环境 --&gt;
&lt;script src="jquery-3.6.0.js"&gt;&lt;/script&gt;

&lt;!-- 生产环境 --&gt;
&lt;script src="jquery-3.6.0.min.js"&gt;&lt;/script&gt;
    </div>
    <ul class="feature-list">
      <li><span class="badge dev">开发版</span> 包含注释，便于调试</li>
      <li><span class="badge prod">生产版</span> 代码压缩，加载更快</li>
    </ul>
  </div>

  <div class="config-section">
    <h3>2. CDN 引入（推荐）</h3>
    <div class="code-block">
&lt;!-- 官方 CDN --&gt;
&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;

&lt;!-- 百度 CDN --&gt;
&lt;script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;

&lt;!-- Google CDN --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
    </div>
    <ul class="feature-list">
      <li><span class="badge cdn">CDN</span> 无需下载，自动缓存</li>
      <li><span class="badge cdn">CDN</span> 多个节点，加载稳定</li>
    </ul>
  </div>

  <div class="config-section">
    <h3>3. NPM 安装</h3>
    <div class="code-block">
# 安装 jQuery
npm install jquery

# 引入方式
import $ from 'jquery';
    </div>
    <ul class="feature-list">
      <li><span class="badge npm">NPM</span> 版本管理方便</li>
      <li><span class="badge npm">NPM</span> 适合现代前端项目</li>
    </ul>
  </div>

  <div class="config-section">
    <h3>4. 版本选择建议</h3>
    <ul class="feature-list">
      <li><strong>jQuery 1.x</strong>：兼容 IE6+，适合旧项目维护</li>
      <li><strong>jQuery 2.x</strong>：兼容 IE9+，不兼容 IE6-8</li>
      <li><strong>jQuery 3.x</strong>：最新版本，推荐新项目使用</li>
    </ul>
  </div>

  <div class="config-section">
    <h3>5. 配置测试</h3>
    <button onclick="testjQuery()" style="padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">测试 jQuery 配置</button>
    <div id="testResult" style="margin-top: 15px; padding: 15px; background-color: #e8f5e9; border-radius: 5px; display: none;"></div>
  </div>
</div>

<script>
function testjQuery() {
  if (typeof $ !== 'undefined') {
    $("#testResult").show().html(`
      <p><strong>✓ jQuery 配置成功！</strong></p>
      <p>版本：${$.fn.jquery}</p>
      <p>浏览器：${navigator.userAgent}</p>
    `);
  } else {
    alert("jQuery 未正确配置，请检查引入路径");
  }
}
</script>

</body>
</html>

总结

jQuery 提供了多种安装方式，开发者应根据项目需求选择：

  • 快速开发：使用 CDN 引入
  • 离线项目：下载本地文件
  • 现代项目：使用 NPM 安装

无论选择哪种方式，都要注意区分开发版和生产版，并根据浏览器兼容性需求选择合适的 jQuery 版本。

上一章：jQuery 与 React 对比
下一章：下载 jQuery