Co jest potrzebne i jak jest zapisany selektor jQuery?

Nowoczesny projektant stron internetowych powinien nie tylko posiadaćpodstawy HTML, CSS i JavaScript, ale także możliwość pracy w bibliotece jQuery, która koncentruje się na interakcji JavaScript z dokumentami HTML. Oznacza to, że pozwala on na szybki dostęp i manipulowanie dowolnymi elementami DOM (interfejsu programu, który otwiera dostęp do zawartości plików HTML). Głównymi jednostkami strukturalnymi tej biblioteki są komendy. Aby użyć tej lub innej komendy, potrzebujesz selektora jQuery.

Selektory formuł w bibliotece jQuery

Selektory w jQuery są oparte na selektorach używanych w CSS. Są one niezbędne do wyboru elementów pliku HTML w celu użycia tych lub innych metod do manipulowania nimi (komend) za ich pomocą. Wyszukiwanie za pomocą selektora odbywa się za pomocą funkcji $ (). Na przykład $ ("div").

Selektory można klasyfikować w zależności od metody wyboru elementów:

podstawowy;
według atrybutu;
według hierarchii;
według treści;
według pozycji;
wybór pól formularza;
inni.

Główne selektory

W 90% przypadków podczas pracy z tą biblioteką używany jest selektor jQuery należący do głównej grupy. Wszystkie są dość proste i proste. Rozważ każdy z nich:

* - wybiera wszystkie elementy strony, w tym nagłówek, treść itp .;
p / div / sidebar / ... - wybiera wszystkie elementy związane z danym znacznikiem (tj. do p.div, sidebar, itp.);
.myClass / p.myClass - wybiera elementy o podanej nazwie klasy;
# myID / p. # myID - wybiera jedną pozycję o podanym ID.

Podajmy przykład. Załóżmy, że musimy wybrać wszystkie elementy strony z klasą par, rekord będzie wyglądał następująco: $ (.par). Jeśli potrzebne są tylko elementy p tej klasy, wpisz: $ (p.par).

Selektory atrybutów

Główny selektor jQuery może być użyty, jeślimusimy wybrać element należący do klasy, która ma identyfikator lub wybrać wszystkie elementy strony. Istnieją jednak przypadki, gdy żądany element nie ma klasy lub ID. Do tego służą selektory atrybutów. Pozwalają one dokonać wyboru dla jakiegoś atrybutu elementu HTML, na przykład href lub src. Ten atrybut jest zapisany w nawiasach kwadratowych [].

Najprostszy przykład: $ ([src]) - wybiera wszystkie elementy, które mają atrybut src. Możesz zawęzić obszar selekcji, ustawiając atrybut na określoną wartość: $ ([src = "value"]).

Możesz użyć kilku w jQueryselektory, jeśli to konieczne, zawęzić obszar selekcji. Na przykład $ (p [color = blue] [size = 12]) - wybrane zostaną tylko te elementy p, które mają kolor cyjan i rozmiar 12.

Selektory zawartości

W przypadku, gdy nie można wybrać elementów według atrybutów lub głównych selektorów, warto odnieść się do ich treści. W sumie istnieją 4 selektory tego typu:

: zawiera - wybiera elementy zawierające określony tekst;
: has - wybiera elementy, które zawierają inne elementy charakterystyczne dla danego ciągu;
: parent - wybiera elementy, które zawierają dowolne inne;
: empty - wybiera pozycje, które nie zawierają żadnych innych.

Podajmy przykład. Aby wybrać wszystkie elementy div zawierające tekst Hello, musisz napisać $ (div: contains ("Hello")).

Selektory według hierarchii

Istnieje inny sposób wyboru elementów w jQuery,mianowicie zgodnie z ich hierarchią (czyli relacją między sobą na stronie HTML). Jest ich dużo, dlatego prezentujemy dwa najpopularniejsze: "dziecko" i "potomek".

W pierwszym przypadku wybrane są elementysą bezpośrednimi potomkami (dzieckiem) danego elementu (przodka). Na przykład, aby wybrać elementy listy w klasie światła, które są dziećmi listy odtwarzania, musisz napisać: $ (ul # nav> li.light).

Drugi przypadek jest bardziej ogólny. Można wybrać tutaj pośrednich potomków jakiegoś elementu. Na przykład, aby wybrać łącza na liście nav, napiszemy: $ (ul # nav a).

Tak więc, w jQuery, elementy mogą być wybierane na różne sposoby przy użyciu parametrów takich jak klasa, ID, atrybuty, zawartość lub hierarchia elementów dokumentu HTML.