普通视图

发现新文章,点击刷新页面。
今天 — 2026年1月20日首页

回首 jQuery 20 年:从辉煌到没落

作者 冴羽
2026年1月20日 18:53

2006 年 1 月 14 日,John Resig 发布了名为 jQuery 的 JavaScript 库。

至今已经过去了 20 年!

20 周年之际,jQuery 4.0 正式发布了!

是的,就是那个被无数人宣布“已死”的 jQuery,经过 10 年的等待后迎来了重大更新。

更让人意想不到的是,根据 W3Techs 的数据,jQuery 仍然被全球 78% 的网站使用

这个数字意味着什么?

在 React、Vue、Angular 等现代框架横行的今天,那个曾经被我们嫌弃“老掉牙”的 jQuery,依然在互联网的角落里默默发光发热。

从 2006 年 John Resig 在 BarCampNYC 大会上首次发布,到今天 4.0 版本的现代化重生,jQuery 走过了整整 20 年。

它不仅是一个 JavaScript 库,更是一个时代的缩影,见证了前端技术从混沌到繁荣的完整历程。

本篇让我们一起回顾 jQuery 的 20 年,见证它的辉煌与没落。

1. 混沌时代

回望 2006 年,彼时正值第一次浏览器战争的尾声,微软 IE 与网景 Navigator 刚刚打完仗,但遗留下来的兼容性问题却让无数前端开发者头疼不已。

当时开发者需要面对各种浏览器的“奇技淫巧”,光是一个事件绑定就要写一大串兼容代码。

来看看这段早期的 jQuery 源码:

// 如果使用Mozilla
if (jQuery.browser == "mozilla" || jQuery.browser == "opera") {
    jQuery.event.add(document, "DOMContentLoaded", jQuery.ready);
}
// 如果使用IE
else if (jQuery.browser == "msie") {
    document.write("<scr" +="" "ipt="" id="__ie_init" defer="true" "="" "src="javascript:void(0)"><\/script>");
    var script = document.getElementById("__ie_init");
    script.onreadystatechange = function() {
        if (this.readyState == "complete") jQuery.ready();
    };
}
// 如果使用Safari
else if (jQuery.browser == "safari") {
    jQuery.safariTimer = setInterval(function(){
        if (document.readyState == "loaded" || document.readyState == "complete") {
            clearInterval(jQuery.safariTimer);
            jQuery.ready();
        }
    }, 10);
}
</scr">

看到没?仅仅是处理页面加载事件就要写这么多兼容代码!这在今天是难以想象的。

2. 横空出世

就在这时,jQuery 横空出世,彻底改变了游戏规则。

John Resig 提出了一个简单而优雅的理念:

Write Less,Do More

jQuery 通过精简常见的重复性任务,去除所有不必要的标记,使代码简洁、高效且易于理解,从而实现这一目标。

jQuery 带来了两大革命性改变:

  1. 强大的选择器引擎:不再局限于简单的 ID 和类选择,可以进行复杂的关系选择
  2. 优雅的 API 设计:链式操作让代码既简洁又易读

看看这个对比:

// 传统DOM操作
var elements = document.getElementById("contacts").getElementsByTagName("ul")[0].getElementsByClassName("people");
for (var i = 0; i < elements.length; i++) {
  var items = elements[i].getElementsByTagName("li");
  for (var j = 0; j < items.length; j++) {
    // 操作每个item
  }
}

// jQuery方式
$("#contacts ul.people li").each(function () {
  // 操作每个item
});

差距一目了然!

jQuery 的出现让前端开发变得如此优雅,以至于迅速在开发者群体中传播开来。

3. 辉煌岁月

随着 jQuery 的普及,一个庞大的插件生态迅速建立起来。

从日期选择器到轮播图,从表单验证到动画效果,几乎你能想到的功能都有对应的 jQuery 插件。

那时候前端开发的标准流程是:

  1. 下载 jQuery 核心库
  2. 搜索并下载所需的 jQuery 插件
  3. 组合这些插件完成项目

同时,jQuery 的管理也变得正式。

2011 年,jQuery 团队正式成立了 jQuery 理事会。2012 年,jQuery 理事会成立了 jQuery 基金会。

4. 影响深远

jQuery 的影响力远远超出了技术本身,它推动了整个前端行业的发展:

  • **大幅降低了前端开发的门槛:**让更多的开发者能够参与到前端开发中来
  • 提升了前端工程师的社会地位:让前端开发变得更加专业和重要
  • 促进了浏览器厂商的标准化:jQuery 的成功证明了统一 API 的重要性
  • 催生了现代前端工具链:为后来的模块化、构建工具奠定了基础

甚至连 jQuery 的选择器引擎 Sizzle 后来都被提取出来,影响了整个选择器标准的发展。

5. 价值动摇

jQuery 之所以能够快速普及,很大程度上是因为浏览器的“不争气”。

而当浏览器厂商开始认真对待标准化问题时,jQuery 的核心价值就开始动摇了。

2009 年后,浏览器标准化进程大幅加速:

  • querySelectorquerySelectorAll的出现
  • classList API 的普及
  • fetch API 替代 Ajax 需求
  • CSS3 动画替代 JavaScript 动画

现代浏览器 API 的完善,让很多 jQuery 功能都有了原生替代品:

// jQuery方式
$("#btn").on("click", () => $("#box").addClass("active"));

// 原生方式
document.querySelector("#btn").addEventListener("click", () => {
  document.querySelector("#box").classList.add("active");
});

你可以发现,差距已经不再那么明显!

6. 框架打击

2010 年,React、Angular、Vue 等现代框架相继登场,带来了革命性的变化:

  1. 组件化思维:从 DOM 操作转向组件构建
  2. 声明式编程:描述“什么”而不是“如何”
  3. 状态管理:解决了复杂应用的维护问题
  4. 工具链完善:从构建到部署的完整解决方案

这些框架从架构层面解决了 jQuery 时代的问题,就像从手工制作转向了工业化生产。

7. 惨遭背叛

2018 年,GitHub 公开宣布从其前端移除 jQuery,这个标志性事件被广泛解读为“jQuery 时代的终结”。

GitHub 在博客中详细说明了迁移的理由:现代浏览器 API 已经足够完善,React 的组件化模式更适合大型应用的维护。

这个“背叛”对 jQuery 的声誉造成了重大打击,也加速了它在新技术栈中的衰落。

8. 瘦死骆驼

尽管在技术前沿领域失势,但 jQuery 在存量市场中的地位依然稳固:

  • 78% 的顶级网站仍在使用 jQuery
  • WordPress 等 CMS 系统大量依赖 jQuery
  • 企业级应用中 jQuery 代码基数庞大

为什么企业不直接抛弃 jQuery?

因为现实远比理想复杂:

  1. 业务逻辑与 DOM 深度耦合:重构成本巨大
  2. 第三方插件依赖:很多插件没有现代替代方案
  3. 迁移风险:新功能开发受阻,影响营收
  4. 技能断层:团队对旧技术熟悉,对新技术陌生

比如一个电商网站如果要重构支付流程的 jQuery 代码,任何 bug 都可能导致直接的经济损失。这种风险评估让很多公司望而却步。

此外,WordPress 支撑着全球 43% 的网站,它的核心仍然依赖 jQuery。这个庞大的生态系统意味着:

  • 数十万主题和插件依赖 jQuery
  • 内容管理系统对稳定性的要求远超先进性
  • 托管服务商倾向于保持现有技术栈

所以即使所有前端开发者都不再使用 jQuery,仅 WordPress 生态系统就能让它继续存在很多年。

9. 拥抱现代

2026 年 1 月 17 日,jQuery 4.0 正式发布,在这次发布中:

  • 移除对 IE11 以下版本的支持:摆脱历史包袱
  • 迁移到 ES 模块:与现代构建工具兼容
  • 增加 Trusted Types 支持:提升安全性
  • 移除已弃用 API:清理技术债务

这次更新像是 jQuery 面向现代 Web 的断舍离。

10. 结语:一个时代的完结

jQuery 20 年的发展史,就是一部前端技术的缩影。

它从解决现实问题出发,推动了整个行业的发展,最终也随着时代的变化而淡出主流。

这并不意味着 jQuery 是失败的。恰恰相反,它超额完成了自己的历史使命

  • 它让无数人学会了前端开发
  • 它推动了浏览器厂商的标准化
  • 它催生了现代前端生态
  • 它证明了开源协作的力量

正如那句经典的台词:“并不是英雄迟暮,而是时代需要新的英雄。”

jQuery 4.0 的发布不是回光返照,它告诉我们:技术没有绝对的对错,只有是否适合那个时代的需求

今天,当我们在 React、Vue 的组件化世界中忙碌时,偶尔回望一下 jQuery 的简单优雅,也许能获得一些关于技术本质的思考:

好的工具应该让人更专注于创造价值,而不是被技术本身所困扰。

我是冴羽,10 年笔耕不辍,专注前端领域,更新了 10+ 系列、300+ 篇原创技术文章,翻译过 Svelte、Solid.js、TypeScript 文档,著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。

欢迎围观我的“网页版朋友圈”,关注我的公众号:冴羽(或搜索 yayujs),每天分享前端知识、AI 干货。

昨天 — 2026年1月19日首页

20 周年之际!jQuery 4.0 正式发布!轻装上阵

作者 冴羽
2026年1月19日 17:22

2006 年 1 月 14 日,John Resig 发布了名为 jQuery 的 JavaScript 库。

至今已经整整过去了 20 年!

你还记得第一次在项目中使用 jQuery 的场景吗?

在那个浏览器兼容性让人头疼,DOM 操作繁琐复杂的时代,jQuery 凭借着“Write less, do more”的理念,几乎是那个时代网站开发的标配。

后来,前端框架层出不穷,React、Vue、Angular 各领风骚,但 jQuery 依然在全球数百万网站上默默工作着。

如今, jQuery 4.0.0 正式版发布。

这也是 jQuery 近 10 年来的首个主要版本,标志着 jQuery 正式踏上了现代化转型之路。

让我们一起来看看 jQuery 4.0 都做了哪些更新。

1. 彻底告别 IE

jQuery 4.0 不再支持 IE 10 及更早版本。IE 11 预计在 5.0 版本移除。

同时也停止了一些老旧浏览器的支持,这使得 jQuery 代码更清爽,文件体积更小,性能提升显著。

2. 安全大升级

jQuery 4.0 引入了对 Trusted Types 的支持,jQuery 内部会自动通过 TrustedHTML 封装字符串,避免被 CSP 拦截,大大降低了网站被黑客攻击的风险。

3. 架构现代化

jQuery 源码从 AMD 迁移到了 ES Modules,这意味着更好的模块化开发体验,并为未来拆分功能打下基础。

4. API 精简

jQuery 4.0 移除了 15 个废弃的 API,这些函数要么是内部使用,要么已经有了原生的替代方案。

5. jQuery 的全新定位

有人可能会问:现在前端框架这么发达,jQuery 还有存在的必要吗?

答案是肯定的!

jQuery 不是要重新成为前端主角,而是在它适应的场景中继续发光发热。

6. 最后

jQuery 4.0 不是一次“重生”,而是一次面向现代 Web 的断舍离。它抛弃了历史包袱,拥抱了安全标准,清理了冗余代码,做了工程化升级。

20 年前,jQuery 改变了 Web 开发的方式;20 年后,它选择了与时俱进。

对于用过 jQuery 的老程序员来说,虽然我们已经习惯了 Vue、React 的思维模式,但看到 jQuery 的这次蜕变,依然会心潮澎湃。

因为这是我们青春岁月里最美好的代码记忆。

❌
❌