JQuery Tutorials

Bindet als allererstes die JQuery Library in den Head Bereich eurer Page ein. Downloadet euch dazu den Code von jquery.com und speichert ihn als .js ab. Um immer den Aktuellsten JQuery Code zu haben, nutzt folgenden Link.

Image loaded

Mit dieser Abfrage kann man prüfen ob ein Bild geladen wurde.
            var img = new Image();

            var imageSrc = "http://yuritanima.de/image.jpg";

            img.onload = function() {
                //If image Loaded do this
            };

            img.src = imageSrc;
        

After window resize

Die function innerhalb des Timeouts wird erst ausgeführt, wenn der Window resize 250ms lang nicht mehr ausgelöst wurde. Dies ist nützlich wenn eine funktion erst nach einem resize gestartet werden soll.

        var resizeTimer;
        $(window).on("resize", function(){
            clearTimeout(resizeTimer);

            resizeTimer = setTimeout(function(){
                //Function

            }, 250);
        });
        

Image preload

Mit diesem script könnt ihr beliebig viele Bilder vorladen. In der Variable preload schreibt ihr die Bilder rein, die Ihr vorgeladen haben wollt und in die Variable pfad gibt den Ort an, wo sich die Bilder befinden. Anschließend wird jedes Bild in einer each schleife vorgeladen.

        $(document).on("ready", function(){
            var preload = ['image.jpg','image_1.jpg'];
             $(preload).each(function(){
                $('')[0].src = location.origin + "/images/" + this;
            });
        });

        

Jquery ScrollTop - scrolling to DIV

Nach dem Klick auf das DIV mit der ID link_1 soll die Funktion ausgeführt werden. Der Scrollbereich ist der komplette body bzw. die komplette Webseite. Mit .animate starten wir die Animation und mittels .scrollTop wird die Seite auf die neue Position gescrollt. Die neue Position ist der Top Wert des DIV's mit der ID box_1. Zum Schluss kommt noch die Geschwindigkeit, mit der gescrollt werden soll.
Code testen

        $('#link_1').click(function(){
        $('html, body').animate({
            scrollTop:$('#box_1').position().top
            }, 500);
        });

        

JQuery Width und Height Animation

Nach dem klicken auf unser test DIV soll nun folgende Funktion ausgeführt werden. Als erstes ermitteln wir welche Breite unser DIV hat und speichern es in der Variable get_width ab. Per IF fragen wir ob get_width gleich 300px ist, wenn es war (true) ist soll er unser DIV die auf eine Breite und Höhe von 150px bringen. Klicken wir nun nachmal auf das DIV, wird es wieder auf die Anfangsgröße von 300px gebracht, da die IF Abfrage festgestellt hat, dass das DIV nicht mehr die Größe von 300px besitzt. Durch .stop() können wir die Aktuell laufende Befehl abbrechen und eine neue beginnen.
Code testen

        $('#test').click(function(){

        get_width = $('#test').css("width");

        if(get_width == "300px")
        {
            $('#test').stop().animate({width: "150px", height: "150px"});
        }
        else
        {
            $('#test').stop().animate({width: "300px", height: "300px"});
        }
        });

        

JQuery Struktur

Mit dem Dollar ($) Zeichen wird JQuery aufgerufen. Es folgt eine Klammer mit Hochkommas, in der das DIV mit der ID test aufgerufen wird. Klickt man nun auf dieses DIV soll die Funktion ausgeführt werden. In dem Fall sollte eine Warnmeldung auftauchen, mit dem Inhalt Hallo Welt. Übrigens - wie bei CSS unterscheidet man hier auch zwischen ID, mit einer Raute (#) und für CLASS einem Punkt (.).
Code testen

        <script> 
        $('#test').click(function(){
        alert("Hallo Welt");
        });
        </script>

        

JQuery einbinden

Damit euer Code später auch funktioniert, müsst Ihr die JQuery Library in den Head Bereich eurer Webseite einbinden. Zu beachten ist auch, das eure JQuery Scripts nicht vor der Library stehen dürfen. Baut die Scripts am besten ganz weit unten in eurer Webseite ein.

        <script 
        type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
        </script>

        <script> 
        //Code
        </script>