jQuery Tutorial

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’).

[ad#adsense]

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.

Demo 2 CSS Klassen

Eine andere Aufgabe von jQuery ist das hinzufügen und entfernen von CSS-Klassen. Zuerst erstellen wir mithilfe von CSS eine Klasse mit dem Namen test. Wir nehmen in diesem Fall mal eine fette und kursive Schriftart

a.test {
    font-weight: bold;
    font-style: italic;
}

Als nächstes kommen wir zum Javascriptteil. Sobald nun also das Dokument geladen ist, soll nun allen Links die Klasse test hinzugefügt werden. Dazu nehmen wir die zuvor gelernte Funktion $(document).ready(function()) mit der wir nun abfragen, wann die Seite fertig geladen ist. Mit $(“a”) selektieren wir nun alle a-Elemente und fügen mit der Funktion addClass() eine Klasse hinzu, in unseren Fall ist das die Klasse test.

$(document).ready(function(){
    $("a").addClass("test");
});

Nun noch ein paar Links zum Testen hinzufügen, schon werden wir sehen was passiert.

Demo 2 CSS Klassen – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden (evtl. Pfad anpassen)-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--CSS Klasse "test" macht fett und kursiv -->
         <style type="text/css">
            a.test {font-weight: bold; font-style:italic;}
         </style>

        <!--Code für Demo 2-->
        <script type="text/javascript">
        $(document).ready(function(){
            $("a").addClass("test");
        });
        </script>
    </head>

    <body>
        <!--HTML Links ohne der "test" Klasse-->
        <p><a href="#">Ein Link</a></p>
        <p><a href="#">Ein weiterer Link</a></p>
    </body>
</html>

Wenn wir nun uns die Seite ansehen werden wir feststellen das alle Links fett und kursiv dargestellt werden. Die HTML Links haben also die Klasse test jetzt.

[ad#adsense]

jQuery besitzt einige Spezial Effekte, von denen wir nun auch Gebrauch machen wollen. Sie lassen die eigene Website mit wenig Aufwand schön für den Besucher aussehen.

Als aller erstes nehmen wir eine ganz normale Div Box, mit etwas Text drin:

<div style="background-color:#336699;color:#fff;">
    Ich bin eine Testbox und muss immer viel arbeiten :-)
</div>

Damit wir die Box besser sehen, habe ich per Style Attribut, die Hintergrund Farbe auf Blau und die Schrift Farbe auf weiß gesetzt.

Nun fügen wir noch einen Link hinzu, der etwas machen soll:

<a href="#" id="klein">Mach die Box klein (80 x 120px)</a>

Ich gebe diesen Link die ID klein, sodass wir später mit jQuery diesen Link selektieren können.

Als nächstes fügen wir noch etwas javascript hinzu, sodass der Link auch etwas macht wenn man drauf klickt:

$(document).ready(function(){
    /*Box klein machen*/
	$('a#klein').click(function(){
		$('div').animate({ height: 80, width: 120 }, "slow", function(){});
	})
});

Wir selektieren mit $(‘a#klein’) unseren zuvor erstellten Link und geben ihn das Event click, wie schon zuvor erklärt wird bei einem Klick auf das Element nun der javascript Code in den Klammer ausgeführt.

[ad#adsense]

Als nächstes bestimmen wir welches Objekt verändert werden soll ($(‘div’)), in diesen Fall sind das alle div Elemente. Mit der Funktion animate können wir Objekte animieren. Animate besitzt verschiedene Eigenschaften, in unseren Beispiel sagen wir height die Höhe auf 80px und width die Breite auf 120px, den Effekt wollen wir nun langsam haben, also hängen wir noch ein slow an.

Demo 3 Spezial Effekte – Anzeigebeispiel: So sieht’s aus

<html>
    <head>
        <!--jQuery Framework laden-->
        <script src="jquery.js" type="text/javascript"></script>

        <!--Code für Demo 3-->
        <script type="text/javascript">
        $(document).ready(function(){
            /*Box klein machen*/
            $('a#klein').click(function(){
                $('div').animate({ height: 80, width: 120 }, "slow", function(){});
            })
            /*Die Box große machen*/
            $('a#gross').click(function(){
                $('div').animate({ height: 200, width: 800 }, "slow", function(){});
            })
            /*Mehrer Effekte bestimmen*/
            $("a#slideFade").toggle(function(){
                $("div").animate({ height: 'hide', opacity: 'hide' }, 'slow');
            },function(){
                $("div").animate({ height: 'show', opacity: 'show' }, 'slow');
            })
        });
        </script>
    </head>

    <body>
        <div style="background-color:#336699;color:#fff;">Ich bin eine Testbox und muss immer viel arbeiten :-)</div>

        <p><a href="#" id="klein">Mach die Box klein (80 x 120px)</a></p>
        <p><a href="#" id="gross">Mach die Box Groß (200 x 800px)</a></p>
        <p><a href="#" id="slideFade">Dieser Link führt zwei Unteschiedliche Funktionen aus</a></p>
    </body>
</html>

Ich habe noch zwei weitere Links hinzugefügt und genau wie eben noch ein paar Effekte hinzugefügt. Einzige Besonderheit ist bei Link Nummer 3. Er führt beim zweiten Klick eine andere Funktion aus, als beim ersten. Beim ersten Klick lässt er die Box verschwinden und beim zweiten Klick wieder erscheinen. Dafür habe ich die Funktion toggle benutzt. An ihr kann man beliebig viele Funktionen an Reihen, die der Reihe nach abgearbeitet werden und dann wieder von vorne beginnt. Per animate und der height und opacity und der Eigenschaft hide bzw. show kann man die Box verschwinden und wieder erscheinen lassen.

Am besten man guckt sich mal die Beispiel Seite an und probiert es selber einmal.

Wer noch weiter probieren will, sollte sich mal jQuery UI ansehen, hier zu auch ein kleines Tutorial.

Englische Übersetzung von Pathin – http://www.pathin.org/tutorials/jquery-tutorial/


Comments

48 responses to “jQuery Tutorial”

  1. In diesem Context tritt eine Verwechslung auf:

    “…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’). ”

    eine Klasse hat einen Punkt.
    eine ID hat eine Raute.

    lga

  2. Habe das Tutorial entsprechend angepasst war wohl schon etwas später wo ich das geschrieben habe, danke für den Hinweis 😉

  3. Tom Orrow Avatar

    Dein Favicon ist 347 KB 😉

  4. Oh, da hab ich wohl nicht aufgepasst, werde ich mal etwas komprimieren.

  5. Nachdem allles kritisieren:
    danke für den kurzen einstieg! 🙂

  6. Anonymous Avatar
    Anonymous

    Oh, hast wohl das Buch von Daniel Mies, “Webseiten erstellen für Einsteiger”, gelesen. Deine Beispiele sind nämlich genau von dort abgeschrieben.

  7. Nein Buch habe ich leider noch gar nicht gelesen, ich kannte es bis jetzt noch gar nicht. Dieses Tutorial ist enstanden aus mehreren anderen, meist Englisch sprachigen Tutorials, wo die Beispiele herstammen kann ich gar nicht mehr genau sagen.

  8. Andreas Avatar

    Ich hab mal eine Frage: Ich habe einen etwas speziellen Anwendungsfall für jQuery. Und zwar habe ich auf einer Seite mehrere Musikalben mit einer Liste der jeweiligen Titel. Jetzt wollte ich eine Bibliothek wie jQuery benutzen, um die Songtexte zu den Songs einblenden zu lassen, indem man auf den Titel (oder einen speziellen Link jeweils daneben) klickt.
    So wie es jetzt aussieht, müsste ich allerdings für jeden Titel eine eigene jQuery-Funktion erstellen. Das wäre aber ziemlich viel Kopiererei und extrem unübersichtlich. Kann man eine Funktion irgendwie flexibel gestalten, dass automatisch der richtige DIV-Container ein-/ausgeblendet wird, je nachdem, welchen Link man klickt?

    Eine Antwort kann auch gerne an andy at linnert punkt de gesendet werden, falls es hier im Kommentar zu unpraktisch sein sollte.

    Vielen Dank für jede Hilfe.
    Gruß, Andreas

  9. Andreas Avatar

    Nochmal wegen der Sache mit den Songtexten. Das Problem hat sich erledigt. Ich habe das mit $(this).next() gelöst.
    Eine offene Frage bleibt jetzt aber noch. Und zwar, wie man den Anfangsstatus der DIVs, die man togglen kann, auf ‘versteckt’ stellt. Aber ich suche morgen nach einer Lösung…

    Nochmals schöne Grüße,
    Andreas

  10. Bin ich leider gerade ohne Source Code etwas überfragt 😉

  11. Andreas Avatar

    Nicht so schlimm. Habs mit display:none; erfolgreich gelöst. Ich frag mich im Moment nur, warum die Animation der Anweisung toggle() im Firefox so extrem ruckelt. Bei allen anderen Browsern gehts einwandfrei. Und ich hab eine Quadcore CPU… Ist das normal?
    Ist außerdem was dazu bekannt, dass manche Browser die Änderung der Schriftfarbe per css(“color”: “#xxxxxx”) nicht unterstützen? Das funktioniert bei mir auch nicht immer… =/

  12. Also im Firefox hatte ich es früher bei den älteren Funktionen das Animationen leicht ruckelten, im aktuellen finde ich es zur Zeit nicht als störend.

    Zu dem Color Problem: Ich nutze dafür das Plugin http://plugins.jquery.com/project/color bisher hatte ich damit noch keine Probleme.

  13. Andreas Avatar

    Ah, super. Danke für den Hinweis mit dem Plugin. Werd es bei Gelegenheit mal ausprobieren.

    http://jgrassman.linnertmedia.de/musik das ist die Seite mit den Animationen (wenn du auf die Titel des obersten Albums klickst). Ich finde die Animationen dort mit dem FF sehr langsam. Sind die da bei dir auch so?

  14. Leicht ruckelig, gerade mal mit IE, FF und Chrome getestet. Der Chrome hat scheinbar die schnellste Javascript Engine dort ruckelt es kaum. Firefox und Internet Explorer sind ungefähr gleich auf. Etwas langsamer als der der Chrome.

    Aber ich finde es so vollkommen in Ordnung und mich stört es auch nicht ich kenne keine Seiten bei denen das bei längeren Texten mit dem Scroll Effekt nicht so ist.

  15. Andreas Avatar

    Achso, verstehe. Aber komisch, bei mir war der IE wesentlich schneller als der FF. Aber gut, kann man jetzt nicht viel machen. Aber danke fürs testen =)

  16. Hallo,

    danke für das Tutorial. Habe mal versucht den Effekt mit der auf- und zuklappbaren Box umzusetzen und habe nun ein kleines Problem:

    Und zwar soll die Box zu Anfang versteckt sein, also erst mit einem Klick auf den Link erscheinen.

    Wenn ich nun die Box auf display:none stelle dann geht die Box erst beim zweiten Klick auf und danach wie gewünscht, was muss ich nun machen, dass dies gleich beim ersten Klick passiert?

    Danke für Antworten!

    FG Lars

  17. Hallo Lars,

    das mit dem display none ist schonmal richtig, du musst dann nur noch die Toggle Funktionen untereinander vertauschen, weil ja erst eingeblendet wird und dann aus.

    Hab das ganze mal eben schnell auf eine Seite gepackt:
    http://d4nza.de/blog/dev/jquery/demo4.html

    gruß
    danza

  18. Uiii,… das ging ja schnell und jetzt geht es so wie ich es wollte.

    Danke Danza!

    (Und wenn man die Antwort weiß, hätte man auch selber draufkommen können 😉 )

    Lars

  19. Da steckt ein kleiner Fehler drin.
    Klassen werden nicht mit einer Raute (#), sondern mit einem Punkt (.) selektiert.

    Mit der Raute (#) selektiert man IDs!

  20. Vielen Dank zeji,

    hatte den Fehler damals schon mal berichtigt aber irgendwie hat er sich wieder eingeschlichen 😉

  21. Hey, vielen Dank für dein Tutorial, es hat mir sehr weitergeholfen. 🙂 Klasse!

  22. fasdffasf

  23. Guter Beitrag der weiterhilft.

  24. dieser cheat von 500’000 suchbegriffe unten jedesmal einblenden zu lassen gehört dir eins an die birne geklatscht !

  25. Das bleibt meine Sache wie ich das Handle, außerdem generiert das jede Menge Traffic was dir ja wohl klar ist und dadurch ärgert es dich wahrscheinlich 😉

  26. HalloDas ist ein tolles Formular

  27.  Avatar

    javascript background langsam einblenden tutorial

  28. The very root of your writing while appearing reasonable initially, did not really sit perfectly with me personally after some time. Someplace within the paragraphs you actually were able to make me a believer but only for a very short while. I still have a problem with your jumps in logic and you might do nicely to help fill in those breaks. If you actually can accomplish that, I would undoubtedly end up being fascinated.

  29. hi, sehr schönes und verständliches tutorial. habe gleich versucht, aus demo 3 die letzte animation/funktion anzuwenden, leider ohne erfolg (außerdem bin ich ein j(query)script grünschnabel und verstehe noch nicht alles so ganz). hier ist der code, falls es keine großen umstände macht, bin ich dankbar für den schubs in die richtige richtung (ohne funktion klappt es gut).

  30. Hallo futura-web.de,

    könntest du nochmal den Code auf http://pastebin.com/ oder anderer Webseite posten und hier den Link posten, da WordPress aus Sicherheitstechnischen Gründen hier kein Code darstellt.

    Gruß
    Jannik

  31. http://www.10140517.wavelearn.com/BKK Vaillant/java-overlay-test.html
    da hab ichs mal kurz geparkt: ich würde gerne das “details” div solange versteckt halten, bis man auf >>Leisungsdetails klickt; danach ausfahren.
    danke schon mal…

  32. Ich denke so ist es gemeint: http://d4nza.de/blog/dev/jquery/jquery/comments/java-overlay-test.html

    Was habe ich gemacht?

    Ich habe beim Javascript als aller erstes das Details Div versteckt mit: $(“.details”).hide();

    Dann habe ich die Toggle Funktion auf $(“a#slideFade”) alle a tags mit der ID slideFade gesetzt.

    Und danach auf alle Elemente von der Klasse details einmal den Show und einmal den Hide Effekt bei der Toggle Funktion bestimmt:
    $(“.details”).animate({ height: ‘show’, opacity: ‘show’ }, ‘slow’);

    $(“.details”).animate({ height: ‘hide’, opacity: ‘hide’ }, ‘slow’);

    Gruß
    Jannik

  33. hey yannik,
    du bist der BESTE!!! das mit .hide habe ich nicht gewusst, und bei “.details” hatte ich den . ausgelassen… super dicken dank! genau so soll es funzen… dankedankedanke hast nen großen fan gewonnen 😉

  34. und zum schluß: ich würde gerne das ganze div beim onklick auf den “nein, danke button” und auf das x oben rechts schließen. hast du dan einen tipp? danke schon mal im vorraus…

  35. So wie ich das gerade in der Doku von jQuery Tools gelesen habe, brauch man nur dem HTML Element die Klasse close geben.

    Hab die Seite aktualisiert und eingebaut: http://d4nza.de/blog/dev/jquery/jquery/comments/java-overlay-test.html

    Und funktioniert 😉

    PS: Freue mich über jede Art von Backlinks auf meine Webseite 😉

    Gruß
    Jannik

  36. futura-web.de Avatar
    futura-web.de

    hi yannik,
    gibt es eine möglichkeit, die button-, bzw. checkbox-elemente durch eingene zu ersetzten???

  37. hi yannik,
    ich suche nach einer möglichkeit, die checkbox-elemente durch eigene zu ersetzten. bisher habe ich keine brauchbaren tutorials/tipps im web gefunden… ich möchte anstelle der boxen z.b. ein fragezeichen vorstellen, welches sich dann in einen “abgehakt-haken” verwandelt – nachdem mann den text-link angeklickt hat. ich lade die prototyp-elemante auf die testseite von gestern hoch. wäre doch mal eine idee für ein neues tutorial 🙂
    beste grüße und schönes wochenende, dinko

  38. Wie du schon festgestellt hast, wäre das so umfangreich das man ein eigenes Tutorial darüber schreiben könnte, deshalb kann ich dir nur nen groben Leitfaden geben.

    Du müsstest als erstes einmal das “ja ich will” und das “nein ich will nicht” Event abfangen mit .click auf dem entsprechenden Element. Dafür würde ich zwei Klassen machen: like, dislike.

    Dann müsste man bei like die checkbox setzen und bei dislike wieder entfernen.
    Um das zu machen hangelt man sich vom Link (der like oder dislike Klasse) mit (this) hoch zu dem Input Feld z.B.:
    $(this).parent().find(‘input’)

    Danach kann man mit Hilfe von
    .attr(‘checked’,’checked’);
    die Checkbox setzen und mit
    .removeAttr();
    entfernen.

    Nun brauch man nur noch an der Stelle das like oder dislike Bild anzeigen (.show) lassen oder oder mit (.hide) verschwinden lassen.

    Alternativ könnte man nur ein img Tag verwenden und mit .attr(‘source’, ‘http://example.org/like.png’) die Source des Bildes verändern.

    Zusammenfassung:
    Zwei Events like, dislike -> checkbox state ändern -> richtiges bild anzeigen

  39. Hallo,

    irgendwie funkrioniert bei mir die Toggle-Funktion aus Demo 3 nicht. Beim Laden der Seite (ready) verschwindet (“toggelt”) die 3. Linkzeile selbst und ist dann natürlich nicht mehr anklickbar :(( Wenn ich bei document statt “ready” die “click”-Eigenschaft setze, kann ich auch wieder nur den 3. Link ein- und ausblenden. Ich habe jquery 1.9.

    Ansonsten: tolles Tutorial, herzlichen Dank!

    Gruß
    Helmut

  40. hallo danza,

    habe die selben erfahrungen wie mein vorschreiber gemacht. dein tut ist für mich als jQuery einsteiger wirklich verständlich aufgebaut.

    bei demo 3 habe ich die selben probleme wie der user mit dem coment über mir.

    /*Mehrer Effekte bestimmen*/
    $(“a#slideFade”).toggle(function(){
    $(“div”).animate({ height: ‘hide’, opacity: ‘hide’ }, ‘slow’);
    },function(){
    $(“div”).animate({ height: ‘show’, opacity: ‘show’ }, ‘slow’);
    })

    wäre schön, wenn du dich dieser sache annehmen könntest.

    grat & lg
    Hari

  41. du Arschloch, was soll der Mist mit den übertrieben vielen keywords? Man landet hier, findet nichts und regt sich nur über dich Dummbeutel auf…
    Google sollte dich aus dem Index sperren..

  42. Ich fand diese SCHEISSS-Seite über die Suchmaschinensuche nach “diese seite daran hindern weitere dialoge zu öffnen”, in der Hoffnung, dem FF diesen Fehler austreiben zu können. Aber hier wird das Thema gar nicht behandelt.

  43. Hallo,
    erstmal danke für das Torturial.
    Ich habe dein letzten Code mal kopiert um ihn zu testen, damit ich’s sehe und besser verstehe. Jedoch wird der SlideFade link nicht angezeigt. Er wird beim öffnen der Seite in millisekunden angezeigt und direkt vollständig ausgeblendet.
    Ich steig nur nicht dahinter warum das so ist.

    Wäre nett, wenn du eine korrektur davon machen könntest. 🙂 Weil ich fang’ gerade mit Javascript / AJAX erst an.

    Lg
    Marcel

    /*Mehrer Effekte bestimmen*/
    $(“a#slideFade”).toggle(function(){
    $(“div”).animate({ height: ‘hide’, opacity: ‘hide’ }, ‘slow’);
    },function(){
    $(“div”).animate({ height: ‘show’, opacity: ‘show’ }, ‘slow’);
    })

  44. Johne701 Avatar
    Johne701

    what are some superior and in demand websites for blogs? ?? . fkeebecdegcg

  45.  Avatar

    animierter bildwechsel jquery

  46. […] Tutorial baut auf jQuery auf, zum Grundverständnis sollte eventuell sich das jQuery Tutorial durchgelesen werden.Es gibt vier Dateien, functions.js, index.php, mysql.php und functions.php. In […]

  47. Interessante Website. Das Design und die nuetzlichen Infos gefallen mir
    besonders gut.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.