<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$("h1").text("Hallo Welt!");
});
</script>
</head>
<body>
<h1><h1>
</body>
</html>
jQuery ist eine JavaScript-Bilbiothek welche die Benutzung von JavaScript vereinfachen und die Funktionalität von JavaScript erweitern soll. Die Vorteile von jQuery im Überblick:
Hat man die jQuery-Datei lokal in seinem Webspace liegen hat man die Kontrolle über die Verfügbarkeit und man hat sicher gestellt das die gewünschte Version genutzt wird. Sprich: die Datei bleibt unverändert so lange man das möchte. Eine verlässliche Basis.
<head> ... <script src="jquery-3.2.1.min.js"></script> ... <head>
Die Datei von der jQuery Homepage einzubinden hat den Vorteil das man immer auf die aktuelste Version verweisen kann. Im Gegenzug hat man keine Sicherheit in der verwendeten Version und keine Garantie das die Datei dort bleibt.
<head> ... <script src="https://code.jquery.com/jquery-latest.js"></script> ... <head>
Der Vorteil bei einem Content-Delivery-Network ist (a) man muss die Datei nicht selber Hosten und (b) ein Nutzer der die Datei bereits geladen hat muss sie nicht erneut laden. Im Gegenzug auch hier keine Garantie das die Datei verlässlich dort bleibt.
<head> ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> ... <head>
Wesentlicher Bestandteil von jQuery ist die "Sizzle Selector Engine", diese gestattet es Elemente des DOM auszuwählen mit einer Syntax die Stark an CSS angelehnt ist.
Angesprochen wird jQuery in der Kurzform über das Dollar-Symbol $(); in der Langform über jQuery();. Übergeben wird ein Parameter als Selektor $(<selector>);. Zurückgegeben werden die selektierten Elemente auf denen Operationen ausgeführt werden können $(<selector>).<action>();.
Auf den selektierten Elementen können Operationen ausgeführt werden.
Da jQuery auf JavaScript basiert können auch Kommentare in gleicher Form verwendet werden.
Kommentare einzeilig
// ...
Kommentare mehrzeilig
/* ... */
Als Selektor wird ein String in Hochkommata übergeben "<selector>". Der Inhalt des Strings entspricht in der Regel den Formatvorgaben von CSS. Dem entsprechend können Elemente des DOM anhand der Element-Typen, ID's, Klassen (und Pseudoklassen) und Attribute selektiert werden. Zusätzlich gibt es noch ein paar spezielle Selektoren.
Element-Selektoren selektieren anhand von übergebenen Namen von HTML-Element-Typen. Zurück gegeben werden alle Elemente dieses Typs im aktuellen DOM.
$("div") // Selektiert alle divs
$("span") // Selektiert alle spans
$("p") // Selektiert alle paragraph (Absätze)
$("ol") // Selektiert alle ordered-lists (sortierte Aufzählungen)
$("ul") // Selektiert alle unordered-lists (unsortierte Aufzählungen)
$("li") // Selektiert alle list-items (Aufzählings-Einträge)
Es können auch mehrere Namen von Element-Typen übergeben werden, auch in diesem Fall werden alle Elemente von diesem Typ zurück gegeben.
$("h1 h2 h3 h4 h5") // Gibt alle Überschriften 1. - 5. Ordnung zurück
ID-Selektoren selektieren anhand einer übergebenen ID, also einem Attribut eines HTML-Elements das per Definition eindeutig sein muss. Zurück gegeben wird das Element mit der entsprechenden ID. Die Angabe der ID erfolgt analog zu der Definition in CSS durch #<idname>.
$("#punktergebnis")
$("#authorenname")
$("#personenkennziffer")
Der Name der ID ist frei zu vergeben. Wichtig für den Ablauf der jQuery-Skripte ist lediglich das ein Element gefunden wird, also ein Element mit dieser ID im DOM existiert.
Class-Selektoren selektieren anhand von Übergebenen Klassen-Namen oder Pseudo-Klassennamen. Die Angabe der Klassen und Pseudo-Klassen erfolgt analog zu der Definition in CSS durch .<classname> und :<pseudoclassname>.
$(".button") // Selektiert alle Elemente mit der Klasse "button"
$(":button") // Selektiert alle Elemente vom Typ Button, auch Input-Elemente mit type="button"
$("p:first") // Selektiert das erste Element vom Typ "p"
$("tr:even") // Selektiert alle geraden Zeilen von Tabellen
$("tr:odd") // Selektiert alle ungeraden Zeilen von Tabellen
Attribut-Selektoren selektieren anhand von möglichen Attributen in HTML-Elementen. Die Attribute werden in eckigen Klammern übergeben "[<attributname>]".
$("[href]") // Selektiert alle Elemente mit einem Attribut "href"
$("[target='_blank']") // Selektiert alle Elemente mit einem Attribut "target" welches den Inhalt "_blank" aufweist
$("[target!='_blank']") // Selektiert alle Elemente mit einem Attribut "target" welches NICHT den Inhalt "_blank" aufweist
Der Stern-Selektor selektiert alle Elemente des Dokuments.
Der This-Selektor selektiert das aktuelle Element auf dem gerade operiert wird.
Für die Manipulation des Document-Object-Model ist es wichtig das dieses fertig geladen ist, also die Struktur des Dokuments fertig ist. Hierfür existiert die Funktion .ready();. Sie wird unmittelbar dann ausgeführt wenn das DOM fertig geladen ist. Alles was innerhalb von .ready(...); ausgeführt wird kann also davon ausgehen das ein vollständig geladenes DOM zur Verfügung steht.
Da die Funktion .ready(); nur auf das gesamte DOM wartet ist die erlaubte Schreibweise $(<selector>).ready(...); irreführend. Tatsächlich sind die folgenden Aufrufe identisch:
Die Tatsache das der Selektor der Methode voran gestellt wird ist irreführen weil $(document).ready() andeutet das auf ein fertiges Dokument gewartet wird und $("img").ready() andeutet das auf ein fertig geladenes Bild gewartet wird. Dies ist nicht der Fall, .ready(); wartet auf ein fertiges Dokumenten-Modell, also eine fertige Struktur des Dokumentes in dem alle Elemente verfügbar sind. Bilder und andere Inhalte die nachgeladen werden spielen keine Rolle, sofern die zugehörigen Elemente (img-Tag) geladen sind. Der vorangestellte Selektor kann also zu irreführender Schreibweise und Missverständnissen führen. Aus diesem Grund wird die Schreibweise $(function() {...}); empfohlen. Alle anderen Schreibweisen sind deprecated.
Im folgenden Beispiel wird eine Funktion ausgelöst wenn das Dokument fertig geladen ist.
$(function() {
alert("Das Dokument wurde fertig geladen. Alle Elemente sind erreichbar.");
});
Die Funktion .each(); bietet eine einfache Iteration über beliebige Objekte. An die in der Iteration ausgeführte Funktion kann sowohl der Index der aktuellen Iteration (beginnend mit 0) als auch das aktuelle Element übergeben werden.
Das folgenden Beispiel gibt alle im Dokument vorhandenen DIV-Elemente aus, und zwar durchnummeriert. Da die Iteration mit 0 beginnt müssen wir den Wert in der Ausgabe um 1 erhöhen.
$("div").each(function(index) {
console.log( index+1 + "div" );
});
Die Iteration kann abgebrochen werden durch ein return false;.
Im folgenden Beispiel wollen wir aus einer Reihe von DIV in einem Dokument dasjenige finden, das die ID "findemich" hat. Wenn es gefunden wurde wird die Position ausgegeben. Wenn nicht wird nur ausgegeben wie viele DIV bereits betrachtet wurden.
$("div").each(function(index,element) {
if ($(element).is("#findemich")) {
console.log( "findemich ist in der Reihenfolge der DIV an Stelle " + index );
return false;
}
console.log( index + " DIV" );
});
$("button").on("click", function() {
alert("Angeklickt!");
});
Wechselt die Sichtbarkeit eines Elements über das CSS-Attribut "display".
$("#element").toggle();
Möglich ist auch die Angabe einer Geschwindigkeit bei der Einblendung.
$("#element").toggle("slow");
$("#element").toggle("fast");
Fügt eine CSS-Klasse hinzu
$("#element").addClass("active");
Entfernt eine CSS-Klasse hinzu
$("#element").removeClass("active");
Überprüft auf Vorhandensein einer CSS-Klasse
$("#element").hasClass("active");
Folgende Fallunterscheidung entfernt eine Klasse wenn sie vorhanden ist, fügt sie hinzu wenn sie nicht vorhanden ist. Als Funktion ausgeführt würde sie "toggeln".
if ($("#element").hasClass("active")) {
$("#element").removeClass("active");
} else {
$("#element").addClass("active");
}
Wechselt eine CSS-Klasse durch hinzufügen/entfernen.
$("#element").toggleClass("active");
$(body).on('click', function() {
alert("Body angeklickt!");
});
Ein unsichtbares Element sichtbar machen, umkehrbar (toggle element). Animation ist "schnell".
<a class="pointer" onclick="$('#zielelement').toggle('fast');">Zeige Zielelement</a>
<div id="zielelement" style="display: none">Inhalt vom Zielelement</div>
Ein unsichtbares Element sichtbar machen, umkehrbar (toggle element). Animation ist "schnell". Der Link verändert seinen Status auf "active".
<a class="pointer" onclick="$('#zielelement').toggle('fast'); $(this).toggleClass('active');">Zeige Zielelement</a>
<div id="zielelement" style="display: none">Inhalt vom Zielelement</div>
Jede gerade Zeile blau färben:
$("tr:even").css("background-color","blue");
Jede ungerade Zeile blau färben:
$("tr:odd").css("background-color","blue");
In einem Select-Element mit multiplen Auswahl-Möglichkeiten muss man die CTRL-Taste (STRG-Taste) drückem um mehrere Elemente auswählen zu können. Das ist manchmal lästig und kann hiermit geändert werden:
$('option').on("mousedown",function(event) {
event.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});
Copyright © 2024