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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…