Informatiker sind von Haus aus faul! Es wird versucht, einfache Lösungen für Probleme zu finden, Code-Zeilen zu sparen und Redundanzen (Wiederholungen) zu vermeiden. Auf Dauer ist reines JavaScript teilweise nervig und unnötig umständlich. Hier können Erweiterungs-Bibliotheken Abhilfe schaffen.
jQuery ist eine solche Erweiterungs-Bibliothek für JavaScript. Es vereinfacht Aufrufe und bietet neue Funktionalität.
JQuery is used by 63.8% of all the websites, that is a JavaScript library market share of 95.1%. w3techs.com
jQuery ist nicht standardmäßig im Browser verfügbar und muss eingebunden werden. Dazu gibt es, analog zu externen CSS-Dateien, die Möglichkeit, JavaScript-Dateien im head eines HTML-Dokuments einzubinden.
<html> <head> <script src="pfad/zur/datei.js"></script> </head> <body> ... weitere HTML-Elemente ... </body> </html>
Nicht nur Bibliotheken lassen sich importieren, sondern auch eigene Scripte. Alles, was in der JavaScript-Konsole geschrieben werden kann, lässt sich auch in eine JavaScript-Datei (*.js) schreiben und wird nach dem Laden der Seite ausgeführt.
jQuery kapselt (überdeckt) JavaScript-Funktionalität und bietet eine einfachere und kürzere Schreibweise. Der Zugriff auf HTML-Elemente ähnelt den Selektoren von CSS. So kann auf id's (#), Klassen (.) und direkt auf HTML-Tags (h1) zugegriffen werden. Um auf ein Element per jQuery zuzugreifen, wird mit einem $ begonnen und in Klammern der gewünschte Selektor eingegeben. Um also auf den Link mit der id „important“ zuzugreifen, schreibt man folgende Zeile
// jQuery Schreibweise für: document.getElementById("important"); var link = $("#important"); // deutlich kürzer :) console.log(link);
// Gibt "Hello World" in der Konsole aus // console.log(document.getElementById("important").innerHTML) console.log($("#important").html()); // Ändert "Hello World" in "Goodbye World" // document.getElementById("important").innerHTML = "Goodbye World" $("#important").html("Goodbye World");
// Ändert das Ziel des Links auf "JS_AEG_L2.html" (Das Attribute wird verändert) // document.getElementById("important").href = "JS_AEG_L2.html"; $("#important").attr("href", "JS_AEG_L2.html"); // Linkziel wird in neuem Fenster geöffnet (Das Attribut wird neu hinzugefügt) // document.getElementById("important").target = "_blank"; $("#important").attr("target", "_blank"); $("#important").attr("foo", "bar");
Besonders wichtig ist das Style-Attribute. Eine einfache Syntax ermöglicht es, das Aussehen des HTML-Elements sehr leicht zu ändern.
// Speichere in der Variablen "element" den Wert von document.getElementById("important") var element = $("#important"); // Setzt die Schriftgroesse auf 25px // element.style.fontSize = "25px"; element.css("font-size", "25px"); // Versteckt das Element (Das Element ist aber noch da!) // element.style.display = "none"; element.hide(); // Zeigt das Element wieder an // element.style.display = "block"; element.show(); // Sogar mehrere CSS-Anweisungen in einem // Text wird gelb und bekommt einen schwarzen Rahmen element.css({color: "yellow", border: "1px solid #000"});
Jetzt wird es schön!
// Speichere das HTML-Element in der Variable "newElement" // var newElement = document.createElement("h2"); // newElement.innerHTML = "Hallo Neue Welt"; // document.body.appendChild(newElement); // 2 Zeilen gespart $("body").append("<h2>Hallo Neue Welt</h2>"); // Fügt das Element ganz am Anfang ein $("body").prepend("<h2>Hallo Neue Welt von Oben</h2>");
Im unterschied zum Ausblenden eines HTML-Elements (via CSS), kann ein Element auch komplett entfernt werden. Dazu muss es von seinem „Elternknoten“, also seinem umschließenden HTML-Element, gelöst werden.
// var element = document.getElementById("important"); // document.body.removeChild(element); // Element holen und löschen (Elternelement ist egal) $("#important").remove();
Wie gesehen, kann jQuery Elemente anhand ihrer id finden. Aber auch Klassen und Elementtypen werden gefunden.
<body> <a href="index.html" id="link">Link</a> <h2 class="heading">Überschrift</h2> <div> <p>Text</p> </div> </body>
console.log($("#link").html()); // Link console.log($(".heading").html()); // Überschrift console.log($("div").html()); // <p>Text</p>
Jedoch sind Klassen und Elementtypen nicht eindeutig und der Selektor kann auf mehrere Elemente zutreffen. Was passiert also, wenn 2 div-Tags vorhanden sind?
<body> <div> <p>Text 1</p> </div> <div class="second"> <p>Text 2</p> </div> </body>
console.log($("div").html()); // Text 1 console.log($("div")); // [div, div.second] eine liste von Elementen console.log($("div.second").html()); // Text 2
jQuery benutzt den ersten Eintrag aus einer Liste, wenn eine Funktion für ein einzelnes Element aufgerufen wird. Das ist einerseits sehr tolerant, kann aber auch die Fehlersuche erschweren. Darum immer so genau wie möglich selektieren (mit id's oder Klassen) - das gilt auch für CSS.
jQuery vereinfacht die Zugriffe auf HTML-Elemente und bietet mächtige Erweiterungn für JavaScript. Alle Funktionen finden sich in der jQuery API. API steht für Application Programming Interface (Programmierschnittstelle) und liefert alle Informationen, die zur Benutzung der Funktionen wichtig sind.
In dieser Lektion haben wir gelernt, wie HTML-Elemente mit jQuery angesprochen und verändert werden können. Weiterhin haben wir gesehen, dass jQuery bei einem Aufruf mit einem zu allgemeinen Selektor unter Umständen eine List von Elementen zurück liefert.
<span>-Tag den Text in „JavaScript ist total einfach“<< Lektion 3: HTML-Manipulation I | Lektion 5: Wünsch Dir was! >>