Pseudoklasy i niestandardowe selektory
Proszę poznać wbudowane pseudoklasy, takie jak :has(), :not() i :nth-child(), a następnie nauczyć się tworzyć własne niestandardowe selektory do wielokrotnego filtrowania elementów.
Pseudoklasy i niestandardowe selektory to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 2 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.
Odkryj moc pseudoklas
Witamy w sekcji poświęconej zaawansowanym selektorom! Dzisiaj omówimy pseudoklasy — specjalne słowa kluczowe dodawane do selektorów w celu określenia specjalnego stanu wybranego elementu.
- Pozwalają wskazywać elementy, których nie da się łatwo wybrać za pomocą standardowych atrybutów HTML lub nazw.
- Można traktować je jak dynamiczne filtry dla dokonywanego wyboru.
Zaczynają się od dwukropka (:), na przykład :hover lub :first-child.
Wybieranie według pozycji: :nth-child()
Klasa pseudoelementu :nth-child() wybiera elementy na podstawie ich pozycji w grupie rodzeństwa. Jest niezwykle przydatna do stylizowania list lub wierszy tabel.
:nth-child(n): wybiera n-te dziecko.:nth-child(odd): wybiera dzieci o nieparzystych numerach.:nth-child(even): wybiera dzieci o parzystych numerach.
Numerowanie zaczyna się od 1 dla pierwszego dziecka.
Stylizowanie za pomocą :nth-child(odd/even)
Zobaczmy, jak :nth-child(odd) i :nth-child(even) mogą szybko zastosować naprzemienne style, przypominające pasy zebry na liście.
Uruchom ten przykład, aby zobaczyć efekt:
$(document).ready(function() {
// Selects odd list items and makes their text blue
$('li:nth-child(odd)').css('color', 'blue');
// Selects even list items and makes their text green
$('li:nth-child(even)').css('color', 'green');
});
// HTML Structure (imagine this is in your page):
// <ul>
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// <li>Item 4</li>
// </ul>Zaawansowane formuły :nth-child()
Wewnątrz :nth-child() można używać bardziej złożonych formuł, takich jak An+B. W tym zapisie A oznacza długość cyklu, a B — przesunięcie.
:nth-child(3n): wybiera co trzecie dziecko (3., 6., 9. itd.).:nth-child(3n+1): wybiera 1., 4., 7. itd. dziecko.
Umożliwia to bardzo precyzyjne wybieranie elementów w określonych odstępach.
Wykluczanie elementów za pomocą :not()
Klasa pseudoelementu :not() pozwala wykluczyć określone elementy z wyboru. To tak, jakby powiedzieć: „wybierz wszystkie akapity, z wyjątkiem tych z klasą „intro””.
- Przyjmuje inny selektor jako argument:
:not(selector). - Ułatwia doprecyzowanie istniejących wyborów bez konieczności tworzenia złożonych nowych selektorów.
Praktyczne użycie :not()
Załóżmy, że chce Pan lub chce Pani dodać obramowanie do wszystkich elementów listy z wyjątkiem pierwszego. :not(:first-child) idealnie się do tego nadaje.
Zobacz, jak :not() pomaga wykluczyć pierwszy element:
$(document).ready(function() {
// Selects all list items that are NOT the first child
$('li:not(:first-child)').css('border-top', '1px solid gray');
});
// HTML Structure:
// <ul>
// <li>First Item</li>
// <li>Second Item</li>
// <li>Third Item</li>
// </ul>Wybieranie elementów nadrzędnych za pomocą :has()
Klasa pseudoelementu :has() jest wyjątkowa: wybiera element, jeśli zawiera co najmniej jeden element pasujący do selektora przekazanego jako argument.
- To tak, jakby zapytać: „Podaj wszystkie elementy
<div>, które mają w środku znacznik<p>”. - Pozwala to wybierać elementy nadrzędne na podstawie właściwości ich elementów podrzędnych.
Wyróżnianie za pomocą :has()
Załóżmy, że chce Pan lub chce Pani wyróżnić tylko te kontenery <div>, które zawierają obraz. :has('img') pozwala zrobić to wydajnie.
Uruchom ten kod, aby zobaczyć, który element div otrzyma obramowanie:
$(document).ready(function() {
// Selects divs that contain an image and adds a border
$('div:has(img)').css('border', '2px solid red');
});
// HTML Structure:
// <div id="container1">
// <p>Text only</p>
// </div>
// <div id="container2">
// <img src="example.png" alt="An image">
// <p>Text and image</p>
// </div>Niestandardowe selektory: rozszerzanie jQuery
Co zrobić, jeśli wbudowane selektory jQuery nie wystarczają? Można utworzyć własne niestandardowe selektory pseudoklas! Pozwala to filtrować elementy na podstawie bardzo szczegółowej, niestandardowej logiki.
- Rejestruje się je za pomocą
jQuery.expr[':']. - Dzięki temu kod wyboru jest czytelniejszy i można go ponownie wykorzystać.
To zaawansowana funkcja przydatna w przypadku naprawdę unikatowych potrzeb filtrowania.
Tworzenie niestandardowego selektora :contains-word()
Utwórzmy niestandardowy selektor o nazwie :contains-word(), który wyszukuje elementy zawierające konkretne całe słowo, a nie tylko jego fragment.
Ten przykład definiuje :contains-word(), a następnie go używa:
$(document).ready(function() {
// Define a custom pseudo-selector ':contains-word'
$.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
var pattern = new RegExp('\b' + word + '\b', 'i');
return function(elem) {
return pattern.test($(elem).text());
};
});
// Use the custom selector to find paragraphs containing 'hello'
$('p:contains-word("hello")').css('background-color', 'yellow');
});
// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>Wyzwanie dotyczące klas pseudoelementów
Rozważ następujący kod HTML:
<ul>
<li class="special">One</li>
<li>Two</li>
<li class="special">Three</li>
<li>Four</li>
<li class="special">Five</li>
</ul>Który selektor jQuery wybierze tylko elementy „Two” i „Four”?
Podsumowanie: klasy pseudoelementów i niestandardowe selektory
Opanował Pan lub opanowała Pani zaawansowane techniki wyboru elementów w jQuery!
- Klasy pseudoelementów (takie jak
:nth-child(),:not()i:has()) pozwalają wybierać elementy na podstawie ich stanu lub relacji z innymi elementami. :nth-child()wybiera elementy według pozycji, także za pomocą formuł.:not()wyklucza elementy z wyboru.:has()wybiera elementy nadrzędne na podstawie ich elementów podrzędnych.- Można także tworzyć własne niestandardowe selektory pseudoklas za pomocą
jQuery.expr[':'], aby bardzo precyzyjnie filtrować elementy.
Ćwicz te techniki, aby coraz precyzyjniej wybierać elementy DOM!
Często zadawane pytania
Czy lekcja „Pseudoklasy i niestandardowe selektory” jest bezpłatna?
Tak — pełny tekst „Pseudoklasy i niestandardowe selektory” 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 „Pseudoklasy i niestandardowe selektory”?
Proszę poznać wbudowane pseudoklasy, takie jak :has(), :not() i :nth-child(), a następnie nauczyć się tworzyć własne niestandardowe selektory do wielokrotnego filtrowania elementów. Ć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 2 z 3.
Ile czasu zajmuje lekcja „Pseudoklasy i niestandardowe selektory”?
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
- Zaawansowane selektory atrybutów
- Pseudoklasy i niestandardowe selektory
- Efektywne techniki przemieszczania się po DOM