Tu (provavelmente) não precisas de jquery em 2026: O guia de migração

Em 2008, o jQuery era um salvador. Normalizava o caos dos browsers e tornava $('.element').hide() mágico. Em 2026, é dívida técnica.

Browsers modernos suportam funcionalidades ES6+ nativamente. Carregar uma biblioteca de 80KB apenas para alternar uma classe é um crime de performance.

Este guia ajuda programadores WordPress a migrar o seu código jQuery legado para Vanilla JS.

1. Seletores

Para de consultar o DOM com $().

// jQuery
var $btn = $('.btn');
var $container = $('#container');

// Vanilla JS
const btn = document.querySelector('.btn'); // Primeira correspondência
const btns = document.querySelectorAll('.btn'); // Todas as correspondências (NodeList)
const container = document.getElementById('container'); // Mais rápido

2. Event listeners

on() e click() desapareceram. Usa listeners nativos.

// jQuery
$('.btn').click(function() {
    alert('Clicado!');
});

// Vanilla JS
document.querySelectorAll('.btn').forEach(btn => {
    btn.addEventListener('click', () => {
        alert('Clicado!');
    });
});

Delegação de eventos (a forma “live”)

Lembras-te de live() ou delegate()? Aqui está o equivalente moderno para lidar com elementos adicionados dinamicamente.

document.addEventListener('click', function(e) {
    if (e.target.matches('.btn-dynamic')) {
        console.log('Botão dinâmico clicado!');
    }
});

3. Manipulação do dom

Mudar classes e estilos é mais limpo agora.

// jQuery
$el.addClass('active').removeClass('hidden');
$el.css('color', 'red');

// Vanilla JS
el.classList.add('active');
el.classList.remove('hidden');
el.classList.toggle('open');
el.style.color = 'red';

4. Ajax (fetch API)

$.ajax era ótimo, mas fetch é nativo e baseado em Promises.

// jQuery
$.ajax({
    url: '/api/data',
    success: function(data) { console.log(data); }
});

// Vanilla JS (Moderno)
fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// Vanilla JS (Async/Await - A Melhor Forma)
async function getData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
}

5. Document ready

Não precisas de $(document).ready().

// jQuery
$(document).ready(function() { ... });

// Vanilla JS
document.addEventListener("DOMContentLoaded", function() {
    // DOM está pronto
});

Porquê manter jquery no WordPress?

O WordPress vem com jQuery em “modo de compatibilidade” (jQuery.noConflict()). Milhões de plugins dependem dele. Não o desregistes globalmente a menos que tenhas a certeza de que nenhum plugin precisa dele.

No entanto, para o teu próprio tema, para de o usar.

1. Remove array('jquery') das tuas dependências de wp_enqueue_script.
2. Escreve JavaScript ES6 padrão.
3. Desfruta de um site mais rápido e competências transferíveis.