Mehr Effizienz bei weniger Aufwand

Teil 6: Workshop Javascript-Bibliothek: Einstieg in jQuery

Dieses Beispiel zeigt auch eine typische Eigenschaft von jQuery: Da die gerade verwendeten jQuery-Befehle selbst wiederum jQuery-Objekte zurückgeben, können viele dieser Befehle aneinandergehängt werden. Im Beispiel sind es drei: click(), next() und hide(). Damit der Code besser lesbar bleibt, sollten Sie diese aber - wie im Beispiel - immer in eigene Zeilen schreiben.

Effektiv mit Effekten

jQuery bietet mehrere Effekte. hide() und show() sowie toggle() zeigen Elemente direkt an oder verstecken sie. Sie können bei den Befehlen aber auch eine Geschwindigkeit angeben, dann sieht man den Aus- beziehungsweise Einblendevorgang: Zum einen wird die Größe des Elements und zum anderen seine Sichtbarkeit verändert.

$('.bsp').show('slow');

Als Geschwindigkeit geben Sie slow, normal oder fast an oder einen Wert in Millisekunden.

Daneben gibt es weitere vordefinierte Animationen: bei fadeIn() erhält ein Element zunehmend mehr Sichtbarkeit, fadeOut() blendet es durch Verringerung der Sichtbarkeit aus. slideDown() lässt das Element von oben reinrollen, das heißt, zuerst erscheint nur der obere Teil, der dann nach unten wächst. slideUp() entfernt es auf dieselbe Art. slideToggle() wechselt automatisch zwischen den beiden Zuständen.

Wem das noch nicht reicht, der kann auf animate() für benutzerdefinierte Effekte zurückgreifen.

Bei animate() übergeben Sie ein Objektliteral mit CSS-Eigenschaften für die gewünschte Formatierung am Ende der Animation. Zusätzlich legen Sie noch die Geschwindigkeit für die Animation in Millisekunden fest.

Animieren lassen sich natürlich nur Angaben numerischer Art. Nehmen wir einen Button und ein Element, das animiert werden soll:

<button id="animate">Animation
starten</button><div id="container">Voll animiert</div>

Jetzt wird das Element mit id="container" durch Klick auf den Button animiert:

$('a#animate').click(function() {
$('#container').animate({
width: '400px',
fontSize: '4em',
opacity: 0.5,
borderWidth: '20px'
}, 1500 );
});

Übrigens können Sie die Eigenschaft opacity direkt einsetzen, jQuery übernimmt es dann, dies in die für den Internet Explorer benötigten Angaben zu übersetzen.

Oben im Beispiel sehen Sie außerdem, dass bei CSS-Eigenschaften mit einem Bindestrich wie border-width der Bindestrich entfernt und dafür der zweite Bestandteil mit Großbuchstaben geschrieben werden muss.

Zusammenarbeit mit anderen Bibliotheken

Wie an den Beispielen zu erkennen ist, wird bei jQuery immer extensiv das $-Zeichen verwendet. Das Dollarzeichen kommt allerdings auch in anderen Javascript-Bibliotheken wie Scriptaculous oder Mootools zum Einsatz. Soll jQuery gemeinsam mit einer anderen Bibliothek eingesetzt werden, so schreiben Sie:

jQuery.noConflict();

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".