0Pricing
jQuery Academy · Lektion

Erweiterte Attributselektoren

Erkunden Sie komplexe Attributselektoren, um Elemente anhand des Vorhandenseins, des Werts oder von Teilübereinstimmungen ihrer Attribute gezielt auszuwählen und so die Präzision Ihrer Auswahl zu erhöhen.

Erweiterte Attributselektoren ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Hallo, Attributselektoren!

Willkommen bei einer leistungsstarken Möglichkeit, Elemente in jQuery auszuwählen! Wir beschäftigen uns mit Attributselektoren, mit denen Sie Elemente anhand ihrer HTML-Attribute auswählen können.

Stellen Sie sich Attribute als zusätzliche Daten vor, die an einem HTML-Tag hängen, etwa id, class, href, data-* und weitere.

Auswahl nach Vorhandensein eines Attributs

Der einfachste Attributselektor findet Elemente, die ein bestimmtes Attribut besitzen, unabhängig von dessen Wert. Er wird als [attributeName] geschrieben.

Das ist besonders nützlich, wenn Sie nur wissen müssen, ob ein Attribut in einem Element vorhanden ist. Beispielsweise findet $('[title]') alle Elemente mit einem title-Attribut.

Probieren Sie es aus: Vorhandensein eines Attributs

Verwenden wir den Selektor für vorhandene Attribute, um alle Elemente mit einem title-Attribut zu finden und ihre Tagnamen anzuzeigen.

<p title="Hello Tooltip">This paragraph has a title.</p>
<div>Another element</div>
<span title="Span Title">A span with a title.</span>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[title]').each(function(index, element) {
      $('#output').append('<p>Found: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; with title="' + $(element).attr('title') + '"</p>');
    });
  });
</script>

Abgleich exakter Attributwerte

Um Elemente auszuwählen, deren Attribut einen exakten Wert besitzt, verwenden Sie [attributeName="value"].

Dieser Selektor ist präzise! Er findet nur Übereinstimmungen, wenn der Attributwert exakt Ihrer Angabe entspricht, einschließlich der Groß- und Kleinschreibung (der Abgleich von Attributwerten in jQuery berücksichtigt die Groß- und Kleinschreibung).

Exakter Abgleich in Aktion

Finden Sie Elemente mit einem data-type-Attribut, dessen Wert exakt "primary" lautet.

<button data-type="primary">Submit</button>
<button data-type="secondary">Cancel</button>
<a href="#" data-type="primary">Link</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('[data-type="primary"]').each(function(index, element) {
      $('#output').append('<p>Exact match: &lt;' + $(element).prop('tagName').toLowerCase() + '&gt; (Type: ' + $(element).data('type') + ')</p>');
    });
  });
</script>

Attributwerte, die beginnen mit …

Der Selektor [attributeName^="value"] findet Elemente, deren Attributwert mit einer bestimmten Zeichenfolge beginnt.

  • Er eignet sich zum Gruppieren von Elementen mit ähnlichen Namenskonventionen.
  • Er ist besonders nützlich zum Filtern von Links, beispielsweise aller Links, die mit /products beginnen.

Endende und enthaltene Werte

Diese Selektoren bieten mehr Flexibilität bei der Suche nach Teilübereinstimmungen:

  • [attributeName$="value"]: Findet eine Übereinstimmung, wenn der Attributwert mit der angegebenen Zeichenfolge endet.
  • [attributeName*="value"]: Findet eine Übereinstimmung, wenn der Attributwert die angegebene Zeichenfolge an beliebiger Stelle enthält.

Live-Demo: Teilübereinstimmungen

Beobachten Sie, wie ^=, $= und *= anhand von Teilwerten in ihren href-Attributen unterschiedliche Elemente auswählen.

<a href="/products/item-1">Item 1</a>
<a href="/about/contact">Contact</a>
<a href="/products/item-2">Item 2</a>
<div id="output"></div>
<script>
  $(document).ready(function() {
    $('#output').append('<h3>Starts with "/products":</h3>');
    $('[href^="/products"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Ends with "contact":</h3>');
    $('[href$="contact"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });

    $('#output').append('<h3>Contains "item":</h3>');
    $('[href*="item"]').each(function() {
      $('#output').append('<p>' + $(this).text() + '</p>');
    });
  });
</script>

Selektoren für Wörter und Bindestriche

Zwei weitere spezialisierte Selektoren:

  • [attributeName~="value"]: Findet eine Übereinstimmung, wenn der Attributwert ein bestimmtes, durch Leerzeichen abgegrenztes Wort enthält. Wird häufig mit class-Attributen verwendet.
  • [attributeName|="value"]: Findet eine Übereinstimmung, wenn der Attributwert exakt "value" entspricht oder mit "value-" beginnt, also gefolgt von einem Bindestrich. Wird häufig für Sprachcodes wie lang="en-US" verwendet.

Schnelltest: Selektoren

Welcher bzw. welche jQuery-Selektor(en) würden das folgende <div>-Element korrekt identifizieren?

<div class="card active-item" data-role="admin-panel" lang="en-US">
  Admin Area
</div>

Zusammenfassung: Attributselektoren

Sehr gut! Sie beherrschen nun fortgeschrittene Attributselektoren:

  • [attr]: Prüft, ob ein Attribut vorhanden ist.
  • [attr="val"]: Findet exakte Werte.
  • [attr^="val"]: Findet Werte, die mit etwas beginnen.
  • [attr$="val"]: Findet Werte, die mit etwas enden.
  • [attr*="val"]: Findet Werte, die etwas enthalten.
  • [attr~="val"]: Findet Werte, die ein durch Leerzeichen abgegrenztes Wort enthalten.
  • [attr|="val"]: Findet Werte, die exakt übereinstimmen oder mit „val-“ beginnen.

Verwenden Sie diese Selektoren, um äußerst präzisen und effizienten jQuery-Code zu schreiben!

Häufig gestellte Fragen

Ist die Lektion „Erweiterte Attributselektoren“ kostenlos?

Ja — der vollständige Text von „Erweiterte Attributselektoren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Erweiterte Attributselektoren“?

Erkunden Sie komplexe Attributselektoren, um Elemente anhand des Vorhandenseins, des Werts oder von Teilübereinstimmungen ihrer Attribute gezielt auszuwählen und so die Präzision Ihrer Auswahl zu erh… Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 3.

Wie lange dauert die Lektion „Erweiterte Attributselektoren“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Erweiterte Attributselektoren
  2. Pseudo-Klassen und benutzerdefinierte Selektoren
  3. Effiziente Techniken zur DOM-Navigation
← Zurück zu jQuery Academy