jQuery-Syntax

Mit jQuery können Sie HTML-Elemente auswählen (abfragen, query) und Operationen (Aktionen) darauf ausführen.

jQuery Syntaxbeispiel

$("this").hide()
Demonstration der jQuery hide()-Funktion, Verbergt das aktuelle HTML-Element
$("#test").hide()
Demonstration der jQuery hide()-Funktion, Verbergt das Element mit id="test"
$("p").hide()
Demonstration der jQuery hide()-Funktion, Verbergt alle <p>-Elemente
$(".test").hide()
Demonstration der jQuery hide()-Funktion, Verbergt alle Elemente mit class="test"

jQuery-Syntax

Die jQuery-Syntax ist für die Auswahl von HTML-Elementen und die Ausführung bestimmter Operationen darauf konzipiert.

Die Grundsyntax ist:$("selector").action()

  • Das Dollarzeichen definiert jQuery
  • Der Selektor (selector) "query" und "finden" HTML-Elemente
  • Die action()-Methode von jQuery führt Operationen auf Elementen aus

Beispiel

$("this").hide() - Verbergt das aktuelle Element

$("p").hide() - Verbergt alle Absätze

$(".test").hide() - Verbergt alle Elemente mit class="test"

$("#test").hide() - Verbergt alle Elemente mit id="test"

Tipp:Die Syntax, die jQuery verwendet, ist eine Kombination aus XPath und CSS-Selektorsyntax. In den nächsten Kapiteln dieses Tutorials werden Sie mehr über die Syntax der Selektoren lernen.

Dokument bereit Funktion

Sie haben vielleicht bereits bemerkt, dass alle jQuery-Funktionen in unserem Beispiel in einer document-ready-Funktion platziert sind:

$(document).ready(function(){
  // Hier werden jQuery-Funktionen hinzugefügt
});

Dies dient dazu, sicherzustellen, dass jQuery-Code vor dem vollständigen Laden (Bereitstellung) des Dokuments nicht ausgeführt wird.

Wenn die Funktion vor dem vollständigen Laden des Dokuments ausgeführt wird, könnte die Operation fehlschlagen. Hier sind zwei konkrete Beispiele:

  • Versuch, ein nicht existierendes Element zu verbergen
  • Größe des nicht vollständig geladenen Bildes ermitteln