Ich schreibe ein kleines jquery Tutorial mit einigen Beispielen.

Demo 1 Alert Box

Als erstes registrieren wir ein so genanntes “ready Event” für das Document. Dieses geht in jquery mit der Funktion $(document).ready(function()). Im Code sieht das folgendermaßen aus:

$(document).ready(function() {
    //Mach irgendetwas wenn das Dokument geladen ist.
});

Wir wollen nun, das wenn man auf einen Link klickt, eine Messagebox erscheint, mit dem Inhalt Hallo Welt. Dazu schreiben wir folgendes in die Funktion:

$(document).ready(function(){
    $("a").click(function(){
        alert("Hallo Welt");
    });
});

Der komplette HTML Code sieht jetzt folgendermaßen aus:

Demo 1 Alert Box – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden (evtl. Pfad anpassen)-->
        <script src="jquery.js" type="text/javascript"></script>
 
        <!--Code für Demo 1-->
        <script type="text/javascript">
        $(document).ready(function(){
            $("a").click(function(){
                alert("Hallo Welt");
            });
        });
        </script>
    </head>
 
    <body>  
        <!--Zwei Test Links-->
        <p><a href="#">Ein Link</a></p>
        <p><a href="#">Ein weiterer Link</a></p>
    </body>
</html>

Nun schauen wir mal was wir gemacht haben. $(”a”) ist ein jquery Selector. Mit $(”element”) können verschieden Sachen selektiert werden, auch Klassen $(’.klasseDesElements’) oder IDs $(’#idDesElements’). Es kann aber auch kombiniert werden, um z.B. alle Divs mit der Klasse development zu selektieren $(’div.development’).

In unserem Fall werden alle a Element in dem Dokument selektiert. click() fügt allen ausgewählten Elementen ein Klick Event hinzu. In unseren Fall wird eine ganz normale Javascript Funktion aufgerufen, nämlich alert(”Hallo Welt”);. Nun was passiert jetzt bei dieser Funkion? Alle a-Elemente führen beim klicken darauf, eine Messagebox aus in der steht Hallo Welt. Also genau das was wir wollten.

  1. Demo 1 Alert Box
  2. Demo 2 CSS Klassen
  3. Demo 3 Spezial Effekte