danza » webdevelopment http://d4nza.de/blog Digitaler Lifestyle Mon, 30 Aug 2010 13:33:57 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery tutorial Top 10 http://d4nza.de/blog/suchmaschinen-optimierung/jquery-tutorial-top-10 http://d4nza.de/blog/suchmaschinen-optimierung/jquery-tutorial-top-10#comments Thu, 10 Jun 2010 04:30:43 +0000 danza http://d4nza.de/blog/?p=653 Bei dem Suchbegriff jQuery Tutorial ist mittlerweile mein Blog auf Platz 3 vorgedrungen in der Google Suchmaschine, was für mich guten Traffic bedeutet und für die Suchenenden ein schönes kleines Tutorial. Der Artikel ist Mittlerweile schon über einen Jahr alt. Ich hoffe das der Blog in der Top10 bei dem Suchbegriff bleibt.

Wer sich den Artikel ansehen will: http://d4nza.de/blog/tutorials/jquery-tutorial-1

]]> http://d4nza.de/blog/suchmaschinen-optimierung/jquery-tutorial-top-10/feed 0 jQuery Tutorial http://d4nza.de/blog/tutorials/jquery-tutorial-1 http://d4nza.de/blog/tutorials/jquery-tutorial-1#comments Mon, 16 Feb 2009 22:23:22 +0000 danza http://blog.d4nza.de/?p=99 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.

]]> http://d4nza.de/blog/tutorials/jquery-tutorial-1/feed 20 jquery Framework http://d4nza.de/blog/website-tipp/jquery-framework http://d4nza.de/blog/website-tipp/jquery-framework#comments Sat, 14 Feb 2009 00:26:47 +0000 danza http://blog.d4nza.de/?p=74 Ich wollte euch mal kurz auf die javascript Libary jquery aufmerksam machen. Ich habe selber noch nicht mitgearbeitet, habe aber schon viel gutes drüber gehört und werde es mir demnächst auch mal im Detail anschauen. Dann werdet ihr von mir auch nochmal eine genaue Bewertung und Empfehlung bekommen.

Fakt ist man kann damit, wenn man weiß wie, sehr schnell schöne Funktionen schreiben.

http://jquery.com/

]]> http://d4nza.de/blog/website-tipp/jquery-framework/feed 0