Ein Artikel von Paul Lunow, erschienen 2008 auf Interaktionsdesigner.de.

Zuletzt überarbeitet am von : .

Denkst Du darüber nach zu gründen? Eine Familie oder ein Startup oder beides? In der zweiten Staffel meines Podcasts spreche ich mit tollen Menschen genau darüber. Lass Dich inspirieren und abonniere meinen Podcast: Auf Apple Podcast, Spotify und auf www.gründerväter.net.

Wie gesagt, ich erhebe weder den Anspruch hier etwas erklären zu wollen, noch auf Vollständigkeit und Sinn zu pochen. Es hat mich einfach gefreut was alles geht und Notizzettel sind schnell im Notizzettelmonster (Schreibtisch) verloren.

$("element").filter(function() { ... })

Die Funktion Filter benutzte ich immer mit einer Expression, z.B. :empty. Es ist aber auch Möglich eine Funktion zu übergeben, welche true zurück geben muss damit das Element im Stack bleibt.

$("iframe").contents()

Liefert alle Elemente eines iFrames. DER Weg um auf jene zuzugreifen. Herrlich!

parent() vs parents()

Die erste Funktion ist hinlänglich bekannt. Die Zweite liefert nicht nur das Elternelement, sondern alle darüber liegenden Knoten.

$("div").css("width", function({ return $(this).width() + 200 + "px"; }));

Die Funktion css() ist bekannt und oft genug eingesetzt. Aber als zweiten Wert kann man auch eine Funktion übergeben deren Rückgabewert als neue Eigenschaft gesetzt wird! Im obigen Beispiel wird also jeder Div Container um 200 Pixel verbreitert, abhängig von der vorherigen Breite. Das funktioniert auch mit der Funktion attr().

$("p:first").is(".abstract") = $("p:first").hasClass("abstract")

Beide Funktionen haben den selben Nutzen und liefern true zurück, sofern der erste Absatz mit der Klasse “abstract” versehen ist. Intern wird der Zweite zum ersten umgeformt, es ist also geschmackssache welcher eingesetzt wird.

$("div").after("<p>Neuer Div als Absatz</p>").remove();

Diese schöne Zeile ersetzt jeden DIV-Container auf der Seite durch den übergebenen Absatz. Da die Funktion after() den Elementstack nicht verändert kann er anschließend mit remove() einfach entfernt werden.

$("[name=radioGroup]:checked]").val();

Liefert den Inhalt der angeklickten Radiobox einer Gruppe von Radioboxen. Funktioniert so allerdings nur mit Radioboxen. Das waren die ersten zwei Kapitel - Grundlagen - ich bin voller Zuversicht noch viele weitere interessante Dinge zu lernen. Wer weitere tolle Tipps hat ist in den Kommentaren herzlich Willkommen!