Tworzenie niestandardowych pseudoselektorów
Proszę nauczyć się rejestrować własne niestandardowe pseudoselektory za pomocą jQuery.expr[':'], aby upraszczać złożoną logikę wybierania elementów i poprawiać czytelność kodu.
Tworzenie niestandardowych pseudoselektoró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.
Po co używać niestandardowych selektorów?
Wbudowane selektory jQuery są niezwykle zaawansowane, ale czasami pojawia się potrzeba zastosowania filtrów, które są złożone lub często się powtarzają.
W takich sytuacjach przydają się niestandardowe pseudoselektory! Pozwalają definiować własne wyspecjalizowane filtry, upraszczając złożoną logikę wyboru oraz sprawiając, że kod staje się czystszy i czytelniejszy.
Gdy domyślne selektory nie wystarczają
Proszę wyobrazić sobie, że często trzeba wybrać wszystkie elementy <div>, które mają określoną klasę, a także atrybut data-status ustawiony na wartość 'active'.
Można połączyć standardowe selektory, ale jeśli logika jest bardziej złożona lub trzeba stosować ją często w całej aplikacji, takie rozwiązanie może stać się rozwlekłe i mniej intuicyjne.
Poznajmy jQuery.expr[':']
jQuery.expr[':'] to obiekt, w którym rejestruje się niestandardowe pseudoselektory. Można go traktować jako rozszerzenie podstawowego silnika wyboru jQuery.
Gdy jQuery napotka selektor taki jak :myCustomSelector, wyszukuje myCustomSelector w tym obiekcie. Do klucza (nazwy selektora) przypisuje się funkcję, którą jQuery następnie wykonuje dla każdego sprawdzanego elementu.
Definiowanie `:has-tooltip`
Zdefiniujmy prosty niestandardowy selektor :has-tooltip, który identyfikuje elementy z atrybutem title. W ten sposób dodaje się go do jQuery.expr[':'].
Przekazana funkcja otrzymuje bieżący element DOM elem, który jest sprawdzany. Powinna zwrócić true, jeśli element spełnia kryteria, lub false w przeciwnym razie.
jQuery.expr[':'].hasTooltip = function(elem) {
// Check if the element has a 'title' attribute
return !!$(elem).attr('title');
};Używanie własnego selektora
Teraz, gdy selektor :has-tooltip jest już zdefiniowany, można używać go tak jak każdego innego pseudoselektora jQuery! Proszę uruchomić poniższy przykład.
Podświetli on wszystkie elementy mające atrybut title, pokazując możliwości nowego niestandardowego filtra.
<!DOCTYPE html>
<html>
<head>
<title>Custom Selector Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.highlight {
border: 2px solid green;
background-color: #e0ffe0;
}
</style>
</head>
<body>
<p title="This is a tooltip">Paragraph with tooltip</p>
<div id="no-tooltip">Just a div</div>
<span title="Another tooltip here">Span with tooltip</span>
<script>
jQuery.expr[':'].hasTooltip = function(elem) {
return !!$(elem).attr('title');
};
$(document).ready(function() {
$('p:has-tooltip, span:has-tooltip').addClass('highlight');
});
</script>
</body>
</html>Argumenty `elem`, `i` i `match`
Podczas wykonywania funkcja niestandardowego selektora otrzymuje trzy ważne argumenty:
elem: bieżący element DOM, który jest sprawdzany.i: indeks elementuelemw zbiorze elementów, po którym jQuery obecnie iteruje.match: tablica zawierająca wyniki wyrażenia regularnego użytego do przeanalizowania selektora. Jest niezbędna w przypadku selektorów przyjmujących argumenty.
W przypadku prostych selektorów będą Państwo używać przede wszystkim argumentu elem.
Selektor oparty na atrybutach danych
Utwórzmy selektor :data-status(active), aby znaleźć elementy, których atrybut data-status ma wartość 'active'. Pokazuje to, jak używać argumentu match.
Wartość 'active' (argument znajdujący się w nawiasach) będzie dostępna w match[3]. Dzięki temu selektor może działać dynamicznie!
<!DOCTYPE html>
<html>
<head>
<title>Data Status Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.active-item {
background-color: lightgreen;
padding: 5px;
margin: 3px;
}
</style>
</head>
<body>
<div data-status="active">Item 1 (Active)</div>
<div data-status="inactive">Item 2 (Inactive)</div>
<p data-status="active">Item 3 (Active)</p>
<span>Item 4 (No Status)</span>
<script>
jQuery.expr[':'].dataStatus = function(elem, i, match) {
const expectedStatus = match[3]; // e.g., 'active' from :data-status(active)
const actualStatus = $(elem).data('status');
return actualStatus === expectedStatus;
};
$(document).ready(function() {
$(':data-status(active)').addClass('active-item');
});
</script>
</body>
</html>Zrozumienie `match[3]`
Tablica match jest wynikiem wewnętrznego analizowania ciągu selektora za pomocą wyrażenia regularnego w jQuery. W przypadku selektora takiego jak :yourSelector(argument) część argument jest zazwyczaj przechwytywana w match[3].
Mechanizm ten ma kluczowe znaczenie podczas tworzenia dynamicznych i elastycznych niestandardowych selektorów, które mogą przyjmować parametry, dzięki czemu są bardziej uniwersalne i skuteczniejsze w różnych scenariuszach filtrowania.
Zaawansowana logika: `:containsExact`
Zbudujmy bardziej zaawansowany selektor: :containsExact(text). W przeciwieństwie do domyślnego selektora jQuery :contains() będzie on dopasowywać tylko elementy, których cała zawartość tekstowa (z wyłączeniem elementów potomnych) jest dokładnie równa podanemu tekstowi.
Często wymaga to starannego porównania $(elem).text().trim(), aby zapewnić dokładne dopasowanie.
<!DOCTYPE html>
<html>
<head>
<title>Contains Exact Selector</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.exact-match {
font-weight: bold;
color: blue;
background-color: #e0f0ff;
padding: 5px;
margin: 3px;
}
</style>
</head>
<body>
<div>Hello World</div>
<div>Hello there!</div>
<p>Hello</p>
<span>World</span>
<script>
jQuery.expr[':'].containsExact = function(elem, i, match) {
const searchText = match[3]; // The text inside the parentheses
const elementText = $(elem).text().trim();
return elementText === searchText;
};
$(document).ready(function() {
$(':containsExact(Hello World)').addClass('exact-match');
});
</script>
</body>
</html>Wskazówki dotyczące niestandardowych selektorów
Podczas tworzenia niestandardowych selektorów pamiętaj o następujących dobrych praktykach:
- Wydajność: Złożona logika może wpływać na wydajność, szczególnie w przypadku dużych struktur DOM. Optymalizuj funkcje selektorów.
- Przejrzystość: Nadawaj selektorom jasne nazwy, aby ich przeznaczenie było od razu oczywiste dla każdej osoby czytającej kod.
- Możliwość ponownego użycia: Projektuj je tak, aby były wystarczająco uniwersalne i przydatne w różnych kontekstach, a nie tylko w jednym konkretnym scenariuszu.
- Unikanie konfliktów: Wybieraj unikatowe nazwy, aby zapobiec kolizjom z przyszłymi selektorami jQuery lub innymi używanymi wtyczkami.
Wyzwanie: niestandardowy selektor
Chcesz utworzyć niestandardowy selektor :is-empty, który wybiera elementy niezawierające tekstu ani elementów potomnych. Działa on podobnie do wbudowanego selektora jQuery :empty.
Który z poniższych fragmentów kodu poprawnie definiuje ten niestandardowy pseudo-selektor?
Podsumowanie: niestandardowe selektory
W tej lekcji nauczyli się Państwo rozszerzać zaawansowane możliwości wyboru elementów w jQuery przez tworzenie własnych niestandardowych pseudo-selektorów za pomocą jQuery.expr[':'].
Poznali Państwo sposób definiowania prostych selektorów, przekazywania do nich argumentów za pośrednictwem tablicy match oraz używania ich do upraszczania złożonej logiki filtrowania, dzięki czemu kod jQuery staje się bardziej czytelny, łatwiejszy w utrzymaniu i wydajniejszy.
Często zadawane pytania
Czy lekcja „Tworzenie niestandardowych pseudoselektorów” jest bezpłatna?
Tak — pełny tekst „Tworzenie niestandardowych pseudoselektoró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 „Tworzenie niestandardowych pseudoselektorów”?
Proszę nauczyć się rejestrować własne niestandardowe pseudoselektory za pomocą jQuery.expr[':'], aby upraszczać złożoną logikę wybierania elementów i poprawiać czytelność kodu. Ć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 „Tworzenie niestandardowych pseudoselektoró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
- Tworzenie niestandardowych pseudoselektorów
- Zaawansowane filtrowanie za pomocą .filter()
- Wykluczanie elementów za pomocą .not()