jQuery w 2026 roku – Przeżytek czy wciąż użyteczne narzędzie?

W 2008 roku jQuery było wybawieniem. Normalizowało chaos przeglądarkowy i sprawiało, że $('.element').hide() było magiczne. W 2026 roku to dług technologiczny.

Nowoczesne przeglądarki wspierają standard ES6+ natywnie. Ładowanie 80KB biblioteki tylko po to, by przełączyć klasę, to zbrodnia na wydajności.

Ten przewodnik pomoże programistom WordPressa przenieść ich stary kod jQuery do Vanilla JS.

1. Selektory

Przestań odpytywać DOM za pomocą $().

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

// Vanilla JS
const btn = document.querySelector('.btn'); // Pierwsze dopasowanie
const btns = document.querySelectorAll('.btn'); // Wszystkie (NodeList)
const container = document.getElementById('container'); // Szybsze

2. Event Listeners (Zdarzenia)

on() i click() odeszły. Używaj natywnych nasłuchiwaczy.

// jQuery
$('.btn').click(function() {
    alert('Kliknięto!');
});

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

Delegacja Zdarzeń (Następca “Live”)

Pamiętasz live() lub delegate()? Oto nowoczesny odpowiednik dla obsługi dynamicznie dodawanych elementów.

document.addEventListener('click', function(e) {
    if (e.target.matches('.btn-dynamic')) {
        console.log('Kliknięto dynamiczny przycisk!');
    }
});

3. Manipulacja DOM

Zmiana klas i stylów jest teraz czystsza.

// 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 było świetne, ale fetch jest natywny i oparty na Promise.

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

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

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

5. Document Ready

Nie potrzebujesz $(document).ready().

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

// Vanilla JS
document.addEventListener("DOMContentLoaded", function() {
    // DOM jest gotowy
});

Dlaczego trzymać jQuery w WordPressie?

WordPress dostarcza jQuery w “trybie kompatybilności” (jQuery.noConflict()). Miliony wtyczek od niego zależą. Nie wyrejestrowuj go globalnie, chyba że jesteś pewien, że żadna wtyczka go nie potrzebuje.

Jednak w Twoim własnym motywie, przestań go używać.

1. Usuń array('jquery') ze swoich zależności w wp_enqueue_script.
2. Pisz standardowy kod ES6 JavaScript.
3. Ciesz się szybszą stroną i umiejętnościami, które przetrwają próbę czasu.