„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łączony / nieaktywny 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
