«
»

jQuery Einführung

jQuery ist ein mächtiges und auch sehr beliebtes JavaScript-Framework! Ich möchte Euch heute eine Einführung in jQuery geben und ein paar Dinge zeigen.

Zu beginn müsst Ihr euch die jQuery-Bibliothek zu downloaden. Dazu geht auf die jQuery-Page und klickt auf den großen Button rechts. Nun können wir beginnen!

 

[ 1 ] Wir bereiten erst einmal unser HTML-Document vor:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Einführung</title>
</head>

<body>
</body>
</html>

Nachdem wir die Datei abgespeichert haben, binden wir die jQuery-Bibliothek in den -Bereich der HTML-Datei ein. (Bitte denkt daran, die JS-Datei in den gleichen Ordner zu packen, wie eure HTML-Datei. Ansonsten Dateipfade anpassen. ;) )

1
<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js "></script>

Als nächstes schreiben wir unseren ersten jQuery-Code. Dieser Teil kommt wieder in den -Bereich, unter den oberen Teil.

1
2
3
4
5
<script type="text/javascript" language="javascript">
$(function(){
     //Hier stehen weitere Anweisungen
});
</script>

Alle Anweisungen, welche in dieser Funktion stehen, werden erst Ausgeführt, wenn die ganze Seite geladen ist. Somit gehen wir Sicher, dass unser Code immer funktioniert.

 

[ 2 ] Als erstes Zeige ich Euch, wie ihr HTML-Elemente ganz einfach Anzeigen (Aufklappen) und Verstecken (Zuklappen) könnt. Wir schreiben also folgenden HTML-Code in den -Bereich der HTML-Datei:

1
2
3
<b id="klapp">Auf- / Zuklappen</b>
 <div class="klappen">Mich kann man Auf- und Zuklappen!</div>
<div class="nichtklappen">Mich kann man <b>nicht</b> Auf- und Zuklappen!</div>

Anderst, wie normal in JavaScript, benötigen wir keinen Funktionsaufruf im HTML-Bereich. Das übernehmen für uns so genannte “Selectoren” & “Event-Helper”. Selectoren geben an, auf welchem Element ein Event-Helper ausgeführt werden soll. Event-Helper bestimmen, wann eine Funktion ausgeführt werden soll. Dazu gehören z.B. “click”, “hover”, “mouseup”, “focus” und noch viele mehr.

 

Selectoren: Selectoren zeigen auf einen bestimmten Tag im HTML-Breich. Genauso, wie in CSS, können ID’s, Klassen und normale Tags angesprochen werden (#MeineId, .meineKlasse, span). In unserem Fall möchten wir, bei einem Klick auf das b-Tag mit der ID “klapp” das Div mit der Klasse “klappen” Auf- / Zuklappen. Also sprechen wir die ID an: $(“#klapp”).

 

Event-Helper: Wie oben schon gesagt, bestimmen Event-Helper, bei welcher User-Aktion (Mausklick, Tastendruck, …) eine Funktion ausgeführt werden soll. In unserem Beispiel verwenden wir den Event-Helper “click”. Hängen wir unserem Selector also den Event-Helper mit einer Funktion an: .click(function(){});. Euer JS-Code müsste nun so aussehen:

1
2
3
4
5
$(function(){
    $("#klapp").click(function(){
       
    });
});

 

Nun müssen wir das Div mit der Klasse “klappen” verstecken. Dazu benötigen wir nur einen weiteren Selector (welcher auf “.klappen” zeigt) und eine Effekt-Funktion (hide, show).

1
2
3
4
5
$(function(){
    $("#klapp").click(function(){
        $(".klappen").hide(); //Hier verstecken wir das Div mit der Klasse klappen
    });
});

 

Bei jedem Klick würde jQuery nun versuchen, das Div zu verstecken. Also prüfen wir, ob das Div schon versteckt ist, wenn nicht, verstecken wir es. Beim verstecken wird der CSS-Style “display” auf “none” gestellt. Wir können mit der jQuery-Funktion .css Prüfen, ob das Div versteckt ist.

1
2
3
4
5
6
7
8
$(function(){
    $("#klapp").click(function(){
        if($(".klappen").css("display") != "none")
        {
            $(".klappen").hide();
        }
    });
});

Jetzt einfach noch eine else-Anweisung an die If-Abfrage packen und das Div wieder anzeigen.

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
    $("#klapp").click(function(){
        if($(".klappen").css("display") != "none")
        {
            $(".klappen").hide();
        }
        else
        {
            $(".klappen").show();  
        }
    });
});

Nun öffnet euer HTML-Dokument im Browser und testet eure soeben geschrieben jQuery-Funktion!

 

Beispiel ansehen Kostenloser Download

 

[ 2 ] Sicherlich ist das nichts besonders, aber mit dem fast gleichem Code, kann man einen ganz anderen Effekt erzielen. Wir setzten nun in die Effekt-Funktion hide() & show() jeweils eine Zahl.

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
    $("#klapp").click(function(){
        if($(".klappen").css("display") != "none")
        {
            $(".klappen").hide(1000);
        }
        else
        {
            $(".klappen").show(1000);  
        }
    });
});

 

Beispiel ansehen Kostenloser Download

 

[ 3 ] Es gibt aber noch eine weitere Möglichkeit, ein Element Auf- bzw Zuklappen zu lassen. Ändern wir doch mal show(1000) zu slideDown(1000) und hide(1000) zu slideUp(1000).

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
    $("#klapp").click(function(){
        if($(".klappen").css("display") != "none")
        {
            $(".klappen").slideUp(1000);
        }
        else
        {
            $(".klappen").slideDown(1000); 
        }
    });
});

 

Beispiel ansehen Kostenloser Download

 

[ 4 ] Lassen wir das Div doch mal Aus- / Einfaden. Also ändern wir wieder die Effekt-Funktionen.

1
2
3
4
5
6
7
8
9
10
11
12
$(function(){
    $("#klapp").click(function(){
        if($(".klappen").css("display") != "none")
        {
            $(".klappen").fadeOut(1000);
        }
        else
        {
            $(".klappen").fadeIn(1000);
        }
    });
});

 

Beispiel ansehen Kostenloser Download

 

Wie Ihr seht, kann mit ganz wenig Code große Effekte erzielen. Experimentiert doch ein bisschen herum!

 

Lg,
euer Flo

Bookmarke diesen Post:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • BlinkList
  • blogmarks
  • LinkArena
  • Live
  • MisterWong.DE
  • MSN Reporter
  • MySpace
  • Reddit
  • StumbleUpon
  • Technorati
  • Twitter
  • Yahoo! Bookmarks
  • Yigg

Schlagworte: , ,

Dieser Beitrag wurde vor am Samstag, 29. August 2009 um 15:58 Uhr veröffentlicht und unter jQuery gespeichert. You can follow any responses to this entry through the RSS 2.0 feed. Sie können einen Kommentar hinterlassen oder einen Trackback von Ihrer Website hierher setzen.

1 Kommentar zu „jQuery Einführung“

  1. Rübel sagt:
    11. Dezember 2009 um 13:36 Uhr

    sehr sehr schön beschrieben !
    Danke

Kommentieren