Einstieg in jQuery
Dezember 23, 2009 | Kommentieren
Jquery ist ein frei verfügbares Javascript-Framework, welches das Entwickeln von JavaScript Anwendungen erleichtert.
Es gibt zwar noch andere Framworks, doch JQuery ist relativ einfach zu verstehen und bietet eine schlanke Syntax.
Ausserdem gibt es unzählig viele Plugins für verschiedene Ajax-Effekte, Bildergalerien, Navigationen, Slider, Tabs usw.
Hier eine Übersicht der Vorteile:
———————————————–
* schlanker Code im Vergleich zum purem JavaScript
* einfach zu erlernen
* Wiederverwendbarkeit
* viele Plugins / Tutorials etc
So, nun aber genung geredet. Fangen wir am besten mit einem einfachen Tutorial an.
Zuerst müssen wir uns auf die jQuery Seite begeben und die letzte Version downladen.
Jetzt erstellen wir ein leeres HTML Dokument und binden die “jquery.min.js” ein:
<!DOCTYPE html"> <html> <head> <title>jQuery Tutorial</title> <script src="jquery.min.js" type="text/javascript"></script> </head> <body> <h4><a href="#" id="toggle_link">Zeige mehr...</a></h4> <div id="show_more" style="display: none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> </body> </html>
Ich habe dem Dokument noch einen Link mit der ID “toggle_link” und einwenig Text in einem Div-Element mit der ID “show_more” hinzugefügt um diesen später per jQuery ansprechen zu können. Ausserdem würde mit dem inline Style “display:none;” das Div ausgeblendet.
Um mit der DOM Manipulaion beginnen zu können müssen wir zuerst jQuery aufrufen:
$(document).ready(function(){
// jQuery-Code
});Dieses bewirkt dass alle Funktionen innerhalb des jQuery Codes ausgeführt werden, sobald das komplette HTML Dokument (DOM) geladen würde. Für alle die es ein wenig schlanker haben möchten, können es wie folgt abkürzen:
$(function(){
// jQuery-Code
});Jetzt bauen wir einen einfachen “Toggle-Effekt” welcher den Text in dem Div ein- und ausblenden lässt.
Um die von uns gewollten DOM-Elemente anzusprechen, benutzen wir das Dollarzeichen ($) als ein Selektor.
Ein paar Beispiele dafür wären:
$("#id")
$(".klasse")
$("div, p, a, span, li")Im Einsatz sieht es dann so aus:
<script type="text/javascript"> $(function(){ $("a#toggle_link").click(function(){ $("div#show_more").toggle(); }); }); </script>
Wenn man jetzt auf den Link mit der ID “toggle_link” klickt, ruft man die Funktion “toggle” auf welche wieder das Div-Element mit der ID “show_more” manipuliert. Der “toggle” Befehl von jQuery sorgt dafür dass der Text ein- und ausgeblendet wird.
Hier das fertige Ergebniss (Link anklicken):
Suche
