Wprowadzenie do selektorów JQuery i ich t
Podczas pracy z JavaScriptem często znajdziesz się w sytuacji, w której musisz znaleźć i zmodyfikować niektóre treści na stronie. W takich przypadkach konieczne będzie użycie obsługi selektora w JQuery. JQuery ułatwia znalezienie elementów strony na podstawie ich typów, wartości, atrybutów itp. Elementy te oparte są na selektorach CSS, a kiedy poćwiczysz, zobaczysz, że znajdowanie elementów na stronach to bułka z masłem. W zależności od ich zastosowania możemy klasyfikować różne typy Selektorów JQuery według różnych typów. Rzućmy okiem na niektóre z najczęściej używanych selektorów.
Korzystanie z selektora
Poniżej znajduje się składnia Selektora JQuery:
- $ (Selektor) .methodname ():
Jeśli potrzebujesz, możesz połączyć wiele selektorów, dodając „.” Pomiędzy metodami.
- $ (selektor) .method1 (). method2 (). method3 ();
Typy selektorów w JQuery
Oto różne typy Selektora w JQuery
1) Podstawowe selektory JQuery
Możemy wybierać elementy strony przy użyciu ich identyfikatora, klasy lub nazwy tagu. W razie potrzeby można również zastosować ich kombinację. Oto niektóre podstawowe selektory:
- : Selektor nagłówka - Jest to podstawowy typ selektora, który pozwala nam znajdować elementy z ich nagłówkami HTML. Aby to zrobić, używamy pełnego selektora $ („sekcja h1, sekcja h2, sekcja h3”) lub możemy również użyć znacznie krótszego selektora $ („sekcja: nagłówek”).
- : selektor docelowy - ten selektor znajduje obiekty docelowe strony lub skrót identyfikatora URI dokumentu. Na przykład, jeśli URI na stronie to „https://example.com/#test”. Następnie selektor $ („h2: target”) wybierze element
.
- : animowany Selektor - ten selektor służy do znajdowania wszystkich elementów z animacją. Pamiętaj, że aby animacja została wybrana, musi być uruchomiona po uruchomieniu selektora.
2) Selektory oparte na indeksie
JQuery ma własny zestaw selektorów opartych na indeksach, które wykorzystują indeksowanie zerowe. Oto kilka przykładów:
- : eq (k) Selektor - ten selektor zwraca element o indeksie k. Obsługuje również ujemne wartości indeksu.
- : lt (k) Selektor - ten selektor zwraca wszystkie elementy o indeksie mniejszym niż k. Podobnie jak powyżej, wartości ujemne są również akceptowane
- : gt (n) Selektor - ten selektor jest podobny: lt (k) Selektor, z wyjątkiem tego, że działa dla wartości Indeksu większej lub równej k.
3) Selektory podrzędne
Za pomocą JQuery można wybrać elementy podrzędne dowolnego elementu na podstawie ich typu lub indeksu.
- : first-child - Ten selektor zwróci wszystkie elementy, które są pierwszymi dziećmi ich rodziców.
- : first-of-type - Ten selektor JQuery służy do wybierania wszystkich elementów, które są pierwszym rodzeństwem
- : last-child - jak sama nazwa wskazuje, ten selektor wybierze ostatnie dziecko rodzica.
- : last-of-type - Spowoduje to zaznaczenie wszystkich dzieci, które są ostatniego typu w rodzicu. Jeśli jest więcej niż jeden rodzic, wybierze wiele elementów.
- : only-of-type - Możemy użyć selektora only-of-type, aby znaleźć wszystkie elementy, które mają rodzeństwo tego samego typu na stronie.
- : only-child - W sytuacjach, w których musisz znaleźć i wybrać elementy, które są jedynym dzieckiem ich rodzica, możesz użyć tego selektora. Jeśli rodzic na stronie ma więcej niż jedno dziecko, zostanie zignorowany.
4) Selektory atrybutów
Elementy można wybierać na podstawie ich atrybutów. Poniżej przedstawiono niektóre typowe selektory atrybutów:
- $ („(Atrybut | =„ wartość ”)”) - „Atrybut zawiera selektor przedrostka” wybiera wszystkie elementy z atrybutami, których wartość jest równa lub zaczyna się od podanego ciągu, po którym następuje myślnik.
- $ („(Atrybut ~ =„ wartość ”)”) - Zwraca wszystkie elementy z atrybutami, w których wartość zawiera dane słowo rozdzielone spacjami.
- $ („(Atrybut * =„ wartość ”)”) - Wybierze elementy, w których wartość zawiera podany podłańcuch. Dopóki wartość się zgadza, lokalizacja nie będzie miała znaczenia
5) Selektory treści
Jak sama nazwa wskazuje, te Selektory JQuery służą do wyszukiwania i wybierania treści wewnątrz elementów.
- : zawiera (tekst) - służy do wybierania elementów, które zawierają określoną treść tekstową. Podczas używania tego selektora należy pamiętać o tym, że w teście rozróżniana jest wielkość liter.
- : has (selektor) - zwróci elementy zawierające przynajmniej jeden element pasujący do określonego selektora. Na przykład $ („sekcja: has (h1)”) zwróci wszystkie sekcje, które mają element h1.
- : empty - ten selektor zwróci elementy strony, które nie mają żadnych elementów podrzędnych, w tym węzły tekstowe.
- : parent - ten selektor służy do wyboru wszystkich elementów strony internetowej, które mają co najmniej jeden węzeł potomny. Możesz uznać to za odwrotność do: pustego Selektora JQuery.
6) Selektory hierarchii
- $ („Potomek przodka”) - służy do wyboru wszystkich elementów potomka rodzica. Potomek w naszym przypadku może być dzieckiem, wnukiem i tak dalej.
- $ („Rodzic> dziecko”) - jest używany w przypadkach, w których musimy jedynie wybrać bezpośrednie dziecko konkretnego rodzica.
- $ („Previous + next”) - W przypadku, gdy musimy wybrać wszystkie elementy, które pasują do selektora „next” i które mają rodzica „previous”. Wybrane elementy zostaną również natychmiast poprzedzone przez „poprzednie”, którym jest rodzeństwo.
7) Selektory widoczności
Dwa selektory: widoczny i: ukryty są również dostępne w JQuery. Można ich użyć do znalezienia odpowiednio widocznych lub ukrytych elementów na stronie. Każdy element strony internetowej jest uważany za ukryty, jeśli:
- Jego wyświetlanie jest właściwie ustawione na brak.
- Jego szerokość i wysokość są zdefiniowane jako zero.
- Ma typ = ukryty wspomniany w elemencie formularza.
- Wszelkie przodki elementu są już ukryte.
Pamiętaj, że nawet jeśli element ma wartość krycia ustawioną na zero, nadal będzie uważany za widoczny, ponieważ nadal będzie zajmował miejsce.
8) Selektory formularzy
Aby zaoszczędzić czas i problemy, JQuery ma sortujące wersje selektorów dla elementów wejściowych formularzy internetowych.
Na przykład, podczas gdy $ („przycisk, wejście (typ =„ przycisk ”)”) zadziała, aby wybrać przycisk na stronie, możemy użyć $ („: przycisk”), aby zrobić to szybko.
Podobnie możemy użyć $ („: radio”), aby wybrać przycisk opcji.
Wniosek - typy selektora w JQuery
Selektory są jedną z ważnych cech JQuery, wybór w JavaScript nie jest tak intuicyjny i niezawodny po dodaniu selektorów za pomocą JQuery, programowanie w Internecie stało się łatwiejsze.
Polecane artykuły
Jest to przewodnik po Typach Selektora w JQuery. Tutaj omawiamy różne typy selektorów JQuery ze składnią. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej-
- Metody jQuery
- jQuery Alternatywy
- Zastosowania JQuery
- Co potrafi Javascript?
- jQuery querySelector
- Przewodnik po przykładach paska postępu JQuery