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

版本选择与升级

介绍如何选择合适的jQuery版本，以及jQuery版本升级的注意事项和最佳实践。

jQuery 版本系列

jQuery 目前有三个主要版本系列：

版本系列最新版本IE 支持状态适用场景
1.x1.12.4IE6+维护中需要兼容旧版 IE
2.x2.2.4IE9+维护中不需要兼容 IE6-8
3.x3.6.0IE9+活跃开发现代浏览器项目

版本选择指南

1. 根据浏览器兼容性选择

需要兼容 IE6-8

<!-- 使用 jQuery 1.x -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

适用场景：

  • 企业内部系统
  • 政府网站
  • 传统行业网站
  • 需要支持老旧浏览器的项目

不需要兼容 IE6-8

<!-- 使用 jQuery 2.x 或 3.x -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

适用场景：

  • 互联网应用
  • 现代网站
  • 移动端应用
  • 不需要支持旧版 IE 的项目

2. 根据项目需求选择

新项目

<!-- 推荐使用最新稳定版 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

维护旧项目

<!-- 保持原有版本，避免破坏性变更 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

渐进式升级

<!-- 使用 jQuery Migrate 插件辅助升级 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>

版本升级步骤

1. 查看更新日志

在升级前，务必查看 jQuery 的更新日志：

2. 备份现有代码

# 创建备份分支
git checkout -b backup-before-jquery-upgrade

# 或复制整个项目目录
cp -r my-project my-project-backup

3. 测试兼容性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 版本测试</title>
<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
  }
  .test-section {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .version-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
  }
  .version-card {
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    border: 2px solid #ddd;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s;
  }
  .version-card:hover {
    border-color: #3498db;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .version-card h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
  }
  .version-card p {
    margin: 5px 0;
    font-size: 12px;
    color: #7f8c8d;
  }
  .test-result {
    margin-top: 15px;
    padding: 15px;
    background-color: white;
    border-radius: 5px;
    border: 2px dashed #3498db;
    display: none;
  }
  .test-result.success {
    border-color: #2ecc71;
    background-color: #e8f5e9;
  }
  .test-result.error {
    border-color: #e74c3c;
    background-color: #fadbd8;
  }
</style>
</head>
<body>

<div class="container">
  <h1>jQuery 版本选择与测试</h1>

  <div class="test-section">
    <h3>选择 jQuery 版本</h3>
    <p>点击下方卡片加载对应版本的 jQuery：</p>
    <div class="version-grid">
      <div class="version-card" onclick="loadVersion('1.12.4')">
        <h4>jQuery 1.12.4</h4>
        <p>兼容 IE6+</p>
        <p>维护中</p>
      </div>
      <div class="version-card" onclick="loadVersion('2.2.4')">
        <h4>jQuery 2.2.4</h4>
        <p>兼容 IE9+</p>
        <p>维护中</p>
      </div>
      <div class="version-card" onclick="loadVersion('3.6.0')">
        <h4>jQuery 3.6.0</h4>
        <p>兼容 IE9+</p>
        <p>最新版本</p>
      </div>
    </div>
  </div>

  <div class="test-section">
    <h3>版本测试</h3>
    <button onclick="testBasic()" style="padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">基础功能测试</button>
    <button onclick="testAnimation()" style="padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">动画测试</button>
    <button onclick="testAjax()" style="padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer;">AJAX 测试</button>
    <div id="testResult" class="test-result"></div>
  </div>

  <div class="test-section">
    <h3>当前版本信息</h3>
    <div style="padding: 15px; background-color: white; border-radius: 5px;">
      <p><strong>jQuery 版本：</strong><span id="currentVersion">未加载</span></p>
      <p><strong>浏览器：</strong><span id="browserInfo"></span></p>
      <p><strong>加载时间：</strong><span id="loadTime"></span></p>
    </div>
  </div>
</div>

<script>
var currentJQueryVersion = null;
var loadStartTime = null;

function loadVersion(version) {
  loadStartTime = Date.now();
  
  // 移除旧的 jQuery
  $('script[src*="jquery"]').remove();
  
  // 加载新版本
  var script = document.createElement('script');
  script.src = 'https://code.jquery.com/jquery-' + version + '.min.js';
  script.onload = function() {
    currentJQueryVersion = version;
    var loadTime = Date.now() - loadStartTime;
    
    $("#currentVersion").text(version + " (" + $.fn.jquery + ")");
    $("#loadTime").text(loadTime + "ms");
    $("#testResult").hide();
    
    alert("jQuery " + version + " 加载成功！");
  };
  script.onerror = function() {
    alert("jQuery " + version + " 加载失败！");
  };
  
  document.head.appendChild(script);
}

function testBasic() {
  if (!currentJQueryVersion) {
    alert("请先加载 jQuery 版本");
    return;
  }
  
  var results = [
    "✓ 选择器测试：" + $("h1").length + " 个 h1 元素",
    "✓ each 方法：" + ($.each ? "支持" : "不支持"),
    "✓ extend 方法：" + ($.extend ? "支持" : "不支持"),
    "✓ ready 方法：" + ($.fn.ready ? "支持" : "不支持")
  ];
  
  $("#testResult").removeClass("error").addClass("success").show().html(
    "<p><strong>基础功能测试通过</strong></p>" +
    results.map(r => "<p>" + r + "</p>").join('')
  );
}

function testAnimation() {
  if (!currentJQueryVersion) {
    alert("请先加载 jQuery 版本");
    return;
  }
  
  $("#testResult").removeClass("success error").show().html("<p>正在测试动画...</p>");
  
  $("#testResult").fadeOut(300, function(){
    $(this).fadeIn(300, function(){
      $(this).removeClass("error").addClass("success").html("<p><strong>✓ 动画测试通过</strong></p>");
    });
  });
}

function testAjax() {
  if (!currentJQueryVersion) {
    alert("请先加载 jQuery 版本");
    return;
  }
  
  $("#testResult").removeClass("success").show().html("<p>正在测试 AJAX...</p>");
  
  $.get("https://jsonplaceholder.typicode.com/posts/1")
    .done(function(data){
      $("#testResult").removeClass("error").addClass("success").html(
        "<p><strong>✓ AJAX 测试通过</strong></p>" +
        "<p>获取数据：" + JSON.stringify(data).substring(0, 60) + "...</p>"
      );
    })
    .fail(function(){
      $("#testResult").removeClass("success").addClass("error").html(
        "<p><strong>✗ AJAX 测试失败</strong></p>" +
        "<p>可能是跨域限制</p>"
      );
    });
}

// 显示浏览器信息
$("#browserInfo").text(navigator.userAgent);
</script>

</body>
</html>

4. 使用 jQuery Migrate

jQuery Migrate 插件可以帮助检测和修复不兼容的代码：

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

5. 逐步升级

不要跨版本升级，建议逐步升级：

1.8.x → 1.9.x → 1.10.x → 1.11.x → 1.12.x → 2.x → 3.x

常见升级问题

1. .size() 方法被移除

// jQuery 1.x
var count = $("div").size();

// jQuery 2.x/3.x
var count = $("div").length;

2. .andSelf() 方法被移除

// jQuery 1.x
$("div").find("p").andSelf();

// jQuery 2.x/3.x
$("div").find("p").addBack();

3. .bind()、.delegate()、.live() 被弃用

// jQuery 1.x
$("button").live("click", function(){});

// jQuery 2.x/3.x
$(document).on("click", "button", function(){});

4. .load()、.unload()、.error() 被移除

// jQuery 1.x
$("img").load(function(){});

// jQuery 2.x/3.x
$("img").on("load", function(){});

版本选择建议

开发环境

<!-- 使用最新开发版 -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

生产环境

<!-- 使用稳定的生产版 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

长期支持

<!-- 使用 LTS 版本 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

总结

选择和升级 jQuery 版本时，应该考虑：

  1. 浏览器兼容性：根据目标用户选择合适的版本
  2. 项目需求：新项目用最新版，旧项目保持稳定
  3. 升级风险：使用 jQuery Migrate 辅助升级
  4. 测试充分：升级前进行全面测试
  5. 逐步升级：不要跨版本升级

记住：稳定第一，升级第二！

上一章：开发版与生产版区别
下一章：jQuery 基础语法