Hauptmenü
BakuMebi 5
ITG Klasse 7
ITG Klasse 9
ITG Oberstufe
Links
Training
AEG IT
AEG Homepage
AEG Schulportfolio
Hilfe
Druck/Export
(oSP 19.10-ruffnut.4)
Benutzer-Werkzeuge
Seitenleiste
javascripting:lektion_04
Buch erstellen
Diese Seite zum Buch hinzufügen
Diese Seite zum Buch hinzufügen Buch erstellen
Diese Seite aus Buch entfernen
Diese Seite aus Buch entfernen 
Buch anzeigen, ändern (
Hilfe Inhaltsverzeichnis
Lektion 4: HTML-Manipulation II - jQuery
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
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);
Inhalt eines HTML-Element verändern
// 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");
HTML-Attribut ändern
// Ä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");
Aussehen eines HTML-Elements verändern (CSS)
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"});
HTML-Element hinzufügen
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>");
HTML-Element löschen
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();
HTML-Element finden
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.
Zusammenfassung
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.
Aufgabe
- Führe die Aufgaben aus Lektion 2 mit jQuery aus
Schreibe diesmal alle Befehle in eine JavaScript-Datei - Lade dir das Zip-Archiv „lektion_4.zip“ herunter und entpacke es in deinen Projektordner
- Ändere das Bild „aeg.jpg“ in „buecher.jpg“
- Füge der h1 Überschrift die CSS-Eigenschaft kursiv hinzu
- Ändere im (einzigen)
<span>-Tag den Text in „JavaScript ist total einfach“
<< Lektion 3: HTML-Manipulation I | Lektion 5: Wünsch Dir was! >>
javascripting/lektion_04.txt · Zuletzt geändert: 15.06.2015 14:59 von pasler
