jQuery: Erste Schritte |
|
Dienstag, 27. Januar 2009
|
||
|
Wie schon in meinem letzten Beitrag berichtet, empfinde ich es angenehmer in jQuery als in MooTools zu arbeiten. Daher folgen nun ein paar Beiträge die sich mit den Funktionen in jQuery befassen.
Um mit JavaScript und AJAX zu arbeiten bietet es sich an eine entsprechende Library zu verwenden. In einem kleinen Test habe ich neulich zwei große und bekannte AJAX-Bibliotheken gegenüber gestellt (jQuery und MooTools) und das Fazit geschlossen, dass jQuery gerade für Anfänger die bessere Wahl ist. Einbindung Um eine AJAX-Library zu nutzen muss man sie zunächst in die Seite einbinden. Das erfolgt recht einfach über den Head der HTML-Datei und sieht beispielsweise so aus: <head> Hier liegt das jQuery-Script auf den Servern von Google. Zur Entwicklung reicht es aus darauf zu verlinken - für das fertige Projekt empfehle ich jedoch auf der offiziellen Seite von jQuery das Script herunterzuladen und es dann vom lokalen Webspace aus zu verlinken. Eigene Scripts einbinden Die jQuery-Funktionen sind jetzt eingebunden. Um nun basierend darauf unsere eigenen Scripts zu schreiben müssen wir entweder eine weitere .js-Datei einbinden in der wir unser Script schreiben oder im Head ein weiteres Script-Tag setzen in dem wir dann unseren Code hinein schreiben. Hello World Um das klassische Hello-World Script zu schreiben verwenden wir nun folgenden Code. <script type="text/javascript"> Beim Öffnen der Seite begrüßt uns nun eine Alert-Box im jeweiligen Stil des Browsers mit den Worten "Hello World!". Das $(document).ready ist hierbei ein sogenanntes Event. Alles was sich als Funktion darin befindet wird ausgeführt, sobald die DOM (Document Object Model) des Browsers verfügbar ist. Es gibt auch noch das klassische onLoad-Event. Das tritt jedoch erst ein, wenn alle Elemente auf der Seite fertig geladen sind. Das schließt Bilder und externe Script mit ein. Um so schneller und direkter zu einem Ergebnis zu kommen bietet es sich also an dieses Event (Ereignis) zu verwenden. Hello World Extended Der Grund weshalb man solche Libraries nutzt ist das man einfach und schnell Inhalte auf der aktuellen Seite verändern kann, ohne diese ständig neu laden zu müssen. Im folgenden Beispiel möchte ich z.B. allen DIVs, die die Klasse "helloworld" haben einen roten Hintergrund geben. <script type="text/javascript"> Man fragt sich vielleicht wo hier der Sinn liegt, man könnte diesen DIVs auch einfach über CSS die entsprechende Formatierung mitgeben. Tatsächlich Sinn macht es auch erst, wenn man mit einem Klick-Event z.B. arbeitet. So sieht mein HTML-Code aus: <a href="#" id="klickmich">Hello World rot markieren</a> Ich möchte jetzt, dass bei Klick auf den Link das DIV rot wird. Dafür brauche ich ein onClick-Event. So heißt es im normalen JavaScript. Um Code zu sparen hat man in jQuery das "on" vor dem Eventnamen entfernt. So heißt das Event also nur noch "click" und sieht so aus: <script type="text/javascript"> Alle DIVs mit der Klasse "helloworld" werden rot, aber erst wenn man auf den Link mit der ID "klickmich" klickt. Selektoren In dem oberen Beispiel sehen wir sehr gut zwei verschiedene Selektoren. In jQuery beginnen sie immer mit $("..."). Die drei Punkte stehen hier für ein Element auf der Website. Hier mal ein paar praktische Beispiele: Der Body wird selektiert: $("body") Alle Links werden selektiert: $("a") Ein Element mit der ID "beispiel" wird selektiert: $("#beispiel") Alle Elemente mit der Klasse "fett" werden selektiert: $(".fett") Bis hier hin ist es noch einfach. Die Punkte und Rauten kennen wir aus CSS. Raute bezeichnet eine ID und der Punkt eine Klasse. Lässt man das Vorzeichen Punkt oder Raute weg meint man das komplette HTML-Tag. Die Selektoren in jQuery können aber noch mehr Alle Elemente mit der Klasse "fett" die sich innerhalb von einem Element befinden, dass die ID "beispiel" hat werden selektiert: $("#beispiel .fett") Hier werden nun die gleichen Elemente selektiert wie im vorherigem Beispiel, jedoch nur dann, wenn sich die Elemente mit der Klasse "fett" direkt innerhalb von "#beispiel" befinden. Ist beispielsweise darum noch ein DIV geschachtelt hat das darauf keinen Effekt, da der genaue Pfad nicht mehr stimmen würde: $("#beispiel > .fett") Wir kennen die Pfeil-Syntax ">" ebenfalls aus CSS, nutzen sie jedoch nur eingeschränkt, da der Internet Explorer 6 damit nicht klar kommt. In JavaScript kommt auch der IE6 damit klar und erkennt die Elemente korrekt. Attribute in Selektoren Jetzt wird es richtig cool. Das was jetzt folgt kann CSS gar nicht (bzw. erst ab CSS3). Man kann Elemente selektieren und die Auswahl an deren Eigenschaften fest machen. Hier ein paar Beispiele Alle externen Links werden selektiert: $("a[href^='http://']") Alle Links in denen ein JPG, GIF oder PNG-Bild aufgerufen wird, werden selektiert: $("a[href$='jpg'], a[href$='gif'], a[href$='png']") Alle Input-Felder die im Namen am Ende ein "|required" stehen haben: $("input[name$='|required']") Was heißt "wird/werden selektiert"? Zum Schluss dieses Artikels möchte ich darauf noch eingehen was eigentlich passiert, wenn man von einer Selektierung spricht. Nach einem Selektor kann man eine Funktion oder ein Event dran hängen. Also entweder passiert etwas mit den von mir ausgewählten Elementen oder es soll etwas passieren wenn man z.B. darauf klickt. Für beide Fälle gibt es verschiedene Befehle. Ein Event kennen wir bereits ".click". Und eine Funktion ebenfalls: ".css". Event: $("input[name$='|required']").click(function(){ Hier passiert irgendetwas wenn man auf Input-Felder klickt deren Name mit "|required" enden. Funktion: $("input[name$='|required']").css("background-color", "#FF0000"); Hier passiert etwas mit den Input-Feldern deren Name mit "|required" enden. In diesen Beispiel wird die Hintergrund-Farbe auf rot gesetzt. Eine Selektierung hat nicht unbedingt ein Event oder eine Funktion zur Folge. Man kann die selektierten Elemente auch in eine Variable speichern und dann damit erst mal arbeiten. Sind es übrigens mehr als ein Element, das man selektiert wird ein Array erstellt in dem sich alle passenden Elemente befinden. Link  Kommentare (2)
|
||
| Letzte Aktualisierung ( Dienstag, 27. Januar 2009 ) | ||
| < Zurück | Weiter > |
|---|
