Auswählen von Elementen über jQuery

Bevor wir irgend etwas mit irgendwelchen Elementen anstellen können, müssen wir das gewünschte Element erst auswählen.

jQuery spielt seinen Bonus über das Auswählen (selektieren) von Elementen aus. Im ersten Schritt wird gezeigt, wie wir das über den Typ-Selektor machen. Für das folgende Beispiel erweitern wir unseren Beispielcode im HTML-Bereich mit einer Überschrift und einem Link.

<!DOCTYPE html>
<html lang="de">
<head>
  <title>jQuery Beispiel: einbinden und erste Anweisung</title>
  <script src="https://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
});
</script>

</head>
<body>

<h1>jQuery Beispiel: einbinden und erster Befehl</h1>

<a href="https://www.html-seminar.de/" title="HTML, CSS u. jQuery lernen">
http://www.HTML-Seminar.de</a>

</body>
</html>

Auf das Attribut title des Links wollen wir jetzt über jQuery zugreifen und dieses ausgeben.

Hier sagen wir jetzt jQuery schnapp dir den Link „a“ und dort das Attribut „title“ und gib es auf dem Bildschirm über alert aus.

alert(jQuery('a').attr('title'));

Damit es übersichtlicher bleibt ergänze ich im Folgenden nur noch den Bereich bei

$(document).ready(function(){

Mit unserer Anweisung sieht das wie folgt aus:

<script>
$(document).ready(function(){
    /* Hier der jQuery-Code */
    alert(jQuery('a').attr('title'));
});
</script>

Und als Ausgabe erhalten wir dann:

Ausgabe von Inhalten, die über einen jQuery-Selektor ausgewählt wurden

Wer sich schon ein wenig mit jQuery befasst hat, wird über den folgenden Aufruf gestolpert sein:

jQuery('a').attr('title');

Kürzer ist schöner – daher wird man normalerweise nur folgende Schreibweise sehen (die gleichbedeutend ist!):

$('a').attr('title');

Das Dollarzeichen ist die Kurzform von jQuery

Das war der erste Teil von Selektion über jQuery. Im übernächsten Kapitel schauen wir uns die Selektion bei IDs und Klassen an. Davor im folgenden Kapitel noch einen Blick auf das Ändern von Inhalten – was dann für die weiterführenden Beispiele zur Selektion hilfreich ist.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Vorwort

Bitte unterstützen

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

E-Books zum Kurs
von HTML-Seminar.de
E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

Mehr Details

Auswählen von Elementen über jQuery

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

E-Books zum Kurs