JQuery

jQuery ist eine JavaScript-Bibliothek, deren Kernaufgabe darin besteht, den Umgang mit dem DOM zu vereinfachen. Sie ist 2006 erschienen und hatte eine klare Existenzberechtigung, weil die damals verfügbaren DOM Methoden recht sperrig waren. Auf diese Weise wurde es zu einem der meist genutzten JavaScript Frameworks. Im Laufe der Jahre hat sich ein breites Ökosystem an jQuery-Plugins entwickelt, und es gibt etliche JavaScript-Bibliotheken, die jQuery voraussetzen.

Der Kern von jQuery ist die Selektor-Bibliothek Sizzle, die umfangreiche Abfragen auf das DOM ermöglicht und dabei die von CSS Selektoren bekannte Syntax einsetzt. Das Ergebnis einer solchen Sizzle-Abfrage ist das so genannte mapped set - eine Sammlung von DOM Elementen, auf die der Selektor zutraf. Für dieses mapped set gibt es eine umfangreiche Sammlung an Funktionen, um die darin gefundenen Elemente zu manipulieren.

Zu der Zeit, als jQuery erschien, waren die Browser längst nicht so standardisiert wie heute. Vieles musste für jeden Browser unterschiedlich implementiert werden. jQuery hatte den Anspruch, diese Unterschiede zu erkennen eine einheitliche DOM Schnittstelle für jeden Browser anzubieten.

Viele Vorteile von jQuery haben sich durch die Weiterentwicklungen im DOM mittlerweile relativiert, so dass die Tendenz dahin geht, für den Umgang mit dem DOM auf die dort eingebauten Methoden zurückzugreifen. Der Umstand, dass jQuery für viele andere JavaScript-Komponenten als Voraussetzung dient, macht das nicht unbedingt einfach. Allerdings haben auch Bibliotheksanbieter erkannt, dass sie jQuery nicht mehr benötigen. Beispielsweise verzichtet Bootstrap ab der Version 5 darauf, jQuery vorauszusetzen.

Hinweis:

Mittlerweile sind viele der Funktionen von jQuery in „normales“ JavaScript übernommen worden. So werden z. B. querySelector und querySelectorAll von allen Browsern unterstützt.
Deshalb gibt es Bestrebungen, Vanilla-JS ohne den Einsatz von Frameworks wie jQuery zu verwenden.

Einbindung

Sie können jQuery genau wie externen JavaScript-Code einbinden. Dafür können Sie jQuery auf Ihrem Server bereitstellen.

<script src="script/jquery.min.js"></script>

Eine Alternative ist die Verwendung eines CDN (Content Delivery Network), das die Inhalte zentral vorhält. Sie können beispielsweise das CDN der OpenJS Foundation - dem Anbieter von jQuery - nutzen:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Die Download-Seite von jQuery listet weitere CDNs, die jQuery anbieten..

Vor- und Nachteile

Das Motto hinter jQuery lautet "write less, do more", was auf Deutsch „schreibe weniger, tue mehr“ lautet. Als jQuery erschien und viele heutige DOM Methoden fehlten, war dieses Angebot tatsächlich ein Segen, aber auch heute noch schreiben sich viele Operationen mit jQuery kompakter als mit nativen DOM Methoden. Wenn es darum geht, dass schnell ein Prototyp oder eine Konzeptstudie hergestellt wird, ist diese Zeitersparnis nicht zu verachten.

Vorteil: Kürzerer Code

Schauen wir uns ein einfaches Beispiel an, wie jQuery mit weniger Schreibaufwand auskommt:

kurzes jQuery-Beispiel

// alt und bewährt
function getInputByName (name) {
  var inputNodes = document.getElementsByTagName("input"),
      numInputs = inputNodes.length,
      node;

  // finde input-Element mit name="user".
  for (node = 0; node < numInputs; node++) {
    if (name == node.getAttribute("name")) {
      return node;
    }
  })
  return null;
}

console.log( getInputByName("user") );

// mit jQuery
console.log(
  $('input[name="user"]') // ergibt ein mapped set mit allen Elementen, die auf den Selektor zutreffen
  .get(0) // tatsächliches HTMLElement
);

// neue DOM-Methode (durch jQuery inspiriert)
console.log( document.querySelector('input[name="user"]') );

Vielleicht werden Sie sich fragen, warum getInputByName nicht die forEach-Methode zum Durchlaufen der HTMLCollection verwendet. Beachten Sie den Kommentar: alt und bewährt. Als jQuery erschien, gab es forEach noch nicht. Die Sensation, die jQuery damals darstellte, wird Ihnen nun vielleicht verständlicher.

Die wahre Power von jQuery kommt in Szenarien zum Einsatz, wo man viele Änderungen auf einmal machen möchte. Wenn man eine der Änderungs-Methoden von jQuery auf ein mapped set'' anwendet, das viele Elemente enthält, wird diese Änderung für jedes Element darin ausgeführt, wie das offizielle Beispiel zu .after illustriert:

Beispiel

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

Nun soll nach jedem Element mit der Klasse inner ein Textabsatz mit dem Inhalt Test eingefügt werden.

$( ".inner" ).after( "<p>Test</p>" );

Die resultierende Dokumentstruktur sieht dann so aus:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

Vorteil: Einheitliche Schnittstelle zum DOM

Dieser Vorteil war 2006, als jQuery erschien, noch sehr relevant. Sehr oft musste man zwischen "Internet Explorer" und "Rest der Welt" unterscheiden, oder prüfen, ob bestimmte Funktionalitäten im aktuellen Browser verfügbar waren oder nicht. Mit jQuery wusste man, dass die angebotenen Funktionen auf allen Browsern nutzbar waren und man wusste auch, dass Workarounds für fehlende Funktionen auf allen unterstützten Browsern getestet waren.

Da der Internet Explorer endgültig beerdigt ist, die verbleibenden Browser mehrfach im Jahr Updates erfahren und die Browserhersteller keine Ressourcen für Browserkriege mehr haben (statt dessen steckt in vielen Browsern heute ein Chromium-Kern), ist diese Ausgleichsfunktion von jQuery heutzutage irrelevant geworden.

Nachteil: Verwirrender Code

Für Programmierer ist immer wichtig, dass sie wissen, welche Art von Rückgabewert eine Funktion oder Methode liefert. Bei den neuen DOM-Methoden querySelector und querySelectorAll ist im Namen schon klar, was sie tun und dass erstere ein HTMLElement zurückliefert, zweitere dagegen eine Liste (NodeList) an Elementen.

Die Funktion $() in jQuery ist dagegen eine eierlegende Wollmilchsau - je nachdem, welche Parameter man ihr übergibt, selektiert sie DOM Elemente, erzeugt neue Elemente oder registriert einen ready-Handler. Zurückgegeben wird immerhin immer ein mapped set.

Erweiterungen

Folgende Projekte bauen auf jQuery auf, um die Entwicklung von Bedienelementen oder mobile Apps zu unterstützen:

• jQuery user interface
• jQuery mobile

Sollte man heute noch jQuery verwenden?

Wir bei Selfhtml finden: Nein. Alles hat seine Zeit, und die Zeit von jQuery ist abgelaufen. Die schlimmsten Lücken im DOM API sind durch Methoden wie querySelector und closest geschlossen, und die Erweiterungen, die Sizzle gegenüber normalen CSS Selektoren mitbringt, sind kaum relevant.

Wenn man ein altes Projekt hat, das gründlich von jQuery durchdrungen ist, lohnt sich der Aufwand für den Umbau eher nicht. Wenn man zusätzlich noch Blibliotheken nutzt, die jQuery voraussetzen, kann der Aufwand unüberschaubar werden.

Kleine, neue Projekte sollten auf jQuery verzichten. Der Nutzen ist nicht mehr sonderlich hoch, wenn Sie jQuery erst lernen müssen, dann lernen Sie besser das DOM und jede Abhängigkeit von externen Libraries erhöht die Komplexität des Projekts.

Möchte man jQuery Plugins nutzen, vor allem die diversen Oberflächenelemente und Effekte, die jQuery UI mitbringt, sollte man zunächst prüfen, ob die nativen Fähigkeiten der Browser nicht ausreichen. Denn damit sind die Anwender vertraut, und zu viele Effekte sind ohnehin eher schlecht für die Augen als gut für die Benutzererfahrung.

Und wenn man ein großes Projekt bauen will, mit umfangreichen JavaScript-Fähigkeiten, sollte man an Stelle von jQuery ohnehin besser Frameworks wie Angular, React oder Vue ins Auge fassen.