Ich möchte eventuell ein Reihe von jQuery Tutorials für Einsteiger erstellen. Fangen wir mit dem einfachsten an.

Warum eigentlich jQuery (oder ein anderes JavaScript Framework)?

Mithilfe des Framework kann Code erstellt werden, der sich im Vergleich zu herkömmlichen JavaScript-Aufrufen deutlich einfacher lesen und erstellen lässt. Außerdem werden weniger Programmierkenntnisse im Gegensatz zu reinem JavaScript benötigt. Die riesige Fülle an verfügbaren plugins tut sein übriges. Nahezu für jede Bereiche gibt es frei zugängliche jQuery Lösungen. So muss man nicht jedes mal das Rad neu erfinden und kann auf bereits erprobte Scripte zurückgreifen.

Ein ganz wichtiger Aspekt, ist die Kompatibilität in allen verfügbaren Browsern. Mit jQuery erstellter SourceCode ist in der Regel in jedem Browser und auf jeder Plattform lauffähig.


Grundsätzlich gibt es zwei Möglichkeiten, jQuery in die eigene HTML Seite einzubinden.

Man muss sich zuerst überlegen, welche jQuery Version man eigentlich benötigt. Erste Wahl sollte immer die jeweils aktuellste Version sein. Stand heute ist dies jQuery 2.0.3.

Allerdings unterstützt die 2.x Version nicht mehr die Internet Explorer 6, 7 und 8!

Wenn ihr also diese Browser noch über jQuery ansprechen wollt, solltet ihr eine ältere jQuery Version einbinden.

Neben dem eigentlichen Framework, kann man noch zusätzlich das jQuery Migrate plugin einfügen. Das ist vor allem dann zu empfehlen, wenn ältere jQuery plugins benutzt und eingebunden werden sollen. Das migrate plugin stellt ältere Funktionen bereit, ohne die fremde plugins eventuell nicht voll lauffähig sind.

Nutzt ihr nur euren eigenen Code und neue plugins, dann ist dies nicht nötig und spart Speicherplatz.

Zusätzlich gibt es von jeder Version immer zwei Varianten. Das ist einmal der normale Source Code und zum anderen, eine komprimierte und "minified" Variante. Diese sind vom Funktionsumfang absolut identisch. Die komprimierte Variante ist aber wesentlich kleiner und spart zusätzlich Speicherplatz.


jQuery direkt einbinden

Ihr könnt euch das Framework herunterladen (links sind oben), auf euren eigenen Webspace abspeichern und direkt in die HTML Seite einbinden:

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

Das wars! Wobei ihr jQuery auch in einem separatem Verzeichnis unterbringen könnt.


jQuery aus einer externen Quelle einbinden

Ihr könnt euch das herunterladen und abspeichern komplett sparen und jQuery aus einer externen Quelle einbinden. Das spart Zeit und man muss nicht jedesmal eine neue Version herunterladen, sobald es ein update gibt:

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">

    Für ältere Versionen muss einfach nur die Versionsnummer angepasst werden (siehe hier).
Eingebunden werden die Dateien üblicherweise im HEAD Bereich eurer HTML Seite.

Die ersten Befehle schreiben und gleich loslegen

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

Mit dem $ Zeichen, sprecht ihr das jQuery Framework an.


Ihr könnt euch noch zusätzlich sehr viel Arbeit ersparen, wenn ihr jQuery UI mit einbindet. jQuery UI bietet u.a. Drag & Drop Funktion, Animationen, Effekte und diverse Widgets, die ihr nicht mehr selbst programmieren müsst.

Weitere Tutorials - Erste Schitte, jQuery UI und jQuery Mobile werden folgen...

teile diesen Beitrag

4 Kommentare

  1. Avatar
    Do, Dez 26, 2013

    Ich finde die Idee super und danke für das Einführungs-Tutorial!

    Ganz liebe Grüße

  2. Avatar
    Mo, Okt 6, 2014

    vg

  3. Avatar
    Sa, Jul 4, 2015

    Ich bin nun auch ein Jquery Jünger :-) Frage mich warum ich es so lange vor mir hergeschoben habe. macht spaß! Allerdings ein Kritikpunkt wird bleiben. Es raubt dem Client stets performance...

  4. Avatar
    Lothar
    Do, Okt 22, 2015

    Fehlt da nicht eine abschließende Klammer?

    $(document).ready(function() {
    alert("Hallo Welt");
    })

Diskutiere mit!

 
Kommentar senden