Tutorials • jQuery
jQuery – ein Javascript Framework mit vielen Vorzügen - Teil 1: Der „Einstieg“ - ein erstes kleines Beispiel
1996 („Web- Steinzeit“) habe ich damit begonnen erste Internetseiten zu erstellen – eine Zeit in der ich an heutige Möglichkeiten nicht einmal hab‘ zu träumen gewagt.
Knapp 15 Jahren später (o.k. ich bin ne‘ „Web-Oma“ :-)) hat sich die WWWelt sehr stark verändert. Die Kombination von (X)HTML, CSS(3) und Javascript sowie die dazugehörige Browserunterstützung bieten fast unbegrenzte Möglichkeiten in Darstellung und Funktionalität.
Eine große Erleichterung und Hilfe sind hier verschiedene Javascript- Frameworks.
Anlass für eine Artikel- Serie über das Javascript- Framework jQuery
Die Abschnitte in diesem Beitrag:
<Beispiel> <HTML Code> <CSS Code> <jQuery Code> <Download> <weitere Beispiele>
Was ist ein Javascript- Framework und welche Vorteile bringt die Nutzung?
Frameworks (Rahmen, Gerüst, Raster, grundlegende Struktur …) in Bezug auf Programmier- oder Script- Sprachen sind Bibliotheken, die grundlegende und-/oder immer wiederkehrende Aufgaben in Funktionen zusammenfassen.
Die Nutzung eines Frameworks erleichtert und beschleunigt die Entwicklung eigener Scripte und Funktionalitäten, da man auf bereits fertige Funktionen zurückgreifen kann ohne „das Rad neu erfinden“ zu müssen.
Javascript- Frameworks bieten dazu in der Regel noch eine einheitliche Funktions- Implementierung für verschiedene Browser.
Dies bietet Entwicklern und Web- Designern eine große Erleichterung und Zeitersparnis beim Test von Webseiten in verschiedenen Internet- Browsern.
Warum jQuery?
In dieser Artikel- Reihe habe ich mich für das Javascript- Framework jQuery entschieden da es neben seiner Leistungsstärke auch über eine sehr hohe Verbreitung verfügt. Dies bringt folgende Vorteile mit sich:
- Es gibt eine Vielzahl an fertigen, frei nutzbaren Plugins (z.B. Image Slider, Formular- Prüfer, Tabellen- Sortierer etc.) die direkt verwendet werden können
- Eine hohe Verbreitung sorgt auch für ein immer besser werdendes System (Bug- Report)
- Es gibt viele Informationen und Tutorials zum Thema jQuery
- jQuery ist auch für Leute ohne Programmierkenntnisse schnell und einfach zu lernen
Für den Einstieg sind dies in meinen Augen (neben Geschwindigkeit und Funktionsumfang) die 3 wichtigsten Aspekte. Dazu kommt, dass alle Javascript- Frameworks nach einem ähnlichen Prinzip funktionieren. Also, wer den Umgang mit jQuery lernt und später auf ein anderes Framework umsteigt wird sich schnell zurechtfinden.
Persönlich arbeite ich je nach Projekt und Aufgabe mit verschiedenen Frameworks (z.B. extjs für Anwendungsentwicklung und Intranet- Lösungen) jedoch bei der Erstellung von Kunden- Webseiten am häufigsten mit jQuery eben wegen der hohen Verbreitung.
Für den Anfang ein erstes kleines jQuery Beispiel
<zum HTML Code> <zum CSS Code> <zum jQuery Code> <zum Download>
Damit Sie sich eine Vorstellung davon machen können welche Möglichkeiten jQuery bietet im Folgenden ein erstes kleines Beispiel.
Der jQuery Code:
$(document).ready(function() {
$('#demo_button1').click(function() {
$('div.demo_absatz1').addClass('braun').show('slow');
});
});
DEMO - Code ausführen DEMO zurücksetzen
Hallo, ich bin ein HTML DIV mit der Klasse “demo_absatz1″ der erst nach klicken auf den DEMO Button sichtbar wird.
Klickt man auf den Demo Button, erhalte ich zuerste eine neue CSS Klasse (braun) und werde abschließend in einer langsamen Animation eingeblendet.
Nicht gesehen? Einfach auf “DEMO zurücksetzen” klicken und noch mal probieren!
Der Code im Detail
Dieses Beispiel besteht aus 3 Teilen:
- Dem HTML Code (z.B. in der Datei demo1.html)
- Dem CSS Code zur Gestaltung (in der Datei demos.css)
- Dem jQuery Code (in de Datei demos.js)
Hinweis:
Sie werden in den Beispielen den jeweils vollständigen Code vorfinden, damit Sie auch alle zusammenhänge nachvollziehen können.
Ich bin kein Verfechter davon CSS- und Javascript- Code in das Dokument zu schreiben. Lagern Sie auch in Ihren Web- Projekten den Code in separate Dateien aus.
Der HTML Code
<zum Beispiel> <zum CSS Code> <zum jQuery Code> <zum Download>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE"> <head> <title>Ein erstes jQueryBeispiel</title> <link rel='stylesheet' href='/demos.css' type='text/css' media='all' /> </head> <body> <a id="demo_button1" class="demo_button" href="#">DEMO - Code ausführen</a> <div class="demo_absatz1"> <p><strong>Hallo, ich bin ein HTML DIV mit der id "demo_absatz1" der erst nach klicken auf den DEMO Button sichtbar wird.</strong></p> <p>Klickt man auf den Demo Button, erhalte ich zuerste eine neue CSS Klasse (braun) und werde abschließend in einer langsamen Animation eingeblendet.</p> <p>Nicht gesehen? Einfach auf "DEMO zurücksetzen" klicken und noch mal probieren!</p> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type='text/javascript' src='/demos.js'></script> </body> </html>
Betrachten wir den HTML Code einmal etwas genauer:
Zeile 5: In dieser Zeile wird der ausgelagerte CSS- Code aus der Datei demos.css geladen. Je nachdem wo Ihre Dateien gespeichert sind müssen Sie die „src“ URL evtl. noch anpassen.
Innerhalb der Body- Tags (Zeile 8-14) finden Sie die HTML Tags zum unten aufgeführten Beispiel.
Zeile 8: Es beginnt mit einem „<a>“ Tag (einem Link) dem die id „demo_button1“ zugeordnet wurde. Diese id sollte eine eindeutige Bezeichnung in Ihrem HTML Dokument sein. Diese ID ist später im jQuery Code relevant um den Link eindeutig finden zu können.
Dem Link wurde weiterhin eine CSS Klasse (class) zugeordnet. In diesem Fall „demo_button“. Diese Klasse wird dann im CSS Code verwendet um das Element zu gestalten.
Zeile 10/Zeile 14: Hier finden Sie ein „<div>“ Tag (eine Box) der die CSS Klasse „demo_absatz1“ zugeordnet wurde. Diese Klasse wird im CSS Code zur Gestaltung des Elementes und im jQuery Code zur Identifizierung verwendet.
Zeile 11-13: Hier finden Sie den Text der später in der Box dargestellt wird. Er ist formatiert in 3 Absätzen (<p>). Hierbei handelt es sich um den reinen Inhalt der für den CSS- und jQuery- Code nicht von Bedeutung ist.
Zeile 16: Hier wird‘s ganz wichtig, denn hier wird erst einmal das jQuery Framework aktiviert. In diesem Beispiel habe ich mich dazu entschieden das Framework via Google Libs einzubinden. Sie können natürlich auch die aktuelle Version von jQuery auf Ihren Webserver kopieren, müssen jedoch dann die „src“ URL entsprechend anpassen.
Zeile 17: Hier wird die Javascript Datei „demos.js“, in welcher der jQuery Code steht, von meinem Webserver geladen. Je nachdem wo Ihre Daten gespeichert sind müssen Sie die „src“ URL evtl. anpassen.
Die Dateien werden erst am Ende geladen, da jQuery Aktionen erst nach dem Laden des HTML- und CSS Codes ausgeführt werden. Das Laden der Javascript- Files am Ende spart Ladezeit vor dem Aufbau des HTML- Dokumentes.
Der CSS Code:
<zum Beispiel> <zum HTML Code> <zum jQuery Code> <zum Download>
.demo_absatz1 {
display: none;
padding: 10px 20px;
border: 1px solid #ccc;
color: #000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
.braun{
color: #fff;
background-color: #847d6b;
border-top: 15px solid #212421;
}
a.demo_button {
padding: 4px 8px 4px 10px;
background-color: #c6c700;
color: #fff;
font-weight: bold;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
}
Der CSS Code unter der Lupe:
Zeile 1-10: Hier wird die Klasse „demo_absatz1“ genau definiert. Neben den Gestaltungs- Attributen finden Sie in Zeile 2 einen relevanten Eintrag: „display: none;“. Dies bedeutet das alle Elemente denen diese Klasse zugeordnet wurde am Bildschirm nicht sichtbar sind (im HTML Code schon).
Unsere Box ist also beim Laden des HTML Dokumente unsichtbar.
Zeile 11-15: Die Klasse „braun“ tauchte bisher im HTML Dokument nicht auf. Sie wird später dazu verwendet um die Box beim Einblenden anders zu gestalten.
Zeile 16-28: Hier finden Sie die Gestaltungs- Attribute für den Link „DEMO – Code ausführen“ welchem die Klasse „demo-button“ zugeordnet wurde.
Auf die einzelnen Gestaltungs- Attribute möchte ich hier erst einmal nicht weiter eingehen. CSS- Anfänger können die Attribute z.B. unter www.css4you.de nachschlagen.
Zur Erinnerung noch mal der jQuery Code
<zum Beispiel> <zum HTML Code> <zum CSS Code> <zum Download>
$(document).ready(function() {
$('#demo_button1').click(function() {
$('div.demo_absatz1').addClass('braun').show('slow');
});
});
Jetzt wird’s interessant: Der jQuery Code genauer betrachtet:
Was jedem wahrscheinlich direkt auffällt ist, das der Code relativ kurz ist – das entspricht dem jQuery Motto „Write less, do More“.
jQuery ist Javascript. Alle Funktionen des Frameworks werden beginnend mit „jQuery“ oder der Kurzform „$“ aufgerufen.
Zeile 1 und 5: „$(document).ready“ bedeutet „Wenn das Dokument geladen wurde (alle HTML Elemente) führe die folgende Funktion aus …“
In diese Funktion sollte jeder jQuery Code eingeschlossen werden der sich auf im HTML Dokument definierte Elemente bezieht.
Zeile 2 und 4: „Wenn das HTML Elemente mit der ID „demo_button1“ angeklickt wird, führe folgende Funktion aus …“
„#demo_button1“ ist ein Selektor – hiervon gibt es in jQuery jede Menge auf die ich in weiteren Teilen dieser Beitrags- Serie noch genauer eingehen werde.
# steht für die Kennzeichnung einer ID
Über diesen Selektor können Sie ganz eindeutig ein Element Ihres HTML Codes identifizieren.
Zeile 3: „… Alle Div Boxen mit der Klasse „demo_absatz1“ erhalten eine weitere CSS Klasse mit der Bezeichnung „braun“ und werden langsam eingeblendet.“
In dieser Zeile wird ein weiterer Selektor verwendet „div.demo_absatz1“. Im Unterschied zum vorherigen ist dieser nicht eindeutig, da in unserem HTML Dokument auch mehreren Div Boxen die Klasse „demo_absatz1“ zugeordnet werden sein könnte (ist zwar nicht so, aber es könnte sein :-)).
In diesem Fall gilt die Aktion für alle diese Elemente.
„addClass“ weist den gefunden Elementen eine weitere Klasse mit dem Namen „braun“ zu (Siehe CSS Code Zeile 11-15) und verändert die Farbe der Box.
Das war’s …
Ein paar minimale Modifikationen …
… und schon ein anderer Effekt!
Statt “show” verwenden wir “slideIn”
$(document).ready(function() {
$('#demo_button2').click(function() {
$('div.demo_absatz2').addClass('braun').slideDown('slow');
});
});
DEMO - Code ausführen DEMO zurücksetzen
Hallo, ich bin ein HTML DIV mit der Klasse “demo_absatz2″ der erst nach klicken auf den DEMO Button sichtbar wird.
Klickt man auf den Demo Button, erhalte ich zuerste eine neue CSS Klasse (braun) und werde abschließend in einer langsamen Animation eingeblendet.
Nicht gesehen? Einfach auf “DEMO zurücksetzen” klicken und noch mal probieren!
Statt “show” verweden wir “fadeIn”
$(document).ready(function() {
$('#demo_button3').click(function() {
$('div.demo_absatz3').addClass('braun').fadeIn('slow');
});
});
DEMO - Code ausführen DEMO zurücksetzen
Hallo, ich bin ein HTML DIV mit der Klasse “demo_absatz3″ der erst nach klicken auf den DEMO Button sichtbar wird.
Klickt man auf den Demo Button, erhalte ich zuerste eine neue CSS Klasse (braun) und werde abschließend in einer langsamen Animation eingeblendet.
Nicht gesehen? Einfach auf “DEMO zurücksetzen” klicken und noch mal probieren!
“Drei auf einen Streich”
In Diesem Beispiel gibt es 3 versteckte Abschnitte die alle die selbe Klasse “demo_absatz4″ haben.
Bei einem klick auf “DEMO- Code ausführen” werden aus diesem Grund alle 3 geöffent da im Selektor nach der Klasse gesucht wird.
$(document).ready(function() {
$('#demo_button4').click(function() {
$('div.demo_absatz4').addClass('braun').fadeIn('slow');
});
});
DEMO - Code ausführen DEMO zurücksetzen
Hallo, ich bin der 1. HTML DIV mit der Klasse “demo_absatz4″ der erst nach klicken auf den DEMO Button sichtbar wird.
Klickt man auf den Demo Button, erhalte ich zuerste eine neue CSS Klasse (braun) und werde abschließend in einer langsamen Animation eingeblendet.
Nicht gesehen? Einfach auf “DEMO zurücksetzen” klicken und noch mal probieren!
Ja wo ist denn der 2. versteckte Absatz????
Hallo, ich bin der 2. HTML DIV mit der Klasse “demo_absatz4″ der erst nach klicken auf den DEMO Button sichtbar wird.
Ja wo ist denn der 3. versteckte Absatz????
Hallo, ich bin der 3. HTML DIV mit der Klasse “demo_absatz4″ der erst nach klicken auf den DEMO Button sichtbar wird.
Nicht gesehen? Einfach auf “DEMO zurücksetzen” klicken und noch mal probieren!
Fazit:
<zum Beispiel> <zum HTML Code> <zum CSS Code> <zum jQuery Code> <zum Download>
jQuery, CSS und HTML sind eng miteinander verknüpft und …
…. das ist alles gar nicht so schwer 
Ich finde mit ein paar guten Ideen kann man schon mit diesem einfachen jQuery Beispiel einiges Anfangen und das sind wirkliche Vorzüge die die WWWelt verändern.
Download:
Sie können den Code aus den obigen Code- Abschnitten direkt kopiere oder ein Zip- Archiv mit allen 3 Dateien (.html, .css und .js) herunterladen.
hpv24_jquery_beispiel1 (211)
Probieren Sie es doch einfach einmal aus!
1 Stimme/n, durchschnittliche Bewertung: 6,00 Sterne von max. 6 möglichen Sternen
Loading ...
Mein Name ist Sabine Kunkel-Dücking und ich arbeite seit 2001 als freiberufliche Internet- Dienstleisterin unter dem Projektnamen ArcheNet.
