jQuery vs Vanilla JS i 2026: migrering, risiko og når beholde det

I 2008 var jQuery en redningsmann. Den normaliserte nettleserkaos og gjorde $('.element').hide() magisk. I 2026 er det teknisk gjeld for de fleste egne tema-skript.

Moderne nettlesere støtter ES6+ innebygd. Å laste et ~30–90 KB bibliotek (avhengig av build og compress) bare for å veksle en klasse er en ytelsesfeil, spesielt på mobilnett i Norge. Denne guiden hjelper WordPress-utviklere med å migrere egen jQuery-kode til Vanilla JS, uten å knuse plugins som fortsatt forventer jQuery i global scope.

Referanser: Fetch API, querySelector, wp_enqueue_script.

#Hva som endret seg siden jQuery-æraen

• IE-quirks er borte for praktiske formål i moderne målgrupper.
• querySelector / querySelectorAll dekker nesten alle CSS-velgere jQuery ble brukt til.
• classList, closest, matches, dataset erstatter typiske DOM-helpers.
• fetch + Promises/async erstatter $.ajax.
• WordPress core har ryddet: jQuery Migrate ble fjernet fra frontend-default i 5.5; jQuery i core er fortsatt der for kompatibilitet, ikke fordi temaet ditt trenger det.

Poenget er ikke å hate jQuery. Poenget er å slutte å betale for det i dine bundles.

#1. Velgere (selectors)

Slutt å spørre DOM med $() i ny kode.

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

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

NodeList fra querySelectorAll er ikke et jQuery-objekt. Du får ikke .addClass() på lista. Bruk .forEach() eller spre til array når du trenger array-metoder. Null-sjekk querySelector-resultatet før du kaller metoder; jQuery svelget tomme sett mer stille.

#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 dynamisk injiserte elementer (AJAX-lister, Gutenberg-frontend-blokker som renderer sent):

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

Delegation på document er greit for sparsomme UI-er. På store WooCommerce-sider: bind nærmere (f.eks. #content) for færre unødvendige handler-kjøringer.

#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';

For flere CSS-egenskaper: vurder CSS-klasser fremfor inline styles. Da slipper du specificity-krig mot Tailwind eller tema-CSS. classList.toggle(token, force) med boolean er nyttig når tilstanden kommer fra server/API.

#4. Ajax (fetch API)

$.ajax var flott, men fetch er innebygd og Promise-basert.

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

// Vanilla JS (then)
fetch('/api/data')
    .then((response) => {
        if (!response.ok) throw new Error('HTTP ' + response.status);
        return response.json();
    })
    .then((data) => console.log(data))
    .catch((error) => console.error(error));

// Vanilla JS (async/await)
async function getData() {
    const response = await fetch('/api/data');
    if (!response.ok) throw new Error('HTTP ' + response.status);
    const data = await response.json();
    console.log(data);
}

I WordPress REST mot innloggede brukere: send cookies (credentials: 'same-origin') og X-WP-Nonce. I blokkeditor: preferer wp.apiFetch som allerede håndterer middleware og nonce. Rå fetch mot admin-ajax.php fungerer fortsatt, men REST er renere for ny kode.

#5. Document ready

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

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

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

Hvis skriptet ditt er enqueue’t med defer eller ligger før </body> og bare trenger DOM, er DOMContentLoaded ofte redundant. Les rekkefølgen: mange «race conditions» i gamle temaer var egentlig «jQuery ready vs egne skript uten defer».

#6. Animasjon og show/hide

$el.fadeIn() er ikke et argument for å beholde hele jQuery. Bruk CSS transitions (opacity, transform) og toggle en klasse. Redusert bevegelse: respekter prefers-reduced-motion. For komplekse tidslinjer: Web Animations API, ikke en 80 KB dependency.

#Migrasjonsplan uten big bang

1. Inventer. Grep i temaet etter jQuery(, $(, .ajax(, .on(. Ignorer node_modules og plugin-mapper du ikke eier.
2. Skill lag. Egen tema-JS først. Plugins sist (eller aldri).
3. Fjern array( 'jquery' ) fra dine wp_enqueue_script-kall når filen er migrert.
4. Test kritiske løp: meny, modal, AJAX-filter, checkout hvis WooCommerce, innlogging.
5. Mål. Lighthouse/WebPageTest før/etter: JS-bytes og main-thread time på mobil.

Ikke avregistrer jQuery globalt med wp_deregister_script( 'jquery' ) på dag én. Det er den raskeste måten å få en «hvit skjerm» i admin eller en døende slider-plugin.

#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 (eller TypeScript kompilert til moderne mål).
3. Nyt færre bytes og ferdigheter som overføres til andre stacks (Astro, Next, ren PHP-temaer).

Typisk norsk byrå-case: Twenty-noget-child med tre egne filer som bare toggler mobilmeny. Etter migrering forsvant jQuery-avhengigheten fra frontend-HTML for anonyme brukere, mens admin og ett skjemaplugin fortsatt lastet jQuery der det trengtes. Det er riktig kompromiss.

#Vanlige feller

• Anta at $ finnes. I WordPress er $ ikke garantert uten wrapper jQuery(function ($) { ... }).
• Migrere til Vanilla, men la skriptet fortsatt liste jquery som dependency «for sikkerhets skyld». Da laster du biblioteket uten å bruke det.
• Erstatte $.ajax med fetch uten å sjekke response.ok.
• Bruke innerHTML til å injisere brukerinnhold uten escaping (XSS). jQuery .html() hadde samme fotang; Vanilla gjør den mer synlig.
• Glemme at querySelectorAll er statisk. Nye noder krever delegation eller ny spørring.

#Sjekkliste før produksjon

1. Ingen egne temafiler refererer $ / jQuery uten at dependency er bevisst.
2. Frontend-HTML for innlogget-ut bruker laster ikke jQuery med mindre et plugin krever det.
3. Checkout / skjema / filter testet i staging.
4. Ingen console-feil jQuery is not defined fra din kode (plugin-feil håndteres separat).
5. Notér JS-KB før/etter i deploy-ticket.

#Interaksjon med blokkeditor og plugins

Gutenberg og mange blokker forventer ikke jQuery på frontend for anonyme brukere, men enkelte tredjepartsblokker og page builder-widgets gjør det fortsatt. Etter at temaet ditt er migrert, last en innloggingsside, en produktside og en side med den tyngste blokken du bruker. Se Network-fanen: lastes jquery.min.js bare fordi du ba om det, eller fordi et plugin enqueue’t det?

I admin er bildet annerledes. wp-admin og mange metabox-plugins er fortsatt jQuery-tunge. Ikke optimaliser admin bort; fokusér på offentlig HTML. Et typisk kompromiss i norske SMB-prosjekter: jQuery i admin + utvalgte plugins, Vanilla i tema-frontend. Dokumenter unntakene i temaets README, så neste utvikler ikke «rydder» jQuery og knuser kontaktskjemaet.

#Ytelse: hva du faktisk sparer

Gevinsten er ikke magisk. På en side som allerede laster 1,2 MB JS fra tags og chat-widgets er 30–80 KB jQuery en mindre post. På en streng bedriftsside med få tredjepartsskript er fjerningen synlig i Lighthouse «Unused JavaScript» og i main-thread time på mid-range Android. Mål på ekte enhet eller WebPageTest mobilprofil, ikke bare på MacBook på fiber i Oslo.

Kombiner migreringen med defer/type=module der det passer, og unngå å erstatte jQuery med tre nye utility-biblioteker. Da har du bare byttet gjeld.

#Neste steg

For eget tema: migrer velgere, events og fetch først. La plugins være. Trenger du hjelp til ytelses- og frontend-audit på et WordPress-prosjekt, ta kontakt via kontaktsiden. Relatert: WordPress-utvikler.