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.c
lassList 比 $el.addClass() 更轻量、无副作用fetch() + async/await 已覆盖 99% 的 AJAX 场景,无需 $.ajax 封装JSON.parse() 完全替代 $.parseJSON(),后者在 jQuery 4.0+ 中已被标记为废弃不是“等重构时再动”,而是只要遇到就该当场替换——它们既是性能瓶颈,也是未来维护雷区。
/* ❌ 过时写法(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-fetch polyfill,而非回退到 jQuery直接删 jquery.min.js 会导致白屏或报错——这不是技术问题,是迁移节奏问题。
$ 和 jQuery,区分「DOM 操作」和「插件调用」(如 $.datepicker())quill 替代 jqte,chart.js 替代 flot
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 插入后的自动绑定、或插件间奇怪的执行时序——这些不会报错,但会悄悄让新功能失效。动手前,先写好回归测试用例。