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. Pozwala to na szybki dostęp i manipulowanie dowolnymi elementami DOM (interfejsem programu otwierającym dostęp do zawartości plików html). Głównymi jednostkami strukturalnymi tej biblioteki są zespoły. Aby zastosować tę lub inną komendę, potrzebujesz selektora jQuery.

selektor jquery

Formuła selektorów w bibliotece jQuery

Selektory JQuery są oparte na tych używanych w CSS. Są one potrzebne do wybrania elementów pliku HTML, aby wykorzystać je do wywołania jednej lub drugiej metody manipulowania nimi (zespół). Wyszukiwanie przez selektor odbywa się za pomocą funkcji $ (). Na przykład $ ("div").

Selektory można sklasyfikować zgodnie ze sposobem wyboru elementów:

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

Podstawowe 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 zrozumiałe. Rozważmy każdą z nich:

  • * - wybiera wszystkie elementy strony, w tym głowę, ciało itd .;
  • p / div / sidebar / ... - wybiera wszystkie elementy związane z danym znacznikiem (np. p.div, sidebar itp.);
  • .myClass / p.myClass - wybiera elementy o podanej nazwie klasy;
  • # myID / p. # myID - wybiera jeden element o podanym ID.

Dajmy przykład. Powiedzmy, że musimy wybrać wszystkie elementy strony z klasą par, wpis będzie wyglądał następująco: $ (.par). Jeśli potrzebne są tylko elementy p tej klasy, napiszemy: $ (p.par).

elementy jquery

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. Czasami jednak pożądany element nie ma klasy ani ID. Dlatego istnieją selektory według atrybutów. Pozwalają one próbkować na niektórych atrybutach 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 próbki, ustawiając atrybut na konkretną 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 są niebieskie i rozmiar 12.

Selektory zawartości

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

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

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

wiele selektorów jQuery

Selektory hierarchii

Jest jeszcze jeden sposób wybierania elementów w jQuery,a mianowicie - według ich hierarchii (czyli relacji między sobą na stronie HTML). Jest ich dużo, więc oto są dwie z najbardziej popularnych: "dziecko" i "dziecko".

W pierwszym przypadku wybrane elementysą bezpośrednimi potomkami (dzieckiem) danego elementu (przodkiem). Na przykład, aby wybrać elementy listy w lekkiej klasie, która jest dzieckiem listy odtwarzania, musisz napisać: $ (ul # nav> li.light).

Drugi przypadek jest bardziej ogólny. Tutaj również można wybrać pośrednich potomków elementu. Na przykład, aby wybrać łącza na liście nawigacyjnej, 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.

</ p>