Elemente selektieren und ändern (wir starten mit jQuery)
Samstag, 04 Juli 2009 2 Kommentare
Jede jQuery-Operation startet mit dem Auswählen eines oder mehrerer Elemente (Knoten des DOM). Die jQuery-Synthax zum selektieren ist eine interessante Mischung aus CSS1, CSS2,teilweise CSS3, XPath und einigen benutzerdefiniert Erweiterungen. Die Details sind nicht so wichtig. Fangen wir mit ein paar Beispielen an:
<script src="jquery.js"></script>
<script type="text/javascript">
// alle Div mit der Klasse pan
$('div.pan')
// ein P-Element mit der ID beginn
$('p#beginn')
// alle Input-Elemente mit dem Namen telefon
$('input[@name=telefon]')
// alle ungeraden Tabellenzeilen (TR) in der Tabelle mit der Klasse sort
$('table.sort tr:odd')
// alle externen Links (Links, die mit http:// beginnen)
$('a[@href^="http://"]')
// alle P-Elemente die ein oder mehrere A-Tags beinhalten
$('p[a]')
</script>
Durch den Aufruf eines jQuery selectors wird ein Objekt zurückgegeben. Es stehen mit jQuery jede Menge Methoden zum Abfragen, Ändern und Erweitern des Objekts zur Verfügung.
Die Breite eines ausgewählten Elementes ändern
// mit width() die Breite eines ausgewählten Elements ändern
// Das Div mit der ID pan erhält die Breite 250px
$('div#pan').width(250);
Die CSS-Eigenschaften eines ausgewählten Elementes ändern
// Bei allen Span-Elementen wird die Zeilen-Höhe auf 180% gestellt
$('span').css('line-height', '180%');
// Alle Span erhalten die Schriftfarbe weiss
$('span').css('color', '#ffffff')
// Alle Span bekommen den Hintergrund schwarz
$('span').css('background-color', '#000000')
Es gibt noch eine andere Methode die Styles zu ändern. Verwendet wird die Schreibweise der Stylesheet-Angaben in JavaScript, die Angaben werden mit css() aufgerufen, aber diesmal in geschweiften Klammern css({}):
$('span').css({color:'#FFF', backgroundColor:'#000'});
Nun färben wir mal alle ungeraden Elemente einer Liste, insbesondere bei langen Listen erhöht dies die Lesbarkeit ungemein.
ungerade Listen-Elemente einfärben
// Alle ungeraden Listen-Elemente (dt) erhalten
eine Schriftfarbe und eine Hintergrundfarbe
$('dt:odd').css({color: '#cc0099', backgroundColor: '#ffcc99'});
Das ist natürlich auch mit anderen Listen (ul,ol) oder auch Tabellen-Zeilen möglich.
Kommen wir nun zu den externen Links. Denen verpassen wir eine neue CSS Klasse mit addClass() und ein Attribut mit attr()
Eine neue Klasse und ein neues Attribut
// eine neue CSS-Klasse (addClass)und ein target-Attribut(attr)
$('a[@href^="http://"]').addClass('externerlink').attr('target', '_new');
Die Breite eines Elementes einlesen, verdoppeln und ändern
var breite = $('div#pan').width();
var neue_breite = breite * 2;
$('div#pan').width(neue_breite);
Die Linktexte aller Links ändern mit html()
$('a').html('Klick mich!');
Die Attribut src eines Bildes einlesen und verändern
// src-Attribut des Bildes mit der ID=bild1 einlesen
var src_bild1 = $('img#bild1').attr('src');
Bisher haben wir häufig Elemente selektiert, in dem wir sie mit Klassen oder IDs in Verbindung gebracht haben. Es geht auch umgekehrt. Der folgende Ausdruck not() findet alle Elemente, die eben keine ID haben:
Elemente finden, die kein ID-Attribut haben
// Alle Span-Elemente, die kein Attribut ID haben
$('span').not('[@id]');
Der kleine Nils hat seine Eltern verloren. Kein Problem für jQuery, es gibt ja parent()
$('#nils').parent();
So erstmal genug Stuff, um damit zu experimentieren. Demnächst gehts dann ans Eingemachte. Elemnte kreieren, hinzufügen, löschen und was man mit dem DOM so alles anstellen kann.
This is a nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is another nested column
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
*Thumbs up* freu mich schon aufs eingemachte
Danke! Praktische Zusammenfassung :)