Startseite arrow Tipps & Tricks arrow jQuery: Elemente verändern

jQuery: Elemente verändern

(31 Bewertungen)
Donnerstag, 29. Januar 2009
Geschrieben von Armin Vieweg
Im letzten Artikel über die AJAX-Library jQuery bin ich allgemein auf die Bibliothek eingegangen. Nun möchte ich etwas näher auf die Funktionen gehen, die Elemente verändern können.

Hat man jQuery in sein Dokument eingebunden (wie das geht steht hier) stehen einem viele Funktionen zur Verfügung um jede Menge zu machen. Dieser Artikel zeigt die fundamentalsten Funktionen um vorhandene Elemente zu verändern.



(CSS-)Klassen hinzufügen und entfernen

Die Befehle addClass und removeClass fügen dem vorher definierten Element(en) eine neue Klasse zu oder entfernen sie. Mit dem Befehl hasClass kann man auch noch überprüfen ob das Objekt nicht vielleicht schon eine Klasse besitzt. Ein sehr praktisches Beispiel wäre das hier:

<script type="text/javascript">
$(document).ready(function(){
    $("a.selectable").click(function(){
      if( !$(this).hasClass("selected") ) {
        $(this).addClass("selected");
      }
      else {
        $(this).removeClass("selected");
      }
    });
});
</script>


Das Event wirkt sich auf alle Links mit der Klasse "selectable" aus, auf die geklickt wurde. Es wird geschaut ob das aktuelle Element bereits die Klasse "selected" hat. Wenn ja wird sie ihm mit removeClass genommen, wenn nicht mit addClass gegeben. So könnte man einen Button umsetzen den man anklicken kann und der es dann auch bleibt, bis man erneut darauf drückt.

Das Schöne ist, dass die Klassen die dort hinzugefügt wurden in einem CSS vorher definiert werden können. Wir können also sagen, normale Links sind schwarz:

a { color:#000; }


Links die angeklickt werden können sind grün:

a.selectable { color:#0F0; }


Links die angeklickt wurden und somit aktiv sind sollen rot sein und einen Rahmen haben:

a.selected { color:#F00; border:1px solid #F00; }



Ein Objekt kann im übrigen mehrere Klassen besitzen. Wurde in diesem Beispiel ein Link angeklickt das vorher schon die Klasse selectable hatte, hat es nach dem Klick nun zusätzlich auch noch die Klasse selected.



CSS mit jQuery ändern und auslesen
Eben wurden nur Klassen geändert. Mit jQuery können wir aber auch direkt Formatierungen auf dem Element vornehmen. Das entspricht im Prinzip der Verwendung von der Style-Eigenschaft.

$("a").css("color", "#FF0066");


Hier werden alle Links mit der Farbe Magenta versehen.

Diesen css-Befehl kann man für alle CSS-Eigenschaften verwenden, die existieren.
Doch nicht nur Werte setzen, auch Werte auslesen ist damit möglich.

if ( $("div").css("display") == "none" ) {
  alert("Dieses DIV ist unsichtbar");
}


Die Alert-Box wird nun so oft erscheinen, wie es DIVs gibt, die "display:none;" haben.


Attribute mit jQuery ändern und auslesen
Funktioniert ganz genauso wie der css-Befehl nur das hier keine Styles ausgelesen oder verändert werden, sondern Attribute der Elemente. Der Befehl dazu heißt attr.

if ( $("a").attr("target") == "_blank" ) {
  alert("Bei diesem Link wird ein neues Fenster geöffnet");
}



Sowohl bei css als auch bei attr können gleichzeitig mehrere Werte verändert werden. Dazu wird einfach ein Array verwendet:

$("a").css({
  'background-color' : '#F00',
  'font-weight' : 'bold'
});

$("a").attr({
  'target' : '_self',
  'href' : 'http://www.professorweb.de'
});


Alle Links werden rot, fett, öffnen kein neues Fenster mehr und verlinken auf Professor Web. Cool :)

Doch diese Notation ist aus Performance-Sicht nicht so optimal, da JavaScript nun zwei mal durch alle Elemente gehen muss um zu schauen ob es sich dabei um einen Link handelt. Besser wäre folgendes:

$("a").css({
  'background-color' : '#F00',
  'font-weight' : 'bold'
}).attr({
  'target' : '_self',
  'href' : 'http://www.professorweb.de'
});


Es wird einmal nach allen Links gesucht, dann die CSS-Styles verändert und anschließend die Attribute. Und alles in einem Schritt.


text, html und val
Bis jetzt haben wir Attribute und Styles ausgelesen und verändert. Ein Element besteht meistens jedoch noch aus dem was zwischen dem öffnenden und schließenden Tag steht. Dies kann ausgelesen werden mit text oder html.

alert( $("#content").text() );
alert( $("#content").html() );


Hier werden zwei Alert-Boxen erzeugt. Die erste zeigt den Inhalt vom Element das die ID "content" hat, das zweite den HTML-Quellcode. Beim HTML-Quellcode muss man jedoch etwas aufpassen. Es wird nicht angezeigt, was man ursprünglich in seiner HTML-Datei niedergeschrieben hat, sondern das was der Browser daraus interpretiert (DOM eben). Der Internet Explorer interpretiert teilweise ziemlichen Müll. Also nicht wundern, wenn dort Dinge auftauchen die keinen Sinn machen.

Der Befehl val liest die Values von Elementen aus. Klassische Beispiele wären hier Input-Boxen in die etwas eingegeben wurde.

$("input#abschicken").click(function(){
  var url = "http://www.professorweb.de/datei.php";
  url = url + "?";

  $("input[type='text']").each(function(){
    url = url + $(this).attr("name") + "=" + $(this).val() + "&";
  });

  window.location.href = url;
});


Bei Klick auf den Button mit der id "abschicken" wird aus allen Input-Feldern die als Attribut den Typen "input" haben, der Name und der Value ausgelesen und so in eine URL verpackt, dass man sie als GET-Parameter übertragen kann. Die Variable url sieht dann z.B. so aus:

http://www.professorweb.de/datei.php?name=Armin&beruf=Webdesigner&Land=Deutschland





Link

jQuery: Erste Schritte





  Kommentare (1)
 1 Geschrieben von: Michael H., am 23.04.2012 um 13:45
Sehr gut beschrieben. Damit können Anfänger eine Menge anfangen.
Letzte Aktualisierung ( Freitag, 30. Januar 2009 )
 
< Zurück   Weiter >




Professor Web - Webdesign Blog - RSS-Feed

Professor Web Blogroll

Alternativer Webdesign-Blog
www.daswebdesignblog.de

Blog für Dies und Das
www.moes-blog.de