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

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 源码：

// 如果使用Mozillaif(jQuery.browser=="mozilla"||jQuery.browser=="opera"){jQuery.event.add(document,"DOMContentLoaded",jQuery.ready);}// 如果使用IEelseif(jQuery.browser=="msie"){document.write("<scr"+="""ipt="" id="__ie_init" defer="true" "="""src="javascript:void(0)"><\/script>");varscript=document.getElementById("__ie_init");script.onreadystatechange=function(){if(this.readyState=="complete")jQuery.ready();};}// 如果使用Safarielseif(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 带来了两大革命性改变：

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

看看这个对比：

// 传统DOM操作varelements=document.getElementById("contacts").getElementsByTagName("ul")[0].getElementsByClassName("people");for(vari=0;i<elements.length;i++){varitems=elements[i].getElementsByTagName("li");for(varj=0;j<items.length;j++){// 操作每个item}}// jQuery方式$("#contacts ul.people li").each(function(){// 操作每个item});

差距一目了然！

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

3. 辉煌岁月

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

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

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

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

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

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

4. 影响深远

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

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

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

5. 价值动摇

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

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

2009 年后，浏览器标准化进程大幅加速：

querySelector和querySelectorAll的出现
classListAPI 的普及
fetchAPI 替代 Ajax 需求
CSS3 动画替代 JavaScript 动画

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

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