Back

10 个可以用原生 API 替换的 jQuery 特性

OpenReplay Team OpenReplay Team

Feb 10, 2026 · 3 min read

10 个可以用原生 API 替换的 jQuery 特性

仍然为了几个便捷方法而加载 jQuery?现代浏览器自带的原生 API 可以直接处理大多数 jQuery 模式——通常具有更好的性能和 jQuery 从未提供过的功能。

本指南涵盖了十个常见的 jQuery 特性,你可以放心地用原生 JavaScript 替换它们。每个替换方案都适用于所有现代浏览器,无需 polyfill,并且让你少维护一个依赖项。

核心要点

  • 原生 DOM API 如 querySelector、classList 和 addEventListener 现在在简洁性上与 jQuery 相当,同时提供更好的性能
  • Fetch API 提供基于 Promise 的网络请求功能,并具备 jQuery 从未提供的特性,包括通过 AbortController 取消请求
  • Web Animations API 在主线程之外运行动画,提供比 jQuery 的 animate() 方法更流畅的性能
  • 移除 jQuery 不需要完全重写——从新代码开始,逐步迁移现有用法

使用 querySelector 进行 DOM 选择

jQuery 的 $() 选择器使 DOM 查询变得简单。原生 JavaScript 现在也同样简洁:

// jQuery
$('.menu-item')
$('#header')

// Native
document.querySelectorAll('.menu-item')
document.querySelector('#header')

原生方法接受任何有效的 CSS 选择器。使用 querySelector 选择单个元素,querySelectorAll 选择元素集合。两者都可以在任何元素上使用,而不仅仅是 document,使作用域查询变得简单直接。

使用 classList 操作类名

classList API 用更简洁的语法替换了 jQuery 的类操作方法:

// jQuery
$el.addClass('active')
$el.removeClass('active')
$el.toggleClass('active')
$el.hasClass('active')

// Native
el.classList.add('active')
el.classList.remove('active')
el.classList.toggle('active')
el.classList.contains('active')

原生 classList 还支持在单次调用中操作多个类:el.classList.add('active', 'visible')。replace() 方法可以原子性地交换类——这在 jQuery 中需要两次调用才能完成。

使用 addEventListener 处理事件

用 addEventListener 替换 jQuery 的事件绑定:

// jQuery
$el.on('click', handler)
$el.off('click', handler)

// Native
el.addEventListener('click', handler)
el.removeEventListener('click', handler)

原生事件处理提供了 jQuery 无法简洁暴露的功能。passive 选项可以提高滚动性能,once 选项会在首次调用后自动移除监听器:

el.addEventListener('scroll', handler, { passive: true })
el.addEventListener('click', handler, { once: true })

使用 closest 进行 DOM 遍历

jQuery 的 closest() 方法查找匹配选择器的最近祖先元素。原生等效方法的工作方式完全相同:

// jQuery
$el.closest('.container')

// Native
el.closest('.container')

结合可选链进行更安全的遍历:el.closest('.container')?.querySelector('.child')。

使用 fetch 进行网络请求

Fetch API 用基于 Promise 的接口替换了 jQuery 的 AJAX 方法:

// jQuery
$.ajax({ url: '/api/data' }).done(callback)

// Native
fetch('/api/data')
  .then(response => response.json())
  .then(callback)

Fetch 通过 AbortController 提供请求取消功能——这是 jQuery 从未原生提供的功能。

使用 FormData API 处理表单数据

序列化表单不再需要 jQuery:

// jQuery
$('form').serialize()

// Native
const formData = new FormData(formElement)

FormData API 直接处理文件上传,并与 fetch 无缝集成。如果你需要类似 jQuery 的 serialize() 的查询字符串,可以将 FormData 实例传递给 URLSearchParams。

使用 remove() 移除元素

使用原生 remove() 移除元素变得更简单:

// jQuery
$el.remove()

// Native
el.remove()

不再需要 parentNode.removeChild(el) 这样的繁琐操作。

迭代集合

jQuery 会自动迭代集合。原生 JavaScript 使用标准数组方法:

// jQuery
$('.items').each(function() { /* ... */ })

// Native
document.querySelectorAll('.items').forEach(el => { /* ... */ })

NodeList.forEach() 可以直接使用。对于 map 或 filter 等数组方法,可以展开为数组:[...document.querySelectorAll('.items')]。

使用 CSS 和 Web Animations API 实现动画

CSS 过渡可以处理大多数动画需求。对于程序化控制,Web Animations API 提供了 jQuery 的 animate() 所提供的功能——并且性能更好:

// jQuery
$el.animate({ opacity: 0 }, 300)

// Native
el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300 })

当动画对合成器友好时,原生 API 可以在主线程之外运行动画。

文档就绪

用 DOMContentLoaded 替换 jQuery 的 ready 处理器:

// jQuery
$(document).ready(handler)

// Native
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', handler)
} else {
  handler()
}

或者将脚本放在 <body> 末尾并使用 defer 属性,完全跳过就绪检查。

总结

从代码库中移除 jQuery 不需要完全重写。从新代码开始——默认使用原生 API。对于现有的 jQuery 用法,You Might Not Need jQuery 等工具可以帮助识别直接的替换方案。

现代 DOM API 不仅仅是 jQuery 的替代品——它们通常是更好的选择。它们更快,提供更多控制,并且内置于用户已经拥有的每个浏览器中。

常见问题

不一定。如果 jQuery 在你当前的代码库中运行良好,移除它可能不值得付出努力。专注于在新代码中使用原生 API,并在日常维护期间逐步迁移现有的 jQuery 用法。目标是减少依赖,而不是重写稳定的代码。

本文涵盖的所有方法都适用于现代浏览器,包括 Chrome、Firefox、Safari 和 Edge。Internet Explorer 不支持某些功能,如 fetch 和 classList.replace(),但 IE 已于 2022 年终止支持。针对现代浏览器目标不需要 polyfill。

通常是的。原生 API 避免了 jQuery 抽象层和方法链的开销。性能差异在 DOM 密集型操作和动画中最为明显,原生方法可以利用 jQuery 无法访问的浏览器优化。

jQuery 插件需要 jQuery 才能运行。如果你依赖特定插件,可以为这些组件保留 jQuery,同时在其他地方使用原生 API。许多流行的插件都有原生 JavaScript 替代品,或者你可以在应用程序的特定模块中隔离 jQuery 的使用。

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog