JQuery

jQuery ist ein JavaScript-Toolkit, das eine einfachere Schreibweise ermöglicht, um schneller zu Ergebnissen zu kommen. Es ist, auch dank der zahlreich verfügbaren Plugins, eines der meistgenutzten Frameworks. Auch ist es für JavaScript-Anfänger relativ einfach möglich, jQuery-Code zu schreiben.

Einbindung

Sie können jQuery genau wie externen JavaScript-Code einbinden. Dabei würden Sie jQuery auf Ihrem Server bereitstellen.

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

Eine Alternative wäre die Verwendung eines Content Delivery Network (CDN), das die Inhalte zentral vorhält.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Es gibt eine ganze Liste an Anbietern, die jQuery als CDN anbieten..

Vor- und Nachteile

Das Motto hinter jQuery lautet "write less, do more", was auf Deutsch "schreibe weniger, tue mehr" lautet. Diese Kurzschreibweisen machen einem versierten Programmierer das Leben sicherlich leichter, wenn es darum geht, dass schnell ein Prototyp oder eine Konzeptstudie hergestellt wird.

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 myInput;

  // finde input-Element mit name="user"
  Array.from(
    document.getElementsByTagName("input")
  ).forEach(node => {

    if (name == node.getAttribute("name")) {
      myInput = node;
    }
  })

  return myInput;
}

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

// mit jQuery
console.log(
  $('[name="user"]') // jQuery-Objekt
  .get(0) // tatsächliches HTMLElement
);

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

Die wahre Power von jQuery kommt in Szenarien zum Einsatz, wo man viele Änderungen auf einmal machen möchte, 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>

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, dass erstere ein HTMLElement zurückliefert, zweitere dagegen eine Liste (NodeList) an Elementen. Die Funktion $() in jQuery liefert dagegen weder das eine noch das andere zurück, sondern ein jQuery-Objekt, mit dem man dann erst einmal schauen muss, was sich darin angesammelt hat.

Erweiterungen

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

• jQuery user interface
• jQuery mobile

Weblinks

• Matthias Schütz: jQuery-Tutorial: Einführung und Grundlagen