70-480 – Wyszukiwanie elementów przy użyciu selektorów arkusza CSS i kwerendy jQuery

70-480

Wybór odpowiedniego selektora w celu odwołania do elementu; definiowanie selektorów elementu, stylu i atrybutu; wyszukiwanie elementów przy użyciu pseudo-elementów i pseudo-klas (np. :before, :first-line, :first-letter, :target, :lang, :checked, :first-child).



Przedostatnim tematem dotyczącym egzaminu 70-480 będzie biblioteka jQuery. Nakłada ona na czysty język JavaScript (Vanilla) pewną warstwę abstrakcji oraz udostępnia API, które nie dość tego, że jest znacznie bogatsze i prostsze niż standardowe metody dostępu do elementów DOM, to wspiera wiele różnych wersji przeglądarek. Każdy kto zetknął się z pisaniem kodu JavaScript z pewnością słyszał o jQuery, więc dzisiejszy wpis będzie krótki, lecz treściwy.

Selektory CSS

Wyszukiwanie elementów jQuery jest bardzo podobne do nakładania styli poprzez stosowanie selektorów dostępnych w CSS. Spójrzmy na te podstawowe:

  • * – pobranie wszystkich elementów
  • #id – id elementu (pamiętajmy, że tylko jeden element na stronie może posiadać takie samo id)
  • .class – wszystkie elementy, które posiadają klasę class
  • .class1, .class2 – wszystkie elementy, które  mają ustawioną klasę class1 lub class2

Dzięki selektorom zależnym jesteśmy w stanie odwoływać się do poszczególnych elementów, które znajdują się w pewnej hierarchii względem innych elementów:

  • parent child – wszystkie elementy child, które są potomkami elementu parent, bez względu na stopień pokrewieństwa
  • parent > child – to samo co wyżej, ale w tym wypadku elementy child muszą być bezpośrednimi potomkami parent
  • element + next-element – wybranie elementu next-element, który występuje zaraz za elementem element
  • element ~ siblings – wszystkie elementy siblings, które są rodzeństwem dla element

Możemy również odwoływać się do poszczególnych atrybutów, a nawet ich wartości:

  • [attr=] – znak równości, więc wartość atrybutu musi równać się podanemu wyrażeniu
  • [attr!=…] – wartość atrybutu różna od podanego wyrażenia
  • [attr$=…] – wartość atrybutu kończyć się musi według podanego wyrażenia
  • [attr^=…] – wartość atrybutu zaczynać się musi według podanego wyrażenia
  • [attr~=…] – wartość atrybutu zawierać musi podane słowo
  • [attr*=…] – wartość atrybutu zawierać musi podane znaki

Mamy poza tym szereg pseudo-selektorów. Najpopularniejsze z nich to:

  • :hover – element wskazywany właśnie przez wskaźnik myszy
  • :focus – element, który aktualnie jest aktywny
  • :first-child – pierwsze dziecko danego elementu
  • :odd – wszystkie nieparzyste elementy w liście
  • :even – wszystkie parzyste elementy w liście
  • :disabled – wyłączonynieaktywny element

Pełna lista selektorow CSS na stronie w3schools.com – http://www.w3schools.com/cssref/css_selectors.asp

Wyszukiwanie elementów DOM przy pomocy jQuery

Podobnie sprawa wygląda w jQuery. Mają co dyspozycji utworzony obiekt jQuery / $ jesteśmy w stanie bardzo szybko wyłuskiwać poszczególne elementy ze struktury HTML.

// id
$('#myId');

// klasa
$('.myClass');

// atrybut
$('input[name="first_name"]');

// zagnieżdżone elementy
$('#contents ul.people li');

// pseudo - selektory
$('a.external:first');
$('tr:odd');
$('#myForm:input');
$('div:visible');
$('div:gt(2)');
$('div:animated');

Pełna lista dostępnych selektorów jQuery: http://api.jquery.com/category/selectors/

Na w3schools.com znajdziemy też ciekawe demo, które w interaktywny sposób unaoczni nam możliwości jQuery jeśli chodzi o znajdowanie elementów w strukturze HTML: http://www.w3schools.com/jquery/trysel.asp