jQuery已过时,因现代浏览器全面支持ES2015+和原生DOM API,document.querySelector、classList、fetch等性能更高且无副作用,旧写法须立即替换为原生等价实现。

jQuery 过时了——不是“可能”,而是事实。2026 年还在新项目里引入完整 jQuery,相当于在高速公路上开拖拉机:能跑,但没必要,还拖累别人。
为什么 $ 不再是默认选择?
jQuery 的核心价值曾是“抹平浏览器差异”,比如 IE6–8 下 addEventListener 不存在、querySelector 不支持、fetch 还没影儿。但现在:Chrome/Firefox/Safari/Edge(含 Chromium 版)已全面支持 ES2015+ 和现代 DOM API;IE 已终止支持;就连国内部分政企环境也基本切换到 Edge 或 Chrome 内核。
-
document.querySelector性能是 jQuery$()的 3 倍以上(实测 V8 11.x+) -
element.classList比$el.addClass()更轻量、无副作用 -
fetch()+async/await已覆盖 99% 的 AJAX 场景,无需$.ajax封装 -
JSON.parse()完全替代$.parseJSON(),后者在 jQuery 4.0+ 中已被标记为废弃
哪些 jQuery 写法必须立刻改?
不是“等重构时再动”,而是只要遇到就该当场替换——它们既是性能瓶颈,也是未来维护雷区。
/* ❌ 过时写法(jQuery 3.6+ 仍可运行,但不推荐) */
$('#header').show().addClass('fixed');
$('.item').on('click', handler);
$.ajax({ url: '/api/data' });
/ ✅ 对应原生写法(兼容 Chrome 80+ / Firefox 78+ / Safari 14+) /
document.getElementById('header').style.display = 'block';
document.getElementById('header').classList.add('fixed');
document.querySelectorAll('.item').forEach(el => {
el.addEventListener('click', handler);
});
fetch('/api/data')
.then(r => r.json())
.then(data => console.log(data));
-
$('#id')→ 优先用document.getElementById()(最快),复杂选择才用querySelector() -
$('.class')→ 用document.querySelectorAll('.class'),注意返回的是静态 NodeList,不能直接.push() -
$el.on('click')→ 必须用addEventListener,且记得在不需要时调用removeEventListener避免内存泄漏 -
$.ajax→fetch是标准,若需 IE 兼容则加whatwg-fetchpolyfill,而非回退到 jQuery
如果老项目还在用 jQuery,怎么安全下线?
直接删 jquery.min.js 会导致白屏或报错——这不是技术问题,是迁移节奏问题。
立即学习“Java免费学习笔记(深入)”;
- 先全局搜索
$和jQuery,区分「DOM 操作」和「插件调用」(如$.datepicker()) - 对纯 DOM 场景,用 codemod 工具(如 jquery-to-native)批量转换,别手敲
- 对依赖 jQuery 插件的功能(如富文本、图表),不要硬改,而是用现代替代品:
quill替代jqte,chart.js替代flot - 保留 jQuery 仅用于尚未迁移的模块,通过
import $ from 'jquery'局部引入,避免污染全局$
还有哪些库同步过时?
jQuery 不是孤例。它代表一类“封装通用操作”的工具型库,在原生能力补全后,自然失去存在理由:
-
Moment.js:体积大(66 KB)、mutable API 易出错 → 改用date-fns(tree-shakable)或原生Temporal(Chrome 110+) -
Lodash:70% 的常用方法(map/filter/debounce)已有原生或更轻量替代 → 用lodash-es按需导入,或直接写Array.from() -
Underscore.js:功能与 Lodash 高度重叠,且无现代打包优化 → 无升级路径,直接删
真正难处理的从来不是语法替换,而是那些隐式依赖 jQuery 的事件委托逻辑、动态 DOM 插入后的自动绑定、或插件间奇怪的执行时序——这些不会报错,但会悄悄让新功能失效。动手前,先写好回归测试用例。











