Selektoren und Syntax
Die Verbindung zwischen jQuery-Funktionen und HTML-Elementen wird mittels Selektoren ausgeführt. Diese Selektoren können sich auf HTML-Elemente, Klassen oder IDs beziehen und stehen insofern in direktem Zusammenhang mit CSS-Formatierungen.
Der Aufbau eines jQuery-Funktion beginnt immer mit einem $-Zeichen (dies steht für den Typen einer Objekt-Variablen) und dem dazu angegbenen Selektor. Danach folgt ein Punkt, mit dem der Name des Objekts von dem nachfolgend formulierten Funktionsaufruf getrennt wird (Punkt-Syntax). Die einzelnen Funktionen, die Teil des Funktionsaufruf sind, werden dann in der Reihenfolge geschrieben, in der sie ausgeführt werden sollen. Jede Funktion wird dabei mit einem Semikolon von der nächsten Funktion getrennt und jeweils in geschweiften Klammern geschrieben. Parameter, di ezu den Funktionen gehören, werden in die normalen Klammern direkt hinter dem Begriff function geschrieben.
|
1
|
$("selektor").funktionsname({ function({ }); }); |
Intergration von jQuery
jQuery-Funktionen basieren auf der Scriptsprache JavaScript und befinden sich in Dateien mit der Dateikennung JS - also JavaScript-Dateien. Das Framework jQuery stellt bereits eine Vielzahl von Funktionen bereit, die fix und fertig programmiert sind und die von einem HTML-Dokument aus aufgerufen werden können. Damit der Aufruf klappt, muss lediglich der komplette jQuery-Code importiert und ein Funktionsaufruf mit einem Selektor verbunden werden. Dies sind die Arbeitsschritte:
1. Die Dokumente
Ausgangbasis ist stets ein HTML-Dokument, dies sollte in der aktuellen HTML-Version 5 vorliegen. Ausserdem wird eine Javascript-Datei benötigt, die den kompletten jQuery-Code beinhaltet. Diese Datei kann hier heruntergeladen werden.
2. Der Code
In den Head der HTML-Datei wird jQuery in der aktuellen Version 1.8.2 geladen (siehe Zeile 10).
Zusätzlich wird die gewünschte Funktion formuliert. Wichtig ist, dass die Funktionen in einen Dokumentaufruf integriert werden, der alle Funktionen erst ausführt, wenn das HTML-Dokument vollständig geladen ist.
$(document).ready(function() {...
});
Die erste Funktion soll bei Maisklick auf einen Link ein Meldungsfenster einblenden. Dazu wird eine Funktion benötigt und ein Link, der sich im body des HTML-Dokuments befindet. Verbunden wird die Funktion mit dem HTML-Element mit dem Selektor a.
Die Funktion:
$("a").click(function)(){
alert("Hallo Welt");
});
Das HTML-Element:
<a href="#">Erster Link</a>
Die CSS-Formatierungen für das a-Element wird in diesem Beispiel ebenfalls im Head platziert. Bei umfangreicheren Dokumenten sollte eine eigene CSS-Datei angelegt und im Head importiert werden.
3. Die Überprüfung
Nach Eingabe des Codes sollte die Funktion geteste werden. Dazu wird das HTML-Dokument gesichert und anschliessend in einem Browser geöffnet. Wenn das Meldefenster geöffnet wird, kann es weitergehen.
Mehrere Elemente und Selektoren
Der nächste Fall soll nun zwei Meldefenster mit zwei Links verbinden. Als Verbindungsglied dienen wieder Selektoren. Damit aber unterschiedliche Funktionen zugeteilt werden können, kann der allgemeine Selektor a nicht weiter verwendet werden. Statt dessen werden zwei Klassen definiert eins und zwei, die den HTML-Elementen und den jQuery-Funktionen zugeordnet werden.
Animation - Größe verändern
jQuery hält einige Animations-Funktionen bereit, eine der einfachsten Anwendungen ist die interaktive Änderung von Größen. Als HTML-Elemente wird im Beispiel eine div-Box verwendet, in der sich Text befindet. In der Funktion animate werden die Werte für die neue Größe eingegeben, die Originalgröße der div-Box wird mittels Styles eingestellt.
Die Animations-Funktion:
$('div').animate({height: 250, width: 200}, "slow", function(){}) ;
Die Event-Funktion:
$('klein').click(function(){
hier kommt die Animations-Funktion hin
});
Der Link:
<a href="#" id="klein" >Box verkleinern</a>
Die Styles der div-Box:
style="background-color:#336699; color:#fff; padding: 20px; font-family: Verdana; width: 1000px; height: 100px;"
Selbstverständlich können auch mehrere Elemente animiert werden. Das Procedere wird wiederholt. Allerdings wird das Event nun nicht mehr auf Links, sondern die div-Boxen selbst gelegt, dazu werden zwei div-Boxen eingerichtet, formatiert und mit unterschiedlichen IDs zwei Funktionen zugeordnet. Durch Klick auf die Boxen verändern diese nun ihre Größe. Beide Boxen bekommen die CSS-Eigenschaft float:left, damit sie sich nebeneinander ausrichten, wenn der Platz ausreicht...
Animation - Größe wieder herstellen
Wenn Elemente bei erneutem Klick wieder in den Original-Zustand zurückkehren sollen, kommt die Funktion toggle ins Spiel. Statt click wird das Event auf toggle eingestellt und die unterschiedlichen Größeneinstellungen in animate-Funktionen hintereinandergeschrieben. Die animate-Funktionen werden nacheinander blei Klick auf das Element ausgeführt und es wieder von vorn begonnen, sobald die Funktionen innerhalb der toggle-Funktion am Ende angekommen sind.
jQuery 1.12.3