Kurzeinführung in jQuery

jQuery ist ein frei verfügbares Javascript-Framework, das umfangreiche und mächtige Funktionen zur Navigation und Manipulation der Inhalte auf einer Webseite bereitstellt.  Das von John Resig entwickelte Framework bietet eine vereinfachte Navigation im sog. DOM einer Seite sowie elegante und leicht verständliche Funktionen für animierte Effekte, Ajax und Event-Handling.

Ab Version 2.5 integriert weblica die jQuery-Bibliothek. Die Funktionalität von jQuery kann dabei direkt auf jeder Seite genutzt werden. Hierzu bindet weblica jQuery auf jeder Seite automatisch ein. Wer das nicht möchte, kann verhindern, dass weblica jQuery automatisch auf jeder Seite einbindet.

Vorbereitung

Die vorliegende Einführung bietet einen Kurzeinstieg und zeigt die grundsätzliche Verwendung von jQuery.

Damit Sie die Beispiele in dieser Einführung gleich ausprobieren können, legen Sie am besten ein neues weblica Projekt an. Fügen Sie dann einen Text-Absatz mit folgendem Inhalt ein:
In weblica steht Ihnen jQuery automatisch auf jeder Seite zur Verfügung.
Setzen Sie hierbei für den Text weblica einen Web-Link auf http://www.weblica.ch und für jQuery einen Web-Link auf http://jquery.com.

Sie können selbstverständlich auch jeweils andere Adressen als Linkziele verwenden. Für unser Beispiel brauchen Sie einfach einen Hyperlink im Dokument.
Den Beispiel-Code hinterlegen Sie am besten in den Seiten-Eigenschaften auf der Registerkarte HTML/CSS mit der korrekten Skript-Anweisung:
<script type="text/javascript">
  // Hier folgt dann der Beispiel-Code
</script>

Code ausführen, wenn das Dokument bereit ist

Damit Sie mit den Elementen auf einer Seite sinnvoll arbeiten können, muss das Dokument bereit sein. jQuery bietet hierzu eine einfache Anweisung, die das Dokument prüft und darauf wartet, dass es bereit ist, um manipuliert zu werden:
$(document).ready(function(){
  // Hier steht Ihr Code
});
Wir fügen nun Code ein, der auf das Anklicken von Links reagiert:
$(document).ready(function(){
  $("a").click(function(event){
    alert("Danke für das Anklicken!");
  });
});
Rufen Sie nun die Vorschau für die Seite auf. Wenn Sie nun auf einen der beiden Links klicken, dann sollte ein Hinweis-Fenster mit dem Text "Danke für das Anklicken!" erscheinen, bevor der eigentliche Link aufgerufen wird.

Mit diesem Code tun wir nichts anderes, als auf das Klick-Ereignis (Engl. Event) für Links zu reagieren, wir haben einen sog. Event-Handler geschrieben. Für die meisten dieser Ereignisse können Sie verhindern, dass die sog. Default-Aktion ausgeführt wird, für den Links also unterbinden, dass das Linkziel aufgerufen wird. Das geht mit jQuery einfach mit dem Aufruf der Funktion event.preventDefault().
$(document).ready(function(){
  $("a").click(function(event){
    alert("Danke für das Anklicken!");
    event.preventDefault();
  });
});

HTML-Klassen hinzufügen und entfernen

Hinweis

Die folgenden Code-Beispiele gehören jeweils in den Ready-Event-Handler, wie im Abschnitt Code ausführen, wenn das Dokument bereit ist erklärt. Damit ist sicher gestellt, dass der Code erst ausgeführt wird, wenn das Dokument bereit ist.
Viele Effekte und Aufgaben, die sich mit jQuery verwirklichen lassen, machen es nötig, eine CSS-Klasse zu einem Element hinzu zu fügen oder zu entfernen. Mit jQuery geht auch das ganz leicht. Für unser Beispiel legen Sie eine einfache CSS-Regel an, entweder im HTML-Head der Seite oder direkt im globalen CSS Ihres Projekts:
a.test { font-weight: bold; }
Diese Regel sorgt dafür, dass alle Links Fett ausgezeichnet werden.
Fügen Sie nun folgenden Code in den document.ready Event-Handler ein:
$("a").addClass("test");
Alle Links sollten nun Fett dargestellt werden.

Um die Klasse mit jQuery wieder zu entfernen, verwenden Sie den folgenden Code:
$("a").removeClass("test");

Spezial-Effekte

jQuery bietet eine Reihe von praktischen Effekten (vgl. hierzu jQuery Effects), die Sie mit dem Aufruf einer Funktion nutzen können. Probieren Sie es z.B. für Ihre Links aus:
$("a").click(function(event){
  event.preventDefault();
  $(this).hide("slow");
});
Wenn Sie nun auf einen Link klicken, wird dieser langsam verschwinden.

Weitere Informationen

Wenn Sie nach dieser kurzen Einführung neugierig geworden sind, empfehlen wir Ihnen einen Besuch der jQuery-Website.

Zudem werden wir hier im Learning-Center laufend weitere Artikel zur Nutzung von jQuery mit weblica veröffentlichen. Sie werden staunen, was alles möglich ist!