20 nützliche jQuery-Funktionen

2013-12-06 13:50 (Kommentare: 0)

jquery Logo

Die JavaScript Bibliothek jQuery ist das Mittel für magische animierte Webseiten. Kaum eine Herausforderung wird mit dieser mächtigen Webtechnologie nicht gelöst. Wir stellen Lösungen vor, die jeder Entwickler kennen sollte, um Webseiten zu entwickeln, die beeindrucken, die funktional sind und vor allem Spaß machen.

.CSS()

Mit jQuerys .css() werden Stylesheets dynamisch manipuliert. Eigenschaften wie font-size, color und background-color lassen sich on-the-fly ändern – ganz ohne Reload. Mit den Codezeilen


$('div#' + id).css({
	'background-color' : ' black',
	'color' : 'white'
});

und


$('div#' + id).css({
	'background-color' : 'white',
	'color' : 'black'
});

werden Vordergrund- und Hintergrundfarben getoggelt. Doch das geht auch noch komfortabler mit Klassen: mit .addClass() und .removeClass().

toggleClass(), .addClass() und .removeClass()

Das Erscheinungsbild von Elementen kann komfortabel mit den Funktionen .addClass() und .removeClass() beeinflusst werden. Die Funktion .addClass() weist einem Objekt eine Klasse zu. Soll dabei eine Klasse gegen eine andere ausgetauscht werden, muss dies vorab mittels .removeClass() erfolgen. Via toggleClass() kann einfach zwischen Klassen hin- und hergeschaltet werden.

.animate()

Für Klassiker wie animierten Text, der bei MouseOver-Event die Größe ändert, oder sich auffaltende Bereiche ist die jQuery-Funktion .animate() erste Wahl. Diese Funktion erlaubt es mit einfachen Mitteln, schicke Animationen in eine Website einzubauen.

Hier ist ein Beispiel, wie ein div mit wenigen Codezeilen mittels Manipulation der CSS-Eigenschaften aufgefaltet wird. Anstelle der Anpassung von width und height sind auch Änderungen von Font-size möglich.
Ein div wird so bis zur Größe 600 x 300 Pixel aufgefaltet:


$('#' + id).animate({
    width: 600,
    height: 300
}, 1000);

Das Zusammenklappen auf 600 x 100 Pixel erfolgt mittels:


$('#' + id).animate({
    width: 600,
    height: 300
}, 1000);

Weitere Beispiele für Animate sind unter http://api.jquery.com/animate/ zu finden.

Darüber hinaus ist das Toggeln mit den Funktionen .slideToggle() und .fadeToggle() möglich.

.slideToggle() und .fadeToggle()

Elemente werden mit .slideToggle() und .fadeToggle() abwechselnd effektvoll versteckt oder eingeblendet. Auffaltende Menüs oder Textblöcke lassen sich so leicht realisieren. Die Funktion slideToggle lässt die Elemente rein- und rausgleiten. Bei fadeToggle werden die Zielelemente hingegen ein- bzw. ausgeblendet. Der Default-Wert für die Geschwindigkeit ist 400. Alternative Werte sind per Angabe der Millisekunden möglich. Zudem wird die Zeit mit dem String 'fast' auf 200 und mit 'slow' auf 600 gesetzt.

Beispielcode für slideToggle mit Callback-Funktion:


$( "#starter" ).click(function() {
  $( "#target" ).slideToggle( "slow", function() {
    // Aktion
  });
});

.show() und .hide()

Die Basis-Funktionen in der Kategorie der JavaScript-Effekte lassen Elemente erscheinen oder verstecken diese. Mit .show() werden Elemente sichtbar, mit .hide() lassen sich Elemente verstecken.

Der einfachste Weg, die Funktionen zu nutzen ist


$( ".target" ).show();

bzw.


$( ".target" ).show();

.focus()

Der Event Handler .focus() wird an ein Element gebunden. Erhält dieses dann den Fokus, wird ein Event ausgelöst.

Das folgene Code-Snippets benötigt nur wenige Zeilen zum Funktionieren.


$( "#target" ).focus(function() {
  alert( "Hallo Welt" );
});

Doch viele weitere Lösungen sind mit dem fokus-Event möglich. Ein Eingabefeld wird mittels fokus-Funktion beim Startup aktiviert:


$( document ).ready(function() {
  $( "#inputbox" ).focus();
});

.on() und .off() und .bind

Ab jQuery Version 1.7 werden Events mit den Funktionen .on() und .off() an Elemente gebunden. Davor ist .bind() die Funktion, um ein Event an ein Element zu hängen. Es ist mit beiden Lösungen möglich, auch mehrere Events mit ein und demselben Element zu koppeln.

Beispielcode, der Mousclick-Events an die id foo bindet:


$( "#foo" ).bind( "click", function() {
  //Aktion
});

mit On sieht der Code so aus:


$( "#foo" ).on( "click", function() {
  //Aktion
});

.load()

Mit .load() lassen sich einfach HTML-Daten vom Server nachladen. Ein Einzeiler übernimmt dabei den Löwenanteil der Arbeit:


$( "#result" ).load( "ajax/test.html" );

.ready()

Die Funktion .ready() wird ausgeführt, nachdem der DOM vollständig geladen wurde. Doch Obacht, sie ist mit body onload="" inkompatibel.

.children()

Diese Funktion hilft, mit wenig Aufwand alle Kindelemente eines Elements zu finden. Dabei ist optional ein Filtern möglich. Eine ideale Lösung für interaktive Listen und Bäume. Beispiele liefert die API unter http://api.jquery.com/children/

.change()

Eine weitere Funktion für Website-Klassiker. Mittels Change-Event wird mit dieser Funktion das Erscheinungsbild der Website angepasst. Wird beispielsweise an ein Dropdown-Menü das Change-Event gekoppelt, kann die Darstellung interaktiv ohne Laden einer Website angepasst werden. Formulare mit contextabhängigen Input-Elementen sind ein gutes Anwendungsbeispiel für diese praktische Funktion.

.before() und .after()

Elemente vor bzw. hinter einem Element einzufügen wird durch die Funktionen .before() und .after() zum Kinderspiel. Dabei lassen sich Klassen, Elemente, Arrays oder jQuery Objekte nutzen.

Zurück

 
domainssaubillig © 2007-2024 Alle Rechte vorbehalten. | Support | AGB | Datenschutzerklärung | Impressum