Sie sind hier: Startseite -> Javascript-Grundlagen -> jQuery -> Elemente selektieren

jQuery: Elemente selektieren

Mit $() Elemente selektieren

Das "Hallo Welt"-Beispiel hat auf einfache Weise gezeigt, wie mit wenigen Zeilen Code ein Link manipuliert werden kann. Was man mit dem Link machen kann, kann man auch mit den unterschiedlichsten Befehlen durchführen, beispielsweise mit CSS-Klassen.

Grundlage ist dabei die sogenannte Selektierung, also die Auswahl, was manipuliert werden soll. Vorausetzung, um mit jQuery arbeiten zu können, ist dabei natürlich auch, dass man sich in HTML zurechtfindet und optimalerweise auch, dass man CSS beherrscht. Denn jQuery erfindet das Rad nicht neu, sondern erweitert bestehende Möglichkeiten auf dynamische Weise.

Im "Hallo Welt"-Beispiel wurde durch den Befehl

$("a").click(function(){

der Ausdruck "Hallo Welt" angeschlossen, der als Alert-Meldungsbox dargestellt wird, wenn man tatsächlich auf den Link geklickt hat. Was man dabei wissen muss ist, dass mit $() verschiedenste Elemente ausgewählt werden können und dass man sich überlegen muss, dass das für alle gleichartigen gilt.

Hätte man zum Beispiel fünf Links beim Beispiel verwendet, dann wäre bei jedem Klick auf jeden der fünf Links das gleiche Popup hervorgerufen worden. Das bedeutet, dass auf einer großen Seite mit vielen Elemente durchaus Fehler auftreten können, wenn man eine generelle Zuweisung durchführt. Praktisch kann man das leicht testen: einfach Hallo Welt aufrufen und dann auf einen der Navigationspunkte klicken - auch dann tritt "Hallo Welt" auf, denn die Navigation besteht ja auch aus Links ;-)

Zurück zu Hallo Welt: statt

$("a").click(function(){

hätte man auch

$("a").mouseover(function(){

schreiben können. Erraten? Richtig! beim Drüberfahren über den Link wäre das Popup mit der Meldung entstanden. Das ist aber nicht alles, was man mit dem Selektieren anstellen kann, sondern nur die Basis, um zu verstehen, was jQuery anzubieten hat.

Neben dem Ansprechen von HTML-Elemente wie $("a") oder $("div") kann man auch CSS-Strukturen nützen wie $("title") oder $("links") um IDs und Klassen, die man via CSS definiert hat, zu manipulieren. Diese Themen werden auf den Folgeseiten beschrieben.

Übersicht der Unterseiten

CSS-ID

Informationen über die Möglichkeit, mit jQuery CSS-IDs anzusprechen und zu verändern, beispielsweise durch geändertes Layout.

CSS-Klassen

Informationen über die Möglichkeit, mit jQuery CSS-Klassen anzusprechen und zu verändern, beispielsweise durch geändertes Layout.

Produktsuche

Was brauchen Sie?

Ein Vorteil von Amazon besteht darin, dass es Millionen Produkte gibt, die man auch sehr gut im Preis und Angebot überprüfen kann. Ob man nun Sport betreiben möchte oder ein Kochbuch sucht - man wird fast immer fündig. Mit der nachstehenden Suche können Sie sehr schnell das aktuelle Angebot durchsuchen. Einfach den gewünschten Suchbegriff eingeben und auf den Suche-Button klicken.


Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Themenliste:

Zurück zum Hauptthema

Übersicht jQuery

Startseite Javascript-Grundlagen