Einführung

  • jQuery => JavaScript Bibliothek, die viele praktische Funktionen anbietet
    https://trends.builtwith.com/javascript/jQuery
  • Biete einen einfachen Zugriff auf die einzelnen DOM-Elemente
  • Ansprechende Effekte mit einfachen Mitteln
  • jQuery = reines JavaScript
  • Vorgefertigte Funktionen reduzieren Aufwand für das Erstellen von Java-Script Programmen deutlich
  • Muss eingebunden werden (entweder Download oder CDN Link)

Selektoren: HTML-Elemente über jQuery ansteuern

Beispiel: Ausgabe Inhalte über jQuery

Beispiel: Darstellung der roten Absätze

Beispiel: Verschiedene Elemente präzise ansteuern

Inhalte der Seite mit jQuery verändern und auswerten

Inhalte werden über drei verschiedene Methoden ausgegeben

Inhalte der Seite mit jQuery verändern und auswerten

Methoden nehmen die Inhalte der übrigen Elemente auf

Inhalte der Seite mit jQuery verändern und auswerten

Verändern der Größe des input-Tags

Inhalte der Seite mit jQuery verändern und auswerten

Text wird je nach verwendeter Funktion am Anfang oder am Ende eingefügt

Inhalte der Seite mit jQuery verändern und auswerten

Mit den Methoden before() und after() kann Inhalte vor oder nach einem bestimmten Element eingefügt werden.

Events mit jQuery bearbeiten

jQuery bietet für alle gängigen Events eine Methode an, die genau gleich lautet wie dessen Bezeichnung.

Events mit jQuery bearbeiten

Weitere wichtige Methode: .on()
Möglichkeit, mehrere Events mit einem einzigen Element zu verbinden

Spezielle Effekte mit jQuery einfügen

  • Einfache Beispiele Methoden:
    • show() => zeigt ein Element an, das bislang versteckt war
    • hide() => versteckt ein Element
    • toggle() => verbindet show() und hide() in einem
  • Alle drei Funktionen erlauben Übergabewerte für Geschwindigkeit
  • Ähnliche Effekte bei Methoden: fadeIn(), fadeOut(), fadeToggle(), fadeTo()
    • Mit langsamen Übergang („slow“): Größe bleibt konstant, Transparenz ändert sich
  • Weitere Effekte: slideDown(), slideUp(), slideToggle()
    • Element in vertikaler Richtung aus-/eingefahren

Spezielle Effekte mit jQuery einfügen

Quelle: JavaScript
Programmieren für Einsteiger
ISBN: 978-3-96645-016-4