10 jQuery-Funktionen, die Sie durch native APIs ersetzen können

Laden Sie jQuery immer noch für eine Handvoll praktischer Methoden? Moderne Browser liefern native APIs mit, die die meisten jQuery-Muster direkt abdecken – oft mit besserer Performance und Funktionen, die jQuery nie geboten hat.

Dieser Leitfaden behandelt zehn gängige jQuery-Funktionen, die Sie bedenkenlos durch Vanilla JavaScript ersetzen können. Jeder Ersatz funktioniert in allen Evergreen-Browsern, benötigt keine Polyfills und bedeutet eine Abhängigkeit weniger, die Sie warten müssen.

DOM-Selektion mit querySelector

jQuerys $()-Selektor machte DOM-Abfragen einfach. Natives JavaScript erreicht mittlerweile dieselbe Einfachheit:

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

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

Die nativen Methoden akzeptieren jeden gültigen CSS-Selektor. Verwenden Sie querySelector für einzelne Elemente, querySelectorAll für Collections. Beide funktionieren auf jedem Element, nicht nur auf document, was Scoped Queries unkompliziert macht.

Klassenmanipulation mit classList

Die classList-API ersetzt jQuerys Klassenmethoden durch eine sauberere Syntax:

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

Native classList unterstützt auch mehrere Klassen in einem einzigen Aufruf: el.classList.add('active', 'visible'). Die replace()-Methode tauscht Klassen atomar aus – etwas, wofür jQuery zwei Aufrufe benötigte.

Event-Handling mit addEventListener

Ersetzen Sie jQuerys Event-Binding durch addEventListener:

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

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

Natives Event-Handling bietet Funktionen, die jQuery nicht sauber exponiert. Die passive-Option verbessert die Scroll-Performance, und once entfernt den Listener automatisch nach der ersten Ausführung:

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

DOM-Traversierung mit closest

jQuerys closest()-Methode findet den nächsten Vorfahren, der einem Selektor entspricht. Das native Äquivalent funktioniert identisch:

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

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

Kombinieren Sie es mit Optional Chaining für sicherere Traversierung: el.closest('.container')?.querySelector('.child').

Netzwerk-Requests mit fetch

Die Fetch API ersetzt jQuerys AJAX-Methoden durch ein Promise-basiertes Interface:

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

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

Fetch bietet Request-Abbruch via AbortController – eine Funktionalität, die jQuery nie nativ geboten hat.

Formulardaten mit der FormData API

Das Serialisieren von Formularen benötigt kein jQuery mehr:

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

// Native
const formData = new FormData(formElement)

Die FormData API handhabt Datei-Uploads direkt und integriert sich nahtlos mit fetch. Wenn Sie einen Query-String ähnlich jQuerys serialize() benötigen, übergeben Sie die FormData-Instanz an URLSearchParams.

Element-Entfernung mit remove()

Das Entfernen von Elementen wurde mit nativem remove() einfacher:

// jQuery
$el.remove()

// Native
el.remove()

Keine parentNode.removeChild(el)-Verrenkungen mehr.

Iteration über Collections

jQuery iteriert automatisch über Collections. Natives JavaScript verwendet Standard-Array-Methoden:

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

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

NodeList.forEach() funktioniert direkt. Für Array-Methoden wie map oder filter spreaden Sie in ein Array: [...document.querySelectorAll('.items')].

Animation mit CSS und der Web Animations API

CSS-Transitions decken die meisten Animations-Anforderungen ab. Für programmatische Kontrolle bietet die Web Animations API, was jQuerys animate() bot – plus bessere Performance:

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

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

Die native API kann Animationen außerhalb des Main Threads ausführen, wenn sie Compositor-freundlich sind.

Document Ready

Ersetzen Sie jQuerys Ready-Handler durch DOMContentLoaded:

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

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

Oder platzieren Sie Scripts am Ende von <body> mit dem defer-Attribut und überspringen Sie Ready-Checks komplett.

Fazit

Das Entfernen von jQuery aus einer Codebasis erfordert kein vollständiges Rewrite. Beginnen Sie mit neuem Code – verwenden Sie native APIs standardmäßig. Für bestehende jQuery-Verwendung helfen Tools wie You Might Not Need jQuery dabei, unkomplizierte Ersetzungen zu identifizieren.

Moderne DOM-APIs sind nicht nur jQuery-Alternativen – sie sind oft die bessere Wahl. Sie sind schneller, bieten mehr Kontrolle und werden mit jedem Browser ausgeliefert, den Ihre Nutzer bereits haben.

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.