Dieser Artikel soll nicht die Tutorials und Hilfen auf Jquery.com ersetzen, sondern nur den Sinn aufzeigen, warum ich selbst für Javascript (JS) gerne die Jquery-Bibliothek verwende.
Einfache Einbindung
Denkbar simpel einfach auf http://www.jquery.com die min-Bibliothek (min steht für minimalize) herunterladen, abspeichern – und einfach als ganz normales Javascript im Head einbinden.
Code: Alles auswählen
<script type="text/javascript" src="jquery.js"></script> 
)Oder direkt über Google-Libraries einbinden: (https://developers.google.com/speed/libraries/devguide)
Einfache Anwendung
Generell lässt sich Jquery ganz einfach über das Dollar-Zeichen ($) aufrufen – dabei gilt, das Jquery an die Regeln von Javascript gebunden ist. Wie mein Dozent gerne und oft zu sagen pflegte „Jquery kann nicht zaubern!“ … die Regeln von Javascript gelten also auch für Jquery. Ein Grundverständnis der Elementaren und Erweiterten Datentypen sollte vorhanden sein – bzw. hilft ungemein, zu wissen, was man da eigentlich tut.
Bleiben wir direkt mal bei der Anwendung:
Ist die Jquery Bibliothek eingebunden, prüft man als erstes deren Funktion:
Code: Alles auswählen
<script type="text/javascript">
$("document").ready(function(){
alert ("ok");
});
</script>$ ← die Jquery Funktion bekommt einen String übergeben, in dem steht, was wir verarbeiten wollen, in diesem Falle „document“ - also das ganze Document. Das ganze liefert uns ein Jquery-Objekt zurück, der wir mit dem Punkt (.) eine weitere Funktion anhängen – in diesem Falle die Funktion „ready“. Diese Funktion bekommt als Parameter... ja was? - eine weitere Funktion übergeben, welche zu einem bestimmten Zeitpunkt ausgeführt werden soll … nämlich dann, wenn das Dokument geladen ist (ready=fertig geladen).
Also: Wir sagen : Jquery, nimm das Document und führe wenn es fertig geladen ist die function aus, die wir dir übergeben.
In der Funktion steckt ein alert („ok“) - und das wars dann auch schon.
Was jetzt auf den ersten Blick so kryptisch aussieht, ist an sich logisch nachvollziehbar. Das schöne ist - und hier kommen wir zu einem Vorteil, wenn nicht sogar DEM Vorteil von Jquery - das wir mit der Jquery-Funktion ganz einfach Elemente ansprechen können, um diese zu manipulieren.
Beispiel:
Code: Alles auswählen
$("#content").html("Dies ist mein Content");Beispiel:
Code: Alles auswählen
$(".inhalt").html("Dies ist mein Inhalt");„#“ für ID … „.“ für Klasse – das kennen wir doch irgendwoher? Richtig. Jquery versteht das gleiche, was auch euer CSS versteht. Mit CSS-Notation, den sogenannten CSS-Seperatoren, kommt ihr also auch bei Jquery zum Ziel.
Beispiel
Code: Alles auswählen
$("td").html("Dies ist meine Tabellenzelle")Reihenfolge der Aufrufe ist wichtig!
So – Nun gucken wir uns den Aufbau eines (Html)-Documentes an. Es wird nach und nach in den Browser geladen und aufgebaut. Dabei kann es vorkommen, dass Code direkt ausgeführt wird, während das Dokument noch gar nicht aufgebaut ist. Obige Beispiele im Header würden somit erstmal ins Leere greifen!
Doch erinnert ihr euch noch an das $(„document“).ready () vom Anfang! Das ist der Trick schlichtweg, um Jquery erst NACH dem Aufbau des gesamten Dokumentes auszuführen.
Ihr schreibt also in Euren Head
Code: Alles auswählen
<script type="text/javascript">
$("document").ready(function() {
$("td").html("Dies ist meine Tabellenzelle");
});
</script>Ein weiterer toller Vorteil ist das hinzufügen von sogenannten Events.
Ein Event ist eine Sache, die passiert – und dann etwas tun soll. Ein Event habt ihr sogar schon kennengelernt. Denn ready() ist eigentlich gar keine richtige Funktion, sondern eben ein Event, was ausgeführt wird, wenn ein bestimmter Zustand (hier das fertig laden des Dokumentes) erreicht ist.
Typischerweise gibt es auch sowas wie click()
Code: Alles auswählen
$("#meindiv").click(function () {
alert ("Du hast mein Div geclickt!");
});Ja, auch hier wird dem Event click() eine Funktion übergeben – die Funktion wird ausgeführt, wenn jemand auf das Html-Element mit der ID #meindiv mit der Maus clickt. Bedenkt, dass hier dem Element ein Event zugeordnet wird... das Element muss erstmal da sein! D.h. Ihr könnt die Zuweisung wieder erst in der $("document").ready()-funktion vernünftig einbinden!
Javascript und natürlich Jquery wird dazu verwendet, Elemente zu manipulieren. Das ist mit Jquery ganz einfach – und hier direkt mal ein vollständiger Code:
Code: Alles auswählen
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#meindiv").click(function () {
$(this).css("background-color","#ff0000");
}); // end vom Event-Click
}); // end vom Event-ready
</script>
</head>
<body>
<div id="meindiv">Dies ist meindiv</div>
</body>
</html>Aktuelles Element bedeutet in diesem Fall: das Element, von dem aus das Event (click() ) ausgelöst wurde.
Mit css () kann man das CSS manipulieren, es bekommt zwei Parameter … CSS-Eigenschaft und den neuen Wert.
Fertig. Und schon könnt ihr auf das Div clicken und der Hintergrund wird rot.
Animationen sind ebenso einfach mit Jquery erstellt. Obiges Beispiel mit einem „ausfaden“
Code: Alles auswählen
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#meindiv").click(function () {
$(this).fadeOut("slow")
}); // end vom Event-Click
}); // end vom Event-ready
</script>
</head>
<body>
<div id="meindiv">Dies ist meindiv</div>
</body>
</html>Eine letzte Sache möchte ich euch heute noch vorstellen.
Nehmt mal an, ihr habt ein Array in Jquery...
Dann könnt ihr mit each () bequem die Elemente aufrufen (wie foreach in PHP, zum Beispiel)
Code: Alles auswählen
$(meinarray).each(function () {
alert (this);
});Ich hoffe, ich konnte einen kleinen Einblick geben, warum ich gerne Jquery verwende – hat man die Syntax erstmal verstanden, ist es kurz, einfach und übersichtlich.
Es gibt noch jede Menge weiterer Events, Funktionen und Manipulationstricks – ein Besuch auf http://www.jquery.com lohnt sich auf jeden Fall. Weitere Themen sind Animationen sowie Ajax. Beides werde ich bei Gelegenheit auch noch vorstellen.
