119 Shares 8772 views

Dlaczego potrzebujemy i jak nagrywać selektor jQuery?

Nowoczesny web designer powinien nie tylko opanować podstawy HTML, CSS i JavaScript, ale również być w stanie pracować w bibliotece jQuery, który skupia się na interakcji JavaScript z HTML-dokumentów. Że pozwala na szybki dostęp do każdego elementu DOM (interfejs programowania aplikacji, który zapewnia dostęp do zawartości plików HTML) i manipulować nimi. Główne jednostki strukturalne biblioteki są zespołem. W celu zastosowania jednego lub drugiego zespołu, trzeba jQuery selektora.

Selektory wzorze: w bibliotece JQuery

Selektory w jQuery na podstawie stosowania w CSS. Są one konieczne, aby wybrać przedmioty plik HTML, aby wykorzystać je powodować te lub inne metody ich (zespołu) manipulacji. Wyszukiwanie odbywa się poprzez funkcję selektora $ (). Na przykład, $ ( 'div').

Selektory mogą być klasyfikowane w zależności od sposobu doboru elementów:

  • podstawowy;
  • przez atrybutu;
  • hierarchia;
  • treść;
  • od sytuacji;
  • wybór pól formularza;
  • innych.

Kluczowe selektorów

W 90% przypadków, w których za pomocą tej biblioteki jest stosowany JQuery selektor należącej do głównej grupy. Wszystkie z nich są dość proste i jasne. Rozważmy każdy z nich:

  • * – zaznacza wszystkie elementy strony, w tym głowy, ciała, itp.
  • p / div / Panel boczny / … – wybiera wszystkie elementy odnoszące się do z góry określonego znacznika (tj p.div, bocznym, etc …);
  • .myClass / p.myClass – wybiera elementy o określonej nazwie klasy;
  • # Myid / p # myid. – wybranie jednej pozycji z danym ID.

Oto przykład. Powiedzmy, że musimy wybrać wszystkie elementy na stronie z par wpisu klasy będzie w następujący sposób: (. Par) $. Jeśli konieczne tylko elementy p tej klasy, a następnie napisać: $ (p.par).

selektorów atrybutów

Można użyć jQuery głównego przełącznika, jeśli musimy wybrać element należącej do dowolnej klasy posiadającej ID lub wybrać wszystkie elementy na stronie. Istnieją jednak przypadki, gdy element ma klasy lub identyfikatora. Jest za to i istnieją pozycje według atrybutu. Pozwalają one dokonać wyboru na jakiegoś atrybutu z elementów HTML, takich jak href lub src. Ten atrybut jest napisane w nawiasach kwadratowych [].

Najprostszym przykładem: $ ([źródło]) – wybiera wszystkie elementy, które mają cechę src. Możliwe jest zawężenie próbki określając pewną wartość atrybutu: $ ([src = 'http: // strona / article / 132222 / wartość']).

Można użyć kilka selektorów JQuery jeśli chcesz zawęzić pole wyboru. Na przykład, $ (P [= niebieski kolor] [size = 12]) – wybiera się jedynie te elementy, P, które mają barwę niebieską i wielkości 12.

zawartość selektorów

W takim przypadku, jeśli nie można wybrać elementy oparte na podstawowych atrybutów lub selektorów, należy odnieść się do ich treści. W sumie jest tu 4 selektor tego typu:

  • : Zawiera – wybiera przedmioty zawierające określony tekst;
  • : Has – wybiera elementy, które zawierają inne elementy charakterystyczne dla linii;
  • : Jednostka – wybór elementów, które zawiera żadnego innego;
  • : Empty – wybiera elementy, które nie zawierają żadnych innych.

Oto przykład. Aby zaznaczyć wszystkie elementy div, zawierający tekst Hello, trzeba napisać $ (div: contains ( 'Hello')).

selektory hierarchia

Nie ma innego sposobu, aby wybrać elementy w jQuery, a mianowicie – w zależności od ich hierarchii (czyli stosunek siebie na stronie HTML). Wiele z nich, więc prezentujemy dwa z najbardziej popularnych, „dziecko” i „potomka”.

W pierwszym przypadku elementy są zaznaczone, które są potomkami (dzieci) danego elementu (przodka). Na przykład, aby wybrać elementy z listy w klasie światło, które jest lista nav dziecko, to trzeba napisać: $ (ul # nav> li.light).

Drugi przypadek – bardziej ogólnie. Można wybrać się tam i pośrednie potomkami elementu. Na przykład, aby wybrać linki w liście nav przepisać: $ (ul # nav a).

Tak więc, w JQuery elementy mogą być wybrany na różne sposoby, za pomocą takich parametrów jak klasy, ID, właściwości, zawartości lub hierarchia elementów HTML dokumentu.