... just another site around the web ...





jQuery


Hallo Welt

<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>

Einleitung

Die jQuery Bibliothek

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:

  • DOM Manipulation
  • CSS Manipulation
  • Event Methoden
  • Ajax Funktionalität
  • Effekte und Animationen
  • Cross-Browser-Stabilität

Einbinden

lokal einbinden

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>

von jQuery einbinden

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>

über CDN einbinden

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>

Sizzle Selector Engine

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.

  • this - selektiert das aktuelle Element.
  • "p" - selektiert alle Elemente vom Typ "p" (Der Element-Selektor).
  • "#test" - selektiert alle Elemente mit der ID "test" (Der ID Selektor).
  • ".test" - selektiert alle Elemente mit der Klasse "test" (Der Class-Selektor).
  • "[href]" - selektiert alle Elemente mit dem Attribut "href" (Der Attribut Selektor).

Das jQuery Objekt

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>();.

  • $(this) - Gibt das aktuelle Element zurück.
  • $("p") - Gibt alle Elemente vom Typ "p" (paragraph, Absatz) zurück.
  • $("#test") - Gibt alle Elemente mit der ID "test" zurück.
  • $(".test") - Gibt alle Elemente mit der Klasse "test" zurück.

Auf den selektierten Elementen können Operationen ausgeführt werden.

  • $(this).hide() - versteckt das aktuelle Element.
  • $("p").hide() - versteckt alle Elemente vom Typ "p" (paragraph, Absatz).
  • $("#test").hide() - versteckt alle Elemente mit der ID "test".
  • $(".test").hide() - versteckt alle Elemente mit der Klasse "test".

Kommentare

Da jQuery auf JavaScript basiert können auch Kommentare in gleicher Form verwendet werden.

Kommentare einzeilig

// ...

Kommentare mehrzeilig

/* ... */

Selektoren

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-Selektor

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-Selektor

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-Selektor

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-Selektor

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

Spezielle Selektoren

$("*")

Der Stern-Selektor selektiert alle Elemente des Dokuments.

$(this)

Der This-Selektor selektiert das aktuelle Element auf dem gerade operiert wird.

Methoden

DOM-Ready

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:

  • $(document).ready()
  • $("document").ready()
  • $("img").ready()
  • $().ready()
  • $(handler)

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.");
});

.each( Integer index, Element element );

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" );
});

.on( String events, Function handler );

$("button").on("click", function() {
	alert("Angeklickt!");
});

Effekte

Beispiele

Event anhängen

$(body).on('click', function() {
	alert("Body angeklickt!");
});

Tabellen-Zeilen abwechselnd formatieren

Jede gerade Zeile blau färben:

$("tr:even").css("background-color","blue");

Jede ungerade Zeile blau färben:

$("tr:odd").css("background-color","blue");

Select multiple ohne CTRL

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 © 2017

Impressum