Du trenger (sannsynligvis) ikke jquery i 2026: Migrasjonsguiden

I 2008 var jQuery en redningsmann. Den normaliserte nettleserkaos og gjorde $('.element').hide() magisk. I 2026 er det teknisk gjeld.

Moderne nettlesere støtter ES6+ funksjoner innebygd. Å laste en 80KB bibliotek bare for å veksle en klasse er en ytelsesforbrytelse.

Denne guiden hjelper WordPress-utviklere med å migrere deres gamle jQuery-kode til Vanilla JS.

#1. Velgere (selectors)

Slutt å spørre DOM med $().

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

// Vanilla JS
const btn = document.querySelector('.btn'); // Første treff
const btns = document.querySelectorAll('.btn'); // Alle treff (NodeList)
const container = document.getElementById('container'); // Raskere

#2. Event listeners

on() og click() er borte. Bruk innebygde lyttere.

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

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

#Event delegation (“live”-måten)

Husker du live() eller delegate()? Her er den moderne ekvivalenten for å håndtere dynamisk tilladte elementer.

document.addEventListener('click', function(e) {
    if (e.target.matches('.btn-dynamic')) {
        console.log('Dynamisk knapp klikket!');
    }
});

#3. Dom-manipulasjon

Endring av klasser og stiler er renere nå.

// 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 var flott, men fetch er innebygd og løftebasert (Promise-based).

// 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 - Den beste måten)
async function getData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
}

#5. Document ready

Du trenger ikke $(document).ready().

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

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

#Hvorfor beholde jquery i WordPress?

WordPress leveres med jQuery i “kompatibilitetsmodus” (jQuery.noConflict()). Millioner av plugins avhenger av det. Ikke avregistrer det globalt med mindre du er sikker på at ingen plugin trenger det.

Men for ditt eget tema, slutt å bruke det.

1. Fjern array('jquery') fra dine wp_enqueue_script-avhengigheter.
2. Skriv standard ES6 JavaScript.
3. Nyt en raskere side og overførbare ferdigheter.