10 Funcionalidades do jQuery Que Você Pode Substituir por APIs Nativas

Ainda carregando jQuery por um punhado de métodos de conveniência? Os navegadores modernos vêm com APIs nativas que lidam com a maioria dos padrões do jQuery diretamente—frequentemente com melhor desempenho e capacidades que o jQuery nunca ofereceu.

Este guia cobre dez funcionalidades comuns do jQuery que você pode substituir com confiança por JavaScript vanilla. Cada substituição funciona em todos os navegadores evergreen, não requer polyfills e te dá uma dependência a menos para manter.

Seleção DOM com querySelector

O seletor $() do jQuery tornou as consultas DOM simples. O JavaScript nativo agora corresponde a essa simplicidade:

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

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

Os métodos nativos aceitam qualquer seletor CSS válido. Use querySelector para elementos únicos, querySelectorAll para coleções. Ambos funcionam em qualquer elemento, não apenas em document, tornando consultas com escopo diretas.

Manipulação de Classes com classList

A API classList substitui os métodos de classe do jQuery com sintaxe mais limpa:

// 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')

O classList nativo também suporta múltiplas classes em uma única chamada: el.classList.add('active', 'visible'). O método replace() troca classes atomicamente—algo que o jQuery requeria duas chamadas para realizar.

Manipulação de Eventos com addEventListener

Substitua o binding de eventos do jQuery por addEventListener:

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

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

A manipulação de eventos nativa oferece capacidades que o jQuery não expõe de forma clara. A opção passive melhora o desempenho de scroll, e once remove automaticamente o listener após a primeira invocação:

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

Navegação DOM com closest

O método closest() do jQuery encontra o ancestral mais próximo que corresponde a um seletor. O equivalente nativo funciona de forma idêntica:

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

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

Combine com optional chaining para navegação mais segura: el.closest('.container')?.querySelector('.child').

Requisições de Rede com fetch

A Fetch API substitui os métodos AJAX do jQuery com uma interface baseada em promises:

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

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

Fetch fornece cancelamento de requisições via AbortController—funcionalidade que o jQuery nunca ofereceu nativamente.

Dados de Formulário com FormData API

Serializar formulários não requer mais jQuery:

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

// Native
const formData = new FormData(formElement)

A FormData API lida com uploads de arquivos diretamente e se integra perfeitamente com fetch. Se você precisar de uma query string similar ao serialize() do jQuery, passe a instância FormData para URLSearchParams.

Remoção de Elementos com remove()

Remover elementos ficou mais simples com o remove() nativo:

// jQuery
$el.remove()

// Native
el.remove()

Chega de ginástica com parentNode.removeChild(el).

Iterando Coleções

O jQuery itera automaticamente sobre coleções. JavaScript nativo usa métodos de array padrão:

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

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

NodeList.forEach() funciona diretamente. Para métodos de array como map ou filter, espalhe em um array: [...document.querySelectorAll('.items')].

Animação com CSS e Web Animations API

Transições CSS lidam com a maioria das necessidades de animação. Para controle programático, a Web Animations API fornece o que o animate() do jQuery oferecia—além de melhor desempenho:

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

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

A API nativa pode executar animações fora da thread principal quando são compositor-friendly.

Document Ready

Substitua o handler ready do jQuery por DOMContentLoaded:

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

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

Ou coloque scripts no final do <body> com o atributo defer e pule completamente as verificações de ready.

Conclusão

Remover o jQuery de uma base de código não requer uma reescrita completa. Comece com código novo—use APIs nativas por padrão. Para uso existente de jQuery, ferramentas como You Might Not Need jQuery ajudam a identificar substituições diretas.

As APIs DOM modernas não são apenas alternativas ao jQuery—frequentemente são a melhor escolha. São mais rápidas, oferecem mais controle e vêm com todos os navegadores que seus usuários já têm.

FAQs

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.