Samouczek jQuery - Filtry  

Autor: Michał Ręczkowicz

Opublikowano: 2012-02-17

W celu sprawnego korzystania z biblioteki jQuery musimy, oprócz wiedzy o selektorach, poznać filtry. Selektory zwracają obiekty spełniające kryteria, a filtry przetwarzają wyniki, które zwracane są przez selektory, z zamiarem ich dalszego oczyszczania, wyłuskania danych.

Przed wykonaniem zadań powinieneś:

• wiedzieć, jak tworzyć strony internetowe,
• posiadać podstawową wiedzę na temat JavaScript,
• posiadać wiedzę na temat struktury drzewa DOM.

Po wykonaniu zadań nauczysz się:

• używać podstawowych filtrów

Implementacja

W przeglądarce Internet Explorer 9 otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to zobacz Jak przygotować stronę samouczka. W linijce przed elementem </body> umieść następujący kod:

<script type="text/javascript"  src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

Naszym zadaniem będzie obsługa podstawowych filtrów.

Praca z filtrami

Sprawdzimy zastosowanie filtrów i zobaczymy, jak one działają.

1. W przeglądarce Internet Explorer 9 otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip.
2. Wciśnij klawisz F12 lub wybierz Narzędzia -> F12 Narzędzia deweloperskie.
3. Kliknij w oknie na zakładkę Script (oznaczoną 1 na Rys.2.), a w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:

$('p:first').css("border", "2px solid blue");

Rys. 1. Narzędzia programistyczne do JavaScript oraz jQuery w Internet Explorer 9.

4. Wciśnij ENTER.
5. Zaobserwuj, że pierwszy znacznik <p> został oznaczony ramką.

Informacja

W ramach ćwiczeń, przedstawione operacje możesz wykonywać również na innych elementach drzewa DOM. My będziemy pracować głównie na znaczniku <p>. Regułę zaznaczającą możesz modyfikować wedle potrzeb, wykorzystując znajomość CSS .css("border", "2px solid blue"); Jeżeli w przeglądarce nie wyświetla się żaden efekt, to: —   Sprawdź, czy aktywna treść nie jest zablokowana, —   Odśwież przeglądarkę i ponów działanie. Jedynym rodzajem selektora, jaki musisz znać w celu wykonania tych zadań, jest selektor nazwaTag, co oznacza nazwę selektora np. p, a, li itd.

6. Zastosowanie :Last

• w wierszu w prawym dolnym rogu wpisz:

jQuery('p:last').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że ostatni znacznik <p> został oznaczony ramką.

7. Zastosowanie :even

• w wierszu w prawym dolnym rogu wpisz:

jQuery('p:even').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że parzyste znaczniki <p> zostały oznaczone ramką. Indeksowanie rozpoczyna się od 0, zero jest parzyste.

8. Zastosowanie :odd

• w wierszu w prawym dolnym rogu wpisz:

jQuery('p:odd').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że nieparzyste znaczniki <p> zostały oznaczone ramką.

9. Zastosowanie :eq(n)

• w wierszu w prawym dolnym rogu wpisz:

jQuery('p:eq(3)').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że element o podanym numerze (3) został oznaczony ramką. Pamiętaj, że indeksowanie zaczyna się od 0, więc jest to czwarty element.

10. Zastosowanie :gt(n)

• w wierszu w prawym dolnym rogu wpisz:

jQuery('p:gt(2)').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że elementy o indeksie większym niż podany (2) zostały oznaczone ramką.

11. Zastosowanie :lt(n)

• w wierszu w prawym dolnym rogu wpisz:

jQuery('p:lt(2)').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że znaczniki o indeksie mniejszym niż (2) zostały oznaczone ramką.

12. Zastosowanie :header

• w wierszu w prawym dolnym rogu wpisz:

jQuery(':header').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że element nagłówkowy został oznaczony ramką. Dotyczy to wszystkich nagłówków typu H1, H2, H3 itd.

13. Zastosowanie :not(selektor)

• w wierszu w prawym dolnym rogu wpisz:

jQuery(':not(p)').css("border", "2px solid blue");

• wciśnij ENTER
• zaobserwuj, że zostały zaznaczone wszystkie elementy, które nie pasują do podanego wzorca.

14. Zastosowanie :parent

• w wierszu w prawym dolnym rogu wpisz:

jQuery('ul:parent').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że zostały zaznaczone elementy będące rodzicami.

15. Zastosowanie :contains(text)

• w wierszy w prawym dolnym rogu wpisz:

jQuery('p:contains(Lorem)').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że został zaznaczony element, który posiada słowo „Lorem”.

16. Zastosowanie :has(selektor)

• w wierszu w prawym dolnym rogu wpisz:

jQuery('ul:has(li)').css("border", "2px solid blue");

• wciśnij ENTER,
• zaobserwuj, że zostały zaznaczone elementy ul, które posiadają selektor li.

Podsumowanie

W tym artykule nauczyliśmy się posługiwać podstawowymi filtrami. Nabraliśmy wprawy w wykonywaniu ćwiczeń z wykorzystaniem narzędzia programistycznego, jakie udostępnia nam w przeglądarce Internet Explorer 9. Wiemy, jak w łatwy sposób odnosić się do odpowiednich elementów w strukturze DOM.

W kolejnym artykule nauczymy się edytować elementy.

 

---