0 5752

jQuery Tutorial – Ein Element mit einem speziellen Namen oder Attribut selektieren

In diesem jQuery Tutorial möchte ich Euch zeigen, wie Ihr Elemente nicht nur per Klasse oder ID sondern auch über den Namen, den type oder jedes beliebige andere Attribut ansprechen könnt.

Wir sollten nun zum experimentieren ein paar klassische Input-Felder erstellen:

Beispielcode HTML:

<input type="text" name="vorname" value="Max" />
<input type="text" name="nachname" value="Mustermann" />
<input type="text" name="strasse" value="Musterstr" />
<input type="checkbox" name="agb" value="1" />

Wenn wir uns jetzt den Wert des Input Feldes mit dem Namen „vorname“ per alert anzeigen lassen wollen,
dann können wir das Feld auch ohne ID oder Klasse folgendermaßen ansprechen:

Beispielcode jQuery:

<script type="text/javascript">
alert($('input[name="vorname"]').val());
</script>

Um also ein Element per Attribut also bspw. den Namen zu selektieren setzen wir die Abfrage nach dem Attributnamen und dem gesuchten Attributwert in eckige Klammern.

Wir könnten jetzt auch alle Text-Input Felder ausblenden. Hierzu müssen wir das Attribut type abfragen. Die Checkbox sollte nach wie vor sichtbar sein.:

Beispielcode jQuery:

<script type="text/javascript">
$('input[type="text"]').hide();
</script>

Doch es geht noch weiter. Es gibt sogar die Möglichkeit die Felder zu selektieren, die nur den Teil eines Namens beinhalten. Wir könnten nun bspw. nur die Felder vorname und nachname ausblenden indem wir folgende Abfrage machen:

Beispielcode jQuery:

<script type="text/javascript">
$('input[name*="name"]').hide();
</script>

Auf diese Art und Weise werden uns ungeahnte Möglichkeiten geschenkt, Elementen eigene Attribute zuzuweisen und mit diesen dann weiter zu arbeiten.

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.