JQuery to biblioteka metod napisanych w tym językuJavaScript, które zostały zaprojektowane w celu uproszczenia pracy z elementami strony HTML. Ta biblioteka również znacznie upraszcza wybór tych elementów, ponieważ obsługuje zestaw selektorów, z których większość jest zapożyczona z CSS. W tym artykule omówimy szczegółowo wszystkie selektory jQuery i podamy przykłady ich użycia.
CSS i jQuery
Jak wspomniano powyżej, selektory w jQuery są zapożyczone z CSS, ale jest tutaj kilka "ALE".
- Po pierwsze, jQuery obsługuje tylko selektory, które wybierają elementy DOM, co oznacza, że nie możesz pracować z selektorami zdarzeń, takimi jak najechanie kursorem i pseudoelementy pierwszej linii.
- Po drugie, jQuery ma wiele innych selektorów, których nie widziałeś w regułach CSS, dlatego jeśli znasz już wszystkie elementy CSS, ten artykuł nadal będzie dla Ciebie odpowiedni.
Podstawowe elementy
Te selektory są używane najczęściej, ponieważ są najprostszym i najbardziej niezawodnym sposobem selekcji elementów. Ta grupa jest w pełni zgodna z selektorami CSS:
| Selektor | Opis selektora |
| $ ("*") | Wybór obejmuje wszystkie elementy na stronie. |
| $ ("b") | Zaznaczenie obejmuje elementy z wybranym tagiem ze znaczników HTML, w tym przykładzie elementy <b> ... </b> |
| $ (". klasaA") | Wybór obejmuje elementy o określonej klasie (<div class = "classA">) |
| $ („# IDone”) | Wybór obejmuje elementy o określonym identyfikatorze (<div id = "IDone">) |
Podobnie jak w przypadku CSS, możesz wybrać wieleSelektory jQuery w tym samym czasie. Można je oddzielić przecinkami. Na przykład użyj selektora jquery według nazwy znacznika i identyfikatora - $ ("# IDone, b"). Dozwolony jest również wybór poprzez tag + klasa lub tag + ID, na przykład $ („b.classA”).
Selektory atrybutów
Korzystając z różnych CMS, możesz napotkaćsytuacja, w której identyfikator lub klasa nie może być ustawiona na element znacznika HTML. Ten sam problem występuje podczas obsługi treści generowanych przez użytkowników. Rodzi to problem pobierania określonych elementów, ale można go łatwo rozwiązać za pomocą selektora atrybutów z jquery.
| Selektor | Opis selektora |
| $ („div [atrybut]”) | Przetwarza wszystkie elementy z określonym atrybutem, ignorując jego wartość |
| $ ("div [atrybut = "wartość "]") | Przy wyborze elementu bierze pod uwagę jego atrybut i wartość |
| $ ("div [atrybut! =" wartość "]") | Wybiera element, dla którego określony atrybut różni się od określonej wartości. Wybór obejmuje również elementy, które nie posiadają tego atrybutu. |
| $ ("div [atrybut ^ =" wartość "]") | Wybiera element, którego dany atrybut zaczyna się od ciągu określonego przez wartość |
| $ ("div [atrybut $ =" wartość "]") | Wybiera element, którego dany atrybut kończy się ciągiem określonym przez wartość |
| $ („div [atrybut * = = wartość „]”) | Wybiera element, którego dany atrybut zawiera ciąg określony w wartości w dowolnej części |
| $ ("div [atrybut ~ =" wartość "]") | Wybiera element, dla którego dany atrybut ma słowo określone w wartości (ciąg znaków bez spacji) |
| $ ("div [atrybut | =" wartość "]") | Wybiera element, którego dany atrybut odpowiada wartości określonej w value lub zaczyna się od niego, po którym następuje myślnik |
Możesz łączyć atrybuty, aby zawęzić wyszukiwanie pasujących elementów, na przykład $ („img [szerokość = 500] [wysokość = 260]”).
Wybór elementów według treści
Zagłębić się w treść elementów strony HTML iwybór tego, który chcesz na podstawie wyników, jest unikalną cechą jQuery. Korzystając z takiej techniki, możesz na przykład utworzyć selektor jquery na tekście zawartym w akapicie (<p> tekst </p>).
| Selektor | Przykład selektora | Opis selektora |
| : zawiera () | $ („p: zawiera („wartość”)”) — zaznacza wszystkie <p> akapity zawierające ciąg „wartość”. | Wybiera element, który zawiera określonylinia. Element będzie dobrze, nawet jeśli określony ciąg znajduje się wewnątrz jego dziecka. Pamiętaj, że ten selektor rozróżnia wielkość liter, więc „tekst” nie będzie pasował do określonego „TEKST” |
| : ma () | $ („p: has (b)”) — wybiera wszystkie <p> elementy zawierające <b>. | Wybiera element, który zawiera inny element określony w nawiasach. Ten selektor uwzględnia również elementy podrzędne. |
| : rodzic | $ ("p: parent") - zaznacza wszystkie <p>, które coś zawierają. | Wybiera element, który zawiera cokolwiek |
| : pusty | $ ("p: empty") - zaznacza wszystkie puste <p> s. | Wybiera element, który nic nie zawiera. |
Każdy z przedstawionych selektorów wybierze konkretny element z kodu na obrazku poniżej.
Ten selektor jquery można również łączyć z innymi, na przykład $ ("p.mail: zawiera (" e-mail ")") zaznaczy wszystkie akapity z klasą "mail", które zawierają ciąg "e-mail".
Wybieranie członków według hierarchii
Ta metoda jest absolutnie identyczna z selektorami zCSS. Pozwala wybrać elementy na podstawie ich pozycji w stosunku do elementów siostrzanych w strukturze DOM. Tutaj lepiej jest od razu przeanalizować selektory jquery z przykładami.
| Przykład selektora | Opis selektora |
| $ ("ul> li") | Zaznacza wszystkie elementy ze znacznikiem <li>, które są bezpośrednimi potomkami (dziećmi) <ul> |
| $ ("ul a") | Zaznacza wszystkie elementy oznaczone <a>, które są potomkami dowolnego poziomu <ul> |
| $ ("h1 + p") | Wybiera element rodzeństwa oznaczony <p> zaraz po <h1> |
| $ ("li ~ a") | Wybiera element ze znacznikiem <a>, który następuje bezpośrednio po <li>, jednak może nie być tutaj rodzeństwem, ale musi mieć wspólnego przodka |
| $ ("li: pierwsze dziecko") | Wybiera element ze znacznikiem <li>, który jest pierwszym dzieckiem jego rodzica, na przykład <ul> |
| $ ("li: ostatnie dziecko") | Wybiera element oznaczony tagiem <li>, który jest ostatnim dzieckiem swojego rodzica, na przykład <ul> |
| $ („li: n-te dziecko (3)”) | Wybiera element oznaczony tagiem <li>, który jest trzecim dzieckiem swojego rodzica. Zamiast trójki oczywiście możesz użyć dowolnej innej liczby. |
| $ ("li: tylko-dziecko") | Wybiera te elementy znacznikiem <li>, którego rodzic ma tylko bezpośrednich potomków (dzieci) |
Osobno warto omówić selektor jquery li:n-te dziecko (n), ponieważ pozwala określić więcej niż konkretne liczby. Może więc wybrać wszystkie elementy parzyste, jeśli zamiast n określi stałą parzystą lub nieparzystą, określając nieparzystą. Możesz również użyć wyrażenia zamiast n, na przykład $ ("li:nth-child (2n + 3)") wybierze co drugi element, zaczynając od trzeciego bezpośredniego dziecka.
Praca z polami formularzy
Znacznik wejściowy ma wiele różnych odmian, w zależności od atrybutu typu, który ma działać. JQuery udostępnia specjalne selektory do wybierania różnych typów pól wejściowych.
| Selektor | Przykład selektora | Opis selektora |
| : przycisk | $ ("wejście: przycisk") | Zaznacza wszystkie przyciski |
| : pole wyboru | $ („wejście: pole wyboru”) | Pola wyboru |
| : plik | $ ("dane wejściowe: plik") | Pola przesyłania plików |
| : wizerunek | $ ("dane wejściowe: obraz") | Pola wprowadzania obrazu |
| : hasło | $ („wejście: hasło”) | Pola hasła |
| : radio | $ („wejście: radio”) | Przyciski radiowe |
| : Resetowanie | $ („wejście: zresetuj”) | Przyciski resetowania |
| : Zatwierdź | $ („dane wejściowe: prześlij”) | Przyciski przesyłania formularza |
| : tekst | $ ("dane wejściowe: tekst") | Pola na tekst |
| : Wejście | $ (: wejście") | Wszystkie pola formularza |
| : sprawdzone | $ („wejście: zaznaczone”) | Zaznaczone pola w polach wyboru lub przyciskach radiowych |
| : wybrane | $ ("opcja: wybrana") | Pozycje menu opcji |
| : niepełnosprawny | $ („wejście: wyłączone”) | Wyłączone pola formularza |
| : włączone | $ („wejście: włączone”) | Dołączone pola formularza |
Wybór pozycji
Selektor pozycji jQuery jest bardzo podobny do selektora hierarchii. Wybiera element według jego pozycji z listy elementów pasujących do poprzedniego warunku.
| Selektor | Opis |
| : pierwszy | Działa na pierwszym elemencie z listy pasujących |
| : ostatni, ubiegły, zeszły | Z ostatnią pozycją z listy |
| : równ (n) | Wybiera element z listy według jego indeksu (n). Uwaga! Elementy pasujące do warunku wyboru jQuery są numerowane od 0! |
| : lt () | Wybiera wszystkie elementy z listy aż do elementu o indeksie n |
| : gt () | Wybiera wszystkie elementy z listy, które są po elemencie o indeksie n |
| : parzysty | Wybiera elementy o parzystym numerze indeksu |
| : dziwne | Wybiera elementy z nieparzystym indeksem |
Inne selektory
Tych selektorów nie można dołączyć dodowolna grupa, ale nie mniej ważne. Na przykład selektor: not (), który można nazwać wartością logiczną, umożliwia „odwrócenie” warunku lub jego części, wybierając spośród nieodpowiednich warunków.
Przydatny jest również: ukryty selektor, który rozszerzy element obrazu 0x0 px na cały ekran, na przykład poprzez naciśnięcie przycisku.
| Selektor | Opis |
| : nie () | Wybiera elementy, które nie pasują do warunku podanego w nawiasach |
| : animowany | Wybiera elementy aktualnie animujące jQuery |
| : ukryty | Wybiera elementy z właściwością wyświetlania:none, type = "ukryty", o wysokości i szerokości 0px. Dotyczy również elementów zawierających elementy ukryte w jeden z powyższych sposobów. Uwaga! Element z widocznością ustawioną na „ukryty” nie zostanie uwzględniony w jquery select |
| : widoczny | Odwrotnie: ukryty |
| : nagłówek | Wybiera elementy h1, h2, h3, h4, h5 i h6 |
Jaki jest najlepszy sposób korzystania z selektorów?
Optymalizacja strony jest ważnym zadaniem, ponieważ odjakość jego wykonania zależy od obciążenia serwera, wygody użytkownika, a także czasu odpowiedzi interfejsu. Napisano wiele książek na temat optymalizacji skryptów w jQuery i ogólnie w JavaScript, ale wykraczają one poza zakres tego artykułu. Podamy tylko kilka prostych wskazówek, które znacząco zwiększą wydajność skryptów przy wyborze przedmiotów.
- Spróbuj poradzić sobie z podstawowymi selektorami jQuery.
- Wybierając wiele pozycji do przetworzeniaspróbuj połączyć je w jakąś grupę i nie wybieraj każdego z osobna. Można to zrobić za pośrednictwem klasy lub za pomocą bardziej szczegółowych selektorów.
- Korzystając z selekcji według pozycji, postaraj się maksymalnie zminimalizować listę, z której będzie dokonywany wybór - znacznie zmniejszy to szybkość odnajdywania pożądanego elementu.
Przykładowy skrypt z jQuery i jego selektorami:
Wniosek
Teraz, gdy znasz już absolutnie wszystkie selektory z jQuery, mamy nadzieję, że przykłady pomogły Ci zrozumieć, jak zbudować pożądany warunek z kilku różnych selektorów.
