0 6761

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.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.