Universitätsrechenzentrum
jQuery

Manipulation von Elementen

Im folgenden Kapitel werden wir uns mit der Manipulation von Elementeigenschaften und -attributen beschäftigen.
Voraussetzung dafür ist die Auswahl von Elementen wie im vorherigen Kapitel beschrieben.

Attribute

In der HTML-Beschreibung eines Elements werden Attribute angegeben, welche das Aussehen des Elements beschreiben. Der Browser übersetzt die HTML-Beschreibung in ein DOM-Element. 

<img id="logo_1" src="/bilder/logo.jpg" alt="Logo" title="Firmenlogo" class="ohne_Rand" />

Im Beispiel steht img für den TagName und id, src, alt, title und class beschreiben die Elementattribute.

each(iterator)

Mit dem each() -Kommando wird die elementweise Bearbeitung einer Auswahlliste (array) unterstützt. Der iterator entspricht dem Index des Arrays.
Beispiel: Gibt für alle Bilder deren Index und ID-Attribut aus. 

$("img").each(function(index) {
  $("#output").append("Bild Nr: " + index + " mit der ID: " + this.id + "<br/>");
});

Die Variable this stellt innerhalb einer Funktion eine Referenz auf das aktuelle Objekt (DOM-Element) zur Verfügung, welches mit der Funktion assoziiert ist.

attr(name, [value])

Liefert das Attribut, dessen Name als Argument übergeben wird, oder setzt das Attribut bei Übergabe eines Name-Wert-Paares.
Beispiel: Setze das title -Attribut aller Elemente im Dokument durch eine String, welcher den Index und die ID enthält. 

$("*").attr("title", function(index) {
  return "Ich bin Element " + index + " und meine ID ist " + (this.id ? this.id : "unbekannt");
});

Die Übergaben von Name-Wert-Paaren erfolgt in der Notation: { attribut: 'value', attribut: 'value', ... }

weitere Beispiele: 

$("a[href^='http://']").attr("target", "_blank");


$("img#scholle").click(function() {
  $(this).attr("src", "image/hecht.jpg");
});

prop(name, [value])

Liefert den Wert der übergebenen Eigenschaft oder setzt deren Wert.
Eigenschaften wie selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked und defaultSelected werden mit der Methode prop() gelesen oder manipuliert. 

$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

removeAttr(name)

Löscht das Attribut mit dem als Argument übergebenem Namen.

Das Löschen von Attributen löscht i.A. nicht das Attribut im DOM-Element. Meist wird nur der Wert geändert/zurückgesetzt.

Klassen und CSS-Eigenschaften

Klassen bieten eine einfache Möglichkeit, Elemente zu selektieren.
Die Darstellung von Elementen kann über die Eigenschaften von CSS-Klassen modifiziert werden. jQuery enthält außerdem Funktionen zur Manipulation von CSS-Eigenschaften an DOM-Elementen. (vergleiche attr() -Funktion.)

Ein Element kann mehreren Klassen angehören.

addClass(name) 

$("p").addClass("red_border blue_text yellow_bg");

Mehrere Klassen werden durch Leerzeichen separiert als Argument übergeben.

removeClass(name) 

$("p").removeClass("yellow_bg");

toggleClass(name)

Fügt die als Argument übergebene Klasse den Elementen hinzu, welche dieser Klasse nicht angehören und entfernt die Elemente welche der Elementauswahl und der übergebenen Klasse angehören.
Beispiel: Die erste Zeile erzeugt eine "gestreifte" Tabelle. 

$("table tr:nth-child(odd)").addClass("yellow_bg");
$("table").click(function() {
  $("table tr").toggleClass("yellow_bg");
});

css(name, [value])

Liefert die CSS-Eigenschaft für das übergebene Attribut oder setzte eine die CSS-Eigenschaft für ein Name-Wert-Paar. (vergleiche attr() -Funktion) 

$("#output").html("Der Absatz hatte die Textfarbe: " + $("p").css("color"));
$("p").css("color", "#00ff00");

width([value]) und height([value])

Liefert oder setzt die Breite und Höhe der ausgewählten Elemente.
Beispiel: Absätze <p> werden rot umrandet, deren Breite ausgegeben und bei jedem Klick in den Absatz die Höhe und Breite verändert. 

$("p").addClass("red_border");
$("#output").html("Der Absatz hatte eine Breite von " + $("p").width() + " px");
$("p").click(function() {
  $(this).width($(this).width()-50 +"px");
  $(this).height($(this).height()+10 +"px");
});

hasClass(name)

Liefert einen Wahrheitswert (true=/=false) über die Zugehörigkeit eines Elements zu einer als Attribut übergebenen Klasse. 

if ($("p").hasClass("red_border")) {
  $("#output").html("Der Absatz gehört der Klasse red_border an");
}

Elementinhalt

Funktionen zur Manipulation von Elementinhalten.

html([content])

Liefert den HTML-Inhalt des ersten ausgewählten Elements der Elementauswahl oder setzt den HTML-Inhalt aller Element der Elementauswahl.
Interessant für DEBUG-Ausgaben im Zusammanhang mit <span> und <div> -Elementen .
Beispiel: Ersetze für alle Links <a> den Linktext durch einen String mit dem URL (href -Attribut). 

$("a").html(function() {
  return "ein Link auf: " + $(this).attr("href");
});

Vergleiche die Ausgaben folgender Statements: 

$("#output").html($("td").html());


$("td").each(function() {
  $("#output").append($(this).html()+"<br/>");
});

text([content])

Liefert oder ersetzt den Textinhalt aller zur Elementauswahl gehörenden Elemente (inklusiver der untergeordneten Elemente). 

$("#output").html("Inhalt der Anstriche: " + $("ul").text());

Der Unterschied zwischen der html() und der text() -Funktion liegt in der Behandlung von HTML-Elementen (<Elemente> in spitzen Klammern). Die text() -Funktion liefert den Inhalt ohne HTML-Formatierung.

append(content)

Füge den Inhalt am Ende des ausgewählten Elementes oder der ausgewählten Elemente ein. Der Inhalt kann auch ein neues Element sein (Einfügen erfolgt innerhalb, als letztes Kindelement).
Beispiel: Hänge an alle Absätze <p> ein zu erstellendes Element <b>Absatzende</b> . 

$("p").append("<b>Absatzende</b>");

appendTo(target)

Füge ausgewähltes oder zu erstellendes Element am Ende des als Argument übergebenen Elementes oder der übergebenen Elemente ein (innerhalb, als letztes Kindelement).
Beispiel: Hänge an alle untergeordneten Anstriche das Bild mit der ID scholle <img#scholle>. 

$("img#scholle").appendTo("li li");

Wird ein vorhandenes Element an ein Element angehangen erfolgt eine Verschiebung im DOM-Baum. Besteht das Ziel aus mehreren Elementen werden weitere Kopien der Quelle angelegt.
Beachte: Element-IDs evtl. nicht mehr eindeutig, Eventhandler, ...

prepend(content) und prependTo(target)

Funktionen arbeiten analog zu append(), appendTo() aber fügen die Elemente am Anfang als erstes Kindelement ein.

after(content) und insertAfter(target)

Funktionen fügen ausgewähltes oder zu erstellendes DOM-Element nach dem angegeben Ziel ein. 

$("li:last").after("<li>weiterer Anstrich</li>");

before(content) und insertBefore(target)

Funktionen arbeiten analog zu after(), insertAfter() aber fügen die Elemente vor dem angegeben Ziel ein.

wrap(content)

Die Funktion wrap() umschließt die ausgewählten Zielelemente mit dem als Argument angegebenem oder zu erstellendem Element.
Beispiel: Umschliesse alle Links <a> mit einem <span> -Element der Klasse yellow_bg und dem Text "Link: ". 

$("a").wrap('<span class="yellow_bg">Link: </span>');

wrapInner(content)

Die Funktion wrapInner() umschließt den Textinhalt des ausgewählten Zielelemente mit dem als Argument angegebenem oder zu erstellendem Element.

remove()

Entfernt ein Element oder ein Set ausgewählter Elemente aus dem DOM-Baum. Als Rückgabewert wird ein jQuery-Objekt auf das oder die Elemente geliefert.
Beispiel: Löscht alle Absätze <p> und fügt diese als Kindelement der letzten Tabellenzelle <td> wieder ein. 

$("p").remove().appendTo("td:last");

empty()

Entfernt den Textinhalt des ausgewählten Elements oder der ausgewählten Elemente. Das Element verbleibt im DOM-Baum.

clone([boolean])

Erzeugt eine Kopie des ausgewählten Elements oder der ausgewählten Elemente. Als Argument kann ein Wahrheitswert (true, false) angegeben werden um auf der Quelle vorhandene Eventhandler zu kopieren.
Beispiel: Erzeuge eine Kopie des ersten Bildes <img> und füge die Kopie als Kind des Elementes mit der ID output ein. 

$("img:first").clone().appendTo("#output")

Formularelemente

val([value])

Liefert oder setzt den Wert (value -Eigenschaft) von Formularfeldern.
Beispiel: Setze einen Wert für das Formularfeld mit der ID textfeld. Gibt den Wert des Formularfeldes mit der ID textfeld im Element mit der ID output aus. 

$("input#textfeld").val("Ein Wert");
$("#output").text("Textfeld: " + $("input#textfeld").val());

weitere Beispiele:

Der Rückgabewert von Multi-Selectboxen ist ein Array. Zeige jeden ausgewählten Wert in einer Zeile an. 

var select = $("#selectbox").val();
for (i=0; i<select.length; i++){
   $("#output").append(select[i] + "<br/>");
}

Suche alle Checkboxen und Select-Felder und setze für die als Array übergebenen Werte die Attribute checked bzw. selected. 

$("input:checkbox,select").val(['Kescher','Angelschnur und Haken','Drilling']);

DOM-Element und jQuery-Objekt

this Referenz auf das aktuelle Objekt (DOM-Element) innerhalb einer Funktion.
z.B. Referenz auf ein Bild img, Zugriff auf Attribute: img.id, img.src, img.alt
$(this) Erzeugt ein jQuery-Objekt aus dem aktuellen DOM-Element. Damit sind jQuery-Methoden verfügbar.
z.B. $(this).addClass("myclass")

DOM-Element und jQuery-Objekt lassen sich mittels der JavaScript-Funktion console.log() in Verbindung mit der FireBug-Konsole analysieren.
(siehe auch https://getfirebug.com/logging/) 

$("a:first").each(function() {
  console.log(this);
  console.log($(this));
});

Methoden und Funktionen

$("p:first").html() Liefert den HTML-Inhalt (innerHTML-Attribut) des ausgewählten DOM-Elements
(im Beispiel der erste Absatz)
$("p:first").html("Erster Absatz") Setzt den HTML-Inhalt des ausgewählten DOM-Elements mit dem übergebenen Inhalt
$("p").html(function(i, v) {
  return("<b>Absatz: " + i + "</b> --- " + v);
}); 		Funktion iteriert über alle ausgewählten DOM-Elemente (im Beispiel alle Absätze).
Innerhalb der Funktion sind die Argumente Index i (beginnend mit 0)
und der Rückgabewert der Methode .html() als Value v (im Beispiel der alte HTML-Inhalt) verfügbar.
Der Rückgabewert der Funktion wird als neuer HTML-Inhalt an das aktuelle DOM-Element übergeben.

TUCaktuell