mit jQuery Elemente (Divs, Spans, imgs) im DOM selektieren

mit jQuery Elemente (Divs, Spans, imgs) im DOM selektieren

Mit jQuery kann man vieles realisieren.
Hierzu muss man aber verstehen, wie man Elemente im DOM selektiert.

Um bspw. alle DIV einer Seite auszublenden würde man folgenden Code einsetzen:

Beispielcode jQuery:

jQuery('div').hide();

Ich werde für weitere Beispiele die Kurzschreibweise einsetzen. Mit der Kurzschreibweise sähe der obere Aufruf folgendermaßen aus:

Beispielcode jQuery:

$('div').hide();

Möchte man alle Spans einer Seite ausblenden, hilft folgender Code:

Beispielcode jQuery:

$('span').hide();

Man könnte nun alle Standardelemente auf diese Art ansprechen.
Doch wann möchte man denn schon alle Elemente eines speziellen Typs ansprechen?
z.B., wenn man alle inputs eines Formulares abfragen möchte.

Beispielcode jQuery:

$('input')

Meistens geht es aber darum, dass man ein spezielles Element selektieren möchte.

Möchte ich bspw. ein DIV mit der ID maincontent ansprechen, dann sieht mein Aufruf folgendermaßen aus:

Beispielcode jQuery:

$('div#maincontent')

Um eine ID zu selektieren setzt man eine Raute vor den ID Namen.

Das ist nicht zu vergleichen mit

Beispielcode jQuery:

$('div #maincontent')

In letzterem Fall würde man nämlich nur die ID ansprechen, wenn sie sich in einem DIV Container befindet.

Ganz wichtig: Zusammengschrieben muss die ID zu dem Element gehören.
Schreibt man es getrennt, handelt es sich um ein Kindelement.

Wie spricht man nun eine Klasse an?

Klassisch im CSS Stil nutzt man hierbei einen Punkt:

Beispielcode jQuery:

$('div.hidden').hide();

Möchte man nun alle Spans mit der Klasse left in dem Div Container mit der ID maincontent ansprechen sieht das folgendermaßen aus:

Beispielcode jQuery:

$('div#maincontent span.left')

Man kann dies nun immer tiefer verschachteln.

Das ist das Grundprinzip mit dem man Elemente in jQuery selektiert.

Besonderheiten werde ich in kommenden Tutorials ansprechen.