JQuery - Eine kurze Einführung
Wer erinnert sich nicht an die Tage in denen postuliert wurde: "Javascript ist böse, mach das aus!". Die Zeiten sind mit dem Web 2.0 / Ajax-Hype inzwischen vorbei. Es gehört derweil zum guten Ton, seine Webseite mit schicken Effekten oder kleinen Helferlein auszustatten. Eine Möglichkeit dies zu tun ist mit Hilfe von Javascript Frameworks wie jQuery, MooTools oder Scriptaculous. Wir wollen uns hier jQuery widmen, welches im Januar 2006 von John Resig auf einem Barcamp in New York veröffentlicht wurde.
Bei jQuery handelt es sich um ein unobstrusive Javascript. Das heisst, es greift nicht direkt in ein bestehendes Markup bzw. Content ein, sondern benutzt entsprechende CSS-Selektoren der HTML-Elemente, und hält damit den Quelltext sauber.
Ein kurzes Beispiel.
Folgender Quellcode wird zwischen das head-tag geschrieben:
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
-
<script type="text/javascript">
-
$(function(){
-
alert ('Hello World!');
-
});
-
</script>
Damit haben wir nun die Grundlagen für die Einbettung von jQuery-Elementen in unsere HTML-Seite gelegt und mal wieder das "Hallo Welt"-Klischee hervorragend bedient 
.
Beim Laden der Seite würde nun ein Hinweisfenster mit dem Text "Hello World" erscheinen.
Natürlich würde anstelle des recht sinnfreien Hinweisfensters unser benötigter Javascript-Code stehen, ob Lightboxen, Slider, Klappmenüs oder sonstige coole Gimmicks, es ist alles möglich und vieles bereits als Plugin super einfach eingebaut oder gar selbst erweitert.
Elemente im DOM lassen sich über CSS Selektoren sehr einfach und effektiv auswählen, ein Beispiel dafür wäre, wir haben ein
mit der id menu, um dieses in jQuery ansprechen zu können, würden wir einfach $("#menu") benutzen, und dann unsere Magie in Form von Events oder Effekten darüber laufen lassen.
Wollten nun einfach die Breite ändern, so würden wir nun einfach .css({ "width", "950px"}); hinten an $("#menu") anhängen, und schon, onload, ändert sich die Breite anhand der CSS Angabe.
Ideal zur Verwendung mit jQuery ist auch jQuery UI, welches einem viele oft benötigte UI-Elemente wie Drag & Drop, Slider, Accordion, Animationseffekte usw. zur Verfügung stellt, und das ganze auch noch mit vielen fertigen Themes aufhübscht. Gefällt einem ein Theme, oder möchte man sein ganz eigenes erstellen, hilft einem der Themeroller dabei in Windeseile seinen eigenen Style zu erstellen.
Wollten nun einfach die Breite ändern, so würden wir nun einfach .css({ "width", "950px"}); hinten an $("#menu") anhängen, und schon, onload, ändert sich die Breite anhand der CSS Angabe.
Ideal zur Verwendung mit jQuery ist auch jQuery UI, welches einem viele oft benötigte UI-Elemente wie Drag & Drop, Slider, Accordion, Animationseffekte usw. zur Verfügung stellt, und das ganze auch noch mit vielen fertigen Themes aufhübscht. Gefällt einem ein Theme, oder möchte man sein ganz eigenes erstellen, hilft einem der Themeroller dabei in Windeseile seinen eigenen Style zu erstellen.