Drei jQuery-Schnipsel, die jeder braucht

In meinen Projekten setzte ich für dynamische Elemente sehr gerne die jQuery-API ein, denn sie ist relativ einfach in Seiten einzubinden und bietet Anfängern schnelle Erfolge und Fortgeschrittenen die Möglichkeit, die volle Komplexität und Flexibilität zu genießen. Natürlich werden für viele Arbeiten immer wieder ähnlilche Abfragen benötigt – drei davon stelle ich im Folgenden kurz vor:

1. Klassentausch

Ein Klassiker unter den Methoden: Im Falle einer bestimmten Aktion, etwa einem onclick-Event, soll die Klasse eines Elements getauscht werden. Dies geschieht mittels der toggleClass(string)-Methode.

Beispiel:

Es wurde eine CSS-Klasse .schwarz definiert, in der die Vordergrundfarbe auf weiß und die Hintergrundfarbe auf schwarz eingestellt wurde.

<span id="tausch">
     <a href="javascript:void(0);" onclick="updateMe()">Klassentausch!</a>
</span>
<script>
function updateMe() {
     $('#tausch').toggleClass('schwarz');
}
</script>

Klickt der Nutzer nun auf den Link, wird die Funktion aufgerufen und in dem span-Objekt die Stylesheet-Klasse „schwarz“ ergänzt. Wird erneut der Link geklickt, wird die Klasse wieder entfernt.

2. Checkboxen auswerten

Klassische Texteingaben in Formularen lassen sich per jQUery einfach mit der val()-Methode auslesen. Wie ist das aber bei Checkboxen? Auch hier lässt sich der Status einfach abfragen, mittels attr().

Beispiel:

<input type="checkbox" id="checkbox" name="checkbox" />

Je nachdem, welchen Status die Checkbox hat, soll etwas anderes geschehen. Entsprechend kann der Status in einer if-Abfrage geprüft werden:

if( $('#checkbox').attr('checked'))
     // tu etwas
else
     // tu etwas anderes

3. Inhalte auslesen und dynamisch füllen

Die Methoden text() ist sehr praktisch um den Inhalt von Elementen auszulesen. Wichtig ist, dass Tag-Auszeichnungen ignoriert werden und nur der reine textuelle Inhalt als Ergebnis erscheint. Zum Auslesen von Auszeichnungen sollte besser die Methode html() verwendet werden.

Beispiel:

<div class="container">Hier steht ein Beispiel.</div>

Der Text innerhalb des Containers kann nun über $('.container').text() ausgelesen werden.

Die Methode kann aber auch umgekehrt einen String in einen Container übergeben und darstellen. So wird $('.container').text('Ein anderer Beispieltext'); den Inhalt des Containers mit dem neuen String überschreiben.

 

Schwerpunkt: , ,

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.