jQuery
DOM Manipulation
Nachfolgend werden Methoden zur Manipulation des DOM Baums aufgelistet:
| .addClass() | fügt ein attribut class=”" mit entsprechendem Bezeichner ein sofren noch nicht vorhanden, bzw. erweitert das class=”" Attribut um den Bezeichner |
| .removeClass() | löscht den Bezeichner, wenn weitere Bezeichner vorhanden sind, ansosnten wird das gesamte class=”" Attribut gelöscht |
| .toggleClass() | wechselt zwischen .addClass und .removeClass hin und her |
| .attr() | Integriert Attribute in Tags |
| .removeAttr() | löscht Attribute aus Tags |
| .each() | Agiert als Iterator und ist eine Vereinfachung der for Schleife. Kann auf einem jQuery Objekt ausgeführt werden, kann aber auch ein Array oder eine Map übergeben bekommen und als zweiten Parameter eine Callback Funktion |
| $(html) | Wird genutzt um den Inhalt eines Dokuments zu manipulieren, indem HTML Elemente innerhalb der Klammern genutzt/gesetzt werden |
| .insertAfter() | fügt Elemente nach anderen hinzu: $(‘html expression).insertAfter(selector); |
| .after() | siehe insertAfter() allerdings wird eine andere Syntax genutzt: $(selector).after(‘html expression’); |
| .insertBefore() | fügt Elemente vor andere hinzu: $(‘html expression).insertBefore(selector); |
| .before() | siehe insertBefore() allerdings wird eine andere Syntax genutzt: $(selector).before(‘html expression’); |
| .prependTo() | fügt Elemente in andere Elemente ein: $(‘expression’).prependTo(‘selector’); |
| .appendTo() | fügt Elemente zu einem Element hinzu und hängt diese zum Schluss ran: $(“content”).appendTo(“selector”); |
| .append() | fügt Elemente zu einem Element hinzu und hängt diese zum Schluss ran: $(“selector”).appendTo(“content”); |
| .wrap() | Fügt Elemente um andere Elemente hinzu. |
| .clone() | kopiert das gefundenen Element und alle seine Kinder. Setzt man den Parameter false, wird nur das gefundenen Element kopiert. |
| .find() | sucht nach allen Elementen, die als Selector angegeben werden |
| .html() | Ersetzt das gefundene Element mit dem angegebenen |
| .text() | Ersetzt das gefundene Element mit Text |
| .remove() | löscht das gefundene Element und alle Nachfolger |
| .empty() | Löscht die Elemente innerhalb des gefundenen Elements |
AJAX
Ajax ist eine Abkürzung für “Asynchronous Javascript and XML”. Innerhalb von Ajax werden verschiedene Technologien miteinander kombiniert:
- Javascript, um User-Interaktionen oder andere Browser spezifische Events zu ermöglichen
- Das XMLHttpRequest Objekt, welches Interaktionen mit dem Server ermöglicht ohne andere Browser Aufgaben zu unterbrechen
- XML Dateien auf dem Server oder ähnliche Datenformate
- Noch mehr Javaskript um die Daten vom Server zu interpretiern und darzustellen
Die Interpretation des XMLHttpRequest Objekts ist browserspezifisch und so versuchen Frameworks, wie auch jQuery dem beizukommen und Unterstützung zu bieten.
jQuery bietet dafür verschiedene Funktionen:
| .load() | Lädt eine Datei entsprechend der übergebenen URL und fügt sie ins DOM ein |
| $.getJSON() | $.getJSON(url, [data], callback) |
| $.getScript() | $.getScript(url, [callback]) |
| $.get() | $.get(url) |
| $.post() | HTTP Request mit post Parameter |
Oft sind AJAX Applikationen nichts weiter als ein Request nach HTML Teilen. Diese Technik (AHAH – Asynchronous HTTP and HTML) ist einfach mittels jQuery zu implementieren. Dazu werden die entsprechend benötigten HTML Teile in HTML-Dateien ausgelagert und mittels der jQuery Funktion load() integriert
Beispiel:
$(document).ready(function(){
$('#button').click(function(){
$( '#container').load('teil.html');
});
});
Will man ein Dokument laden und bspw. zeitverzögert, nach dem das Dokument geladen ist, eine Nachricht (alert) ausgeben, muss ein Callback definiert werden. Dies liegt daran, dass die Datenübertragung asynchron läuft, der HTTP Request HTML zu empfangen an den Server gestellt wird und das Skript (der “alert”) sofort, noch bevor das angefragte Dokument geladen wurde, ausgeführt wird.
Javaskript Objekte
Will man Prozesse ausführen, bevor Daten dargestellt werden kann mittels jQuery Selektoren auf strukturierte Daten zugegriffen werden. Eine Möglichkeit Daten kompakt zu handeln ist JSON (Javascript Object Notation).
JSON
JSON basiert auf der Syntax { key:value} ind Kombination mit der array Syntax []. JSON wird oftmals als Alternative zu XML eingesetzt. Gespeichert werden Dateien unter *.json.
Beispiel (test.json):
{
"key" : "value",
"key 2" : [
"item1",
"item2",
"item3"
]
}
Um Daten im JSON Format zu erhalten wird mittels $.getJSON() die Datei in jQuery abgerufen und ausgeführt. Diese Methode liefert als Ergebnis das Objekt an das Skript zurück. Es wird nichts in die Seite durch die Methode eingefügt! JSON wird definiert als globales jQuery Objekt.
Folgende Syntax wird verwendet: jQuery.getJSON(url, [data], callback);
Der erste Parameter gibt den Ort der JSON Datei an, im optionalen zweiten können zusätzliche Daten übergeben und der dritte Paaremetr ist eine Funktion, die ausgeführt wird, wenn der Ladevorgang komplett ist. Die callback Funktion erhält auch ein Argument, welches das Ergebnis (die JSON Datei) repräsentiert.
Will man Javascript abhängig von der Interaktion des Users/der Userin laden, kann dies mittels der Funktion $.getScript() erfolgen.
XML
Eine xml Datei kann mittels $.get(url) aufgerufen werden. Ist der Mime-Type xml, kann das XML DOM bearbeitet werden. Traversiert werden kann das DOM dann mit den ganz normalen Methoden wie bspw. find(), filter() usw.
