... weitere HTML-Elemente ...
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("Hallo Neue Welt
");
// Fügt das Element ganz am Anfang ein
$("body").prepend("Hallo Neue Welt von Oben
");
===== 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.
Link
Überschrift
Text
console.log($("#link").html());
// Link
console.log($(".heading").html());
// Überschrift
console.log($("div").html());
// Text
Jedoch sind Klassen und Elementtypen nicht eindeutig und der Selektor kann auf mehrere Elemente zutreffen. Was passiert also, wenn 2 ''div''-Tags vorhanden sind?
Text 1
Text 2
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 [[http://api.jquery.com/| jQuery API]]. API steht für **A**pplication **P**rogramming **I**nterface (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 "{{:javascripting: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) ''''-Tag den Text in "JavaScript ist total einfach"
[[javascripting:lektion_03|<< Lektion 3: HTML-Manipulation I]] | [[javascripting:lektion_05|Lektion 5: Wünsch Dir was! >>]]