querySelector() vs jQuery

Mit der Einführung des querySelector() in JavaScript wird jQuery in vielerlei Hinsicht überflüssig.
Aber was genau ist eigentlich jQuery und wo ist der Unterschied zu querySelector oder querySelectorAll?

querySelector ist eine JavaScript-Methode welche in modernen Browsern integriert ist, während jQuery eine externe JavaScript-Bibliothek ist, die heruntergeladen oder eingebunden werden muss. Während man mit querySelector direkt auf die Web-API des Browsers zugreift, bietet jQuery eine Abstraktionsschicht mit einer eigenen, kürzeren Syntax.

Unterschiede:
querySelector:
  • gibt das erste übereinstimmende HTML-Element direkt als DOM-Knoten zurück.
    Möchte man alle Elemente ansprechen, muss man querySelectorAll nutzen.
    Die Syntax sieht aus wie folgt:
    document.querySelector('.box').classList.add('active');
  • Methoden wie querySelector laufen direkt im Browser und sind deutlich performanter als Bibliotheken, die JavaScript-Code über native Methoden stülpt.
  • querySelector unterstützt standartmäßig CSS-Selektoren.
jQuery:
  • gibt immer ein jQuery-Objekt zurück. Dieses Objekt kapselt die Elemente ein. Dadurch kann man jQuery-Methoden direkt aneinanderreihen, wie etwa:
    $('.box').addClass('active').fadeIn();
  • Für die Nutzung von jQuery muss der Nutzer erst die Bibliothek herunterladen was die Ladezeit der Website erhöht.
  • jQuery nutzt intern eine eigene Engine. Diese erlaubt mächtigere, nicht-standardisierte Pseudo-Selektoren wie z.B.:
    :animated, :visible oder :contains().

Syntaxvergleich: 
// Einzelnes  Element ansprechen querySelector:
const el = document.querySelector( '#main-nav' );
// Einzelnes  Element ansprechen jQuery:
const el = $( '#main-nav' );

// Alle Element über querySelectorAll ansprechen und via Schleife bearbeiten:
document.querySelectorAll( '.card' ).forEach( el => {
	el.style.backgroundColor = 'blue';
});
// Alle Element über jQuery ansprechen und bearbeiten:
$( '.card' ).css('background-color','blue');

Fazit: Was soll man heute benutzen?
Das zu beurteilen fällt mir schwer. Aber ich als Thomas Brunner bin der Ansicht, man sollte, wenn es geht, auf fremde Bibliotheken wie jQuery weitgehendst verzichten. Außer man muss auf fertige Applikationen wie "Slider", "Drag&Drop" etc. zurückgreifen.
Aber auch hier finde ich die Herausforderung es selbst zu programmieren, wesentlich spannender. Zumal man sich Bibliotheken und Applikationen selbst erstellen kann. Was wir hier ja auch vorhaben ;-)

Wenn Ihr Anregungen oder Kommentare habt, seid so nett und kontaktiert mich unter: Kontakt