Dieses Blog ist nicht länger aktiv!

Hier wird es in Zukunft keine neuen Inhalte geben, allerdings bloggen die Autoren weiter. Die Designartikel werden nun auf dem persönlichen Blog von Ivo Mynttinen veröffentlicht, während Artikel in denen es um Webdevelopment geht demnächst hier veröffentlicht werden.

Weitere Projekte der Autoren: Fireworks Lab - Kostenlose Adobe Fireworks Dateien

März 3rd, 2010 | von Alexander Trefz | Tutorials, XHTML/CSS, jQuery

jQuery ist eines der beliebtesten JavaScript Frameworks, was Grund genug ist sich damit eingehender zu beschäftigen. In dieser Tutorial-Serie werden wir uns von der ersten Animation bis hin zum selbst entwickelten Plug-In, nach und nach tiefer in das jQuery-Framework einarbeiten.

Demo

Ziel

Heute werden wir uns mit den Grundlagen von jQuery beschäftigen. Wir werden das Framework herunterladen,  in eine Webseite einbinden und unsere erste Animation erstellen.

Voraussetzungen
  • Grundkenntnisse (X)HTML
  • Grundkenntnisse CSS

Schritt 1: jQuery einbinden

Am Anfang einer jeden Webseite steht das HTML-Grundgerüst. Wir erstellen also eine Datei mit dem Namen “index.html”. Nachdem wir das Grundgerüst in der “index.html” jquery.comerstellt haben, können wir das jQuery Framework von jQuery.com herunterladen. Die aktuelle Version ist 1.4.2. Es gibt eine Version für den “produktiven Einsatz” und eine Version für jene Developer, die Fehler im Framework suchen oder einfach hinter die Kulissen sehen wollen. Einsteigern sei die “Production”-Version ans Herz gelegt, aufgund der geringeren Ladezeit beim Aufrufen der Webseite, da die “Production”-Version deutlich kleiner ist. Nachdem wir die Datei herunter geladen haben, erstellen wir einen Ordner in dem Verzeichnis, in welchem unsere “index.html” liegt und geben ihm den Namen “Scripts”. Danach verschieben die “jquery.js” in diesen Ordner.

Jetzt, nachdem wir das Framework herunter geladen haben, müssen wir es nur noch in unsere Webseite einbinden:

1
2
3
4
5
6
7
8
9
10
11
< !DOCTYPE html >
<html>
    <head>
        <title>
            design-creators.net - Meine erste Animation
        </title>       
    </head>
    <body>
        <script type="text/javascript" src="Scripts/jquery.js"></script>
    </body>
</html>

Man sollte alle JavaScript Dateien am Ende des Bodys einbinden, da sie im allgemeinen erst dann ausgeführt werden, wenn das HTML fertig geladen ist und es sich demnach nicht lohnt, die Dateien eher zu laden. Dabei müssen wir allerdings sicher stellen dass die “jquery.js” vor allen anderen JavaScript Dateien, welche jQuery nutzen – wie beispielsweise Plug-ins – eingebunden werden muss. Also:

Richtig

1
2
3
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript"
    src="Scripts/jquery.plugin.js"></script>

Falsch

1
2
3
<script type="text/javascript"
    src="Scripts/jquery.plugin.js"></script>// Error: $ is undefined
<script type="text/javascript" src="Scripts/jquery.js"></script>

Schritt 2: HTML & CSS

Bevor wir damit beginnen, mit jQuery zu arbeiten, müssen wir zunächst das dafür benötigte HTML erstellen. Um dieses Tutorial möglichst simpel zu halten, werden wir nur ein <div> mit einer Klasse und einer ID, sowie ein <a> zur “index.html” hinzufügen.

1
2
3
4
5
<body>
    <div class="fade" id="Fade"></div>
    <a href="#">Div ausblenden.</a>
    <script type="text/javascript" src="Scripts/jquery.js"></script>
</body>

Nun möchten wir diesem <div> ein paar CSS-Regeln zuweisen. Um dieses Beispiel einfach zu halten, erstellen wir dafür keine eigene Datei, sondern schreiben das CSS Inline in den <head> unserer “index.html”

1
2
3
<style type="text/css">
    #Fade{ width:300px; height:300px; background:blue; }
</style>

die “index.html” sollte jetzt im Browser jetzt so aussehen:

index.html

Schritt 3: Browserwahl

Um Webseiten standardkonform zu entwickeln, benötigt man einen ebenso standardkonformen Browser mit guten Entwicklerwerkzeugen.

Firefox 3.6

Der Firefox selbst verfügt nicht über Entwicklerwerkzeuge, jedoch kann und sollte man das Plugin Firebug installieren, welches alle notwendigen Werkzeuge beinhaltet oder wiederum durch Plug-ins verfügbar macht, wie z.B. PHP-Frameworks oder auch eine Erweiterung für jQuery namens FireQuery . Um den Firebug zu öffnen, drücken Sie einfach F12.

Safari 4 & Chrome 4

Da diese beiden Browser beide auf der Webkit-Engine basieren, nutzen sie den in der Engine verankerten “WebInspector”. Im Safari muss dieser jedoch zunächst aktiviert werden. Als erstes klicken wir auf das Zahnrad oben rechts und danach auf “Einstellungen”. Anschließend wählen wir den “Reiter” “Erweitert” und setzen einen Haken bei “Menü Entwickler in der Menüleiste anzeigen”. Das Menü Entwickler befindet sich (wie auch unter Chrome) in dem Menü links neben dem Zahnrad (Chrome: Schraubenschlüssel).

Schritt 4: Die Theorie

Jetzt ist alles vorbereitet, um die Animation zu schreiben, jedoch müssen wir erst etwas Theorie absolvieren. Unser Javascript soll erst dann ausgeführt werden, wenn das gesamte HTML geladen ist. Dafür schreiben wir alle Funktionsaufrufe in folgenden Codeblock:

1
2
3
4
5
<script type="text/javascript">
$(document).ready(function(){
    //Code hier
});
</script>

Diese Funktion bewirkt, dass der darin geschriebene Code erst ausgeführt wird, wenn das “document”, also unsere “index.html”, dafür bereit (ready) ist.

In JavaScript beendet man alle Anweisungen mit einem Semikolon. Um ein Element zu animieren, müssen wir dieses Element erst einmal finden, um den Auftrag zu erteilen, dass es bsw. über 3 Sekunden ausgeblendet wird. Um Elemente zu finden, schreiben wir:

1
var obj = $("meinSelektor");

Funktionen kann man fast immer Parameter übergeben, diese Parameter schreibt man in die Klammern am Ende des Funktionsaufrufs. In diesem Fall kann man einen CSS-Selektor in Form eines Strings an die Funktion übergeben. Der Selektor kann jeder CSS-Selektor sein, also bsw: “body div#Fade”. Dieser Selektor wird als String, also als Zeichenfolge übergeben. Zeichenfolgen werden in ” oder in ‘ eingeschlossen, jedoch muss man sich bei jedem String für ein Zeichen entscheiden, also:

Richtig

1
2
var a = "meinString";
var b = 'meinString';

Falsch

1
var a = "meinString';

wenn wir also das <div> mit der ID “Fade” suchen, schreiben wir das so:

1
var obj = $("#Fade");

Wir möchten das <div> erst ausblenden, wenn jemand auf das <a> klickt, dafür stellt jQuery eine Funktion namens “click()” bereit. “click()” erwartet einen Parameter, genauer gesagt, eine anonyme Funktion. Eine anonyme Funktion definieren wir so:

1
function(){}

Diese Funktion wird erst dann aufgerufen, wenn das Element geklickt wird. Dies nennt man Event. Wir möchten das Click-Event von diesem <a> “handlen” also eine Funktion anhängen:

1
2
3
$("a").click(function(){
// Code hier
});

Nun müssen wir in der übergebenen Funktion jene Funktion aufrufen, welche dafür sorgt, dass das <div> ausgeblendet wird. Die Funktion heißt fadeOut(). Diese Funktion wird nach dem Element aufgerufen, welches wir ausblenden möchten, das Element und die Funktion werden durch einen Punkt miteinander verbunden.

1
2
3
$("a").click(function(){
    $("#Fade").fadeOut();
});

Der Funktion “fadeOut()” wiederum kann man eine Zahl, in diesem Fall eine Ganzzahl, also eine Zahl ohne Nachkommastellen, übergeben, welche die Zeit in Millisekunden definiert, die benutzt wird, um das Element auszublenden. Für 3 Sekunden übergeben wir also einen Wert von 3000:

1
2
3
$("a").click(function(){
    $("#Fade").fadeOut(3000);
});

damit sollte unsere “index.html” in etwa so aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< !DOCTYPE html>
<html>
    <head>
        <title>
            design-creators.net - Meine erste Animation
        </title>
   
        <style type="text/css">
            #Fade{ width:300px; height:300px; background:blue; }
        </style>
   
    </head>
    <body>
        <div class="fade" id="Fade">Auf Wiedersehen!</div>
        <script type="text/javascript" src="Scripts/jquery.js"></script>
        <script type="text/javascript">
       
        $(document).ready(function(){
            $("a").click(function(){
                $("#Fade").fadeOut(3000);
            });
        });
        </script>
    </body>
</html>

Download

Verpassen Sie keine Folge dieser Serie! Abonnieren Sie den RSS-Feed oder den Newsletter!

5 Kommentare

  1. Mato sagt:

    Hi,
    vielen dank für das Tutorial. Freue mich schon auf weiteres, da ich auch grad jQuery lerne ;-).

    Antworten

  2. Ziomek80 sagt:

    Hier hats euch wohl den Footer irgendwie zerlegt.
    Trotzdem gruß ans Team.

    Antworten

  3. Ist gefixt, Danke für die Information.

    Antworten

  4. megawork sagt:

    Vielen Dank für das Tutorial!
    Allerdings fehlt online im HTML Code der Link – und ohne den geht gar nix!
    Im Download stimmts dann. Und die verschiedenen Fades die dort hinterlegt sind könnten eigentlich auch gut hier im Tutorial erklärt werden.
    Gruß, ;-)

    Antworten

  5. Kirchi sagt:

    Super Tutorial,

    anhand von Beispielen super erklärt. Wäre schön, wenn es dieses Tutorial im PDF Format gäbe.

    Gruß kirchi

    Antworten

Hinterlasse einen Kommentar