0Pricing
jQuery Academy · Lekcja

Zaawansowane selektory atrybutów

Proszę poznać złożone selektory atrybutów służące do wybierania elementów na podstawie obecności atrybutów, ich wartości lub częściowego dopasowania, aby zwiększyć precyzję selekcji.

Zaawansowane selektory atrybutów to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Witaj, selektory atrybutów!

Witamy w potężnym sposobie wybierania elementów w jQuery! Przyjrzymy się selektorom atrybutów, które pozwalają wybierać elementy na podstawie ich atrybutów HTML.

Potraktuj atrybuty jak dodatkowe dane dołączone do znacznika HTML, takie jak id, class, href, data-* i inne.

Wybieranie na podstawie obecności atrybutu

Najprostszy selektor atrybutu znajduje elementy, które mają określony atrybut, niezależnie od jego wartości. Zapisuje się go jako [attributeName].

Jest to bardzo przydatne, gdy trzeba tylko sprawdzić, czy atrybut istnieje w elemencie. Na przykład $('[title]') znajdzie wszystkie elementy z atrybutem title.

Wypróbuj: obecność atrybutu

Użyjmy selektora obecności, aby znaleźć wszystkie elementy mające atrybut title i wyświetlić nazwy ich znaczników.

<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>

Dopasowywanie dokładnych wartości atrybutów

Aby wybrać elementy, których atrybut ma dokładną wartość, użyj [attributeName="value"].

Ten selektor jest precyzyjny! Dopasowanie nastąpi tylko wtedy, gdy wartość atrybutu będzie identyczna z podaną, z uwzględnieniem wielkości liter (dopasowywanie wartości atrybutów w jQuery rozróżnia wielkość liter).

Dokładne dopasowanie w praktyce

Znajdź elementy z atrybutem data-type, którego wartość jest dokładnie równa "primary".

<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>

Wartości atrybutów zaczynające się od...

Selektor [attributeName^="value"] znajduje elementy, których wartość atrybutu zaczyna się od określonego ciągu znaków.

  • Jest przydatny do grupowania elementów o podobnych konwencjach nazewnictwa.
  • Świetnie nadaje się do filtrowania odnośników (np. wszystkich odnośników zaczynających się od /products).

Wartości kończące się na... i zawierające...

Te selektory zapewniają większą elastyczność przy częściowym dopasowywaniu:

  • [attributeName$="value"]: Dopasowuje element, jeśli wartość atrybutu kończy się podanym ciągiem znaków.
  • [attributeName*="value"]: Dopasowuje element, jeśli wartość atrybutu zawiera podany ciąg znaków w dowolnym miejscu.

Demonstracja na żywo: częściowe dopasowania

Zaobserwuj, jak operatory ^=, $= i *= wskazują różne elementy na podstawie częściowych wartości atrybutów w ich atrybutach href.

<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>

Selektory słów i łączników

Dwa kolejne wyspecjalizowane selektory:

  • [attributeName~="value"]: Dopasowuje element, jeśli wartość atrybutu zawiera określone słowo oddzielone spacjami. Często używa się go z atrybutami class.
  • [attributeName|="value"]: Dopasowuje element, jeśli wartość atrybutu jest dokładnie równa "value" lub zaczyna się od "value-" (po którym następuje łącznik). Jest często używany w przypadku kodów języków, takich jak lang="en-US".

Szybki test: selektory

Który selektor lub które selektory jQuery poprawnie wskażą poniższy element <div>?

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

Podsumowanie: selektory atrybutów

Świetna praca! Opanowali Państwo zaawansowane selektory atrybutów:

  • [attr]: Sprawdza obecność atrybutu.
  • [attr="val"]: Dopasowuje dokładne wartości.
  • [attr^="val"]: Dopasowuje wartości zaczynające się od podanego ciągu.
  • [attr$="val"]: Dopasowuje wartości kończące się podanym ciągiem.
  • [attr*="val"]: Dopasowuje wartości zawierające podany ciąg.
  • [attr~="val"]: Dopasowuje wartości zawierające słowo oddzielone spacjami.
  • [attr|="val"]: Dopasowuje wartości dokładnie równe podanej wartości lub zaczynające się od „val-”.

Używaj tych selektorów do tworzenia bardzo precyzyjnego i wydajnego kodu jQuery!

Często zadawane pytania

Czy lekcja „Zaawansowane selektory atrybutów” jest bezpłatna?

Tak — pełny tekst „Zaawansowane selektory atrybutów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Zaawansowane selektory atrybutów”?

Proszę poznać złożone selektory atrybutów służące do wybierania elementów na podstawie obecności atrybutów, ich wartości lub częściowego dopasowania, aby zwiększyć precyzję selekcji. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.

Ile czasu zajmuje lekcja „Zaawansowane selektory atrybutów”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Zaawansowane selektory atrybutów
  2. Pseudoklasy i niestandardowe selektory
  3. Efektywne techniki przemieszczania się po DOM
← Powrót do jQuery Academy