Zum Inhalt wechseln

- - - - -

jQuery Basics - Webseiten mit jQuery gestalten

jQuery AJAX Java

Das JavaScript Framework jQuery ist heute ohne Frage eine der beliebtesten Lösungen für AJAX, DOM und vielfältige Webdesign-Effekte. Unzählige Plugins machen es ohne umfangreiche Programmierkentnisse möglich, Features wie Fotogalerien, Slider und ähnliches zu nutzen. Nichtsdestotrotz ist es sinnvoll die Basics von jQuery zu kennen. Mit dieser kleinen Einführung verstehen jQuery Anfänger das Framework schnell, erfahren wie jQuery auf den Webseiten eingebunden wird und wo jQuery Plugins im Web zu finden sind.
jQuery einbinden
John Resig hat die JavaScript Bibliothek entwickelt und 2006 auf dem Barcamp in New York vorgestellt. Seitdem hat sich jQuery im Webdesign durchgesetzt. Zahlreiche Webapplikationen nutzen die JavaScript-Klassenbibliothek. Der Suchmaschinenbetreiber Google hostet die Bibliothek in den Google Libraries API. Das ist praktisch, so kann jQuery auf den eigenen Webseiten unkompliziert eingebunden werden. Es reicht somit zwischen den HTML-Tags „<head>“ und „</head>“ folgendes Codefragment einzubinden, um die jQuery auf den eigenen Seiten nutzen zu können.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


Alternativ kann die Bibliothek von der Projekt-Webseite heruntergeladen und auf dem eigenen Server abgelegt werden. Der SRC-Pfad ist dann natürlich entsprechend zu ändern.

Der Funktionsumfang von jQuery ist sehr mächtig. Durch die Bibliothek können so genannte Events verwendet werden. Das Drehen des Mausrades, Tastatureingaben oder Klicks auf Links werden registriert und lassen sich als Auslöser für Änderungen am aktuellen HTML-Dokument nutzen. Per XML ist es möglich, Daten von einem Server nachzuladen.

Elemente selektieren und Funktionen nutzen
Die Funktionsweise von jQuery ist im Grunde ganz simpel. Nachdem das HTML-Dokument vom Browser geladen wurde, wird jQuery aktiv und kann automatisch oder bei Interaktionen des Nutzers reagieren. So lassen sich zum Beispiel Slider und Tabs auf Webseiten unkompliziert realisieren. Der Selector „$“ ist wohl in dieser Hinsicht am charakteristischsten für jQuery. Mit diesem kann auf die DOM Objekte eines HTML Dokumentes zugegriffen werden. Es handelt sich dabei um CSS Selektoren wie CSS-Klassen oder IDs und um HTML Elemente (p,div, li,...).

In der Praxis sieht das für die ID „aBeispiel“ so aus:

$("#aBeispiel") 


Für CSS Klasse „bBeispiel“ so:

$(".bBeispiel") 


Und für das HTML-Element div so:

$("div") 


Auf einem selektierten Element können dann Funktionen ausgeführt werden, zum Beispiel kann die CSS Definition geändert werden:

$("#aBeispiel").css({ "color": "green", "font-size": "10px" });


Mit diesem Codebeispiel wird die CSS Definition für Elemente mit der ID „aBeispiel“ auf eine grüne (Schrift-)Farbe und eine Fontgröße von 10px festgelegt. Folgendes Beispiel entfernt hingegen die Css-Klasse „todelete“ von div Elementen:

$("div").removeClass("todelete");


Durch das so genannte Chaining – ein Verketten - lassen sich jQuery Funktionsaufrufe kombinieren. Diese verketteten Funktionsaufrufe werden hintereinander ausgeführt.

$("div").removeClass("todelete").css({ "color": "green", "font-size": "10px" })


Dieser Code entfernt von div Elementen die Klasse „todelete“ und weist den Containern die CSS Eigenschaften aus dem obigen Beispiel zu. In der Praxis kann dies auch mit einem Event verbunden werden.

$(document).ready(function(){

   $("a").click(function(event){

     $("div").removeClass("todelete").css({ "color": "green", "font-size": "10px" })

   });

 });


Mit dem Klick auf einen Link wird in diesem Beispiel der div-Container verändert.

Mehr zu jQuery
Das Schöne bei jQuery ist, dass Webmaster nicht gleich das Programmieren erlernen müssen. Viele Plugins können leicht installiert werden und lassen sich mit rudimentären HTML-Kenntnissen nutzen. Eine umfangreiche Auswahl an jQuery Plugins findet sich auf jQuerylist.com. Ein jQuery Tutorial hier und eine Sandbox zum Experimentieren mit jQuery im Browserfenster findet sich auf JSBin.


0 Kommentare