Samouczek jQuery - Selektory  

Autor: Piotr Bubacz

Opublikowano: 2012-02-16

Podstawowym hasłem w jQuery jest „Znajdź element(y) i zrób coś z nim(i)”. W tym artykule poznamy podstawowe sposoby odnajdywania elementu/elementów na stronie.

Przed wykonaniem zadań powinieneś:

• posiadać podstawową wiedzę na temat JavaScript,
• wiedzieć, jak wskazać element za pomocą parametru id oraz class,
• posiadać wiedzę na temat struktury drzewa DOM.

Po wykonaniu zadań nauczysz się wskazywać elementy do edycji na stronie za pomocą jQuery.

Implementacja

Otwórz stronę internetową jTest.html w przeglądarce Internet Explorer 9, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to zapoznaj się z artykułem 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 zapoznanie się z podstawowymi informacjami na temat wskazywania elementów na stronie internetowej.

Efekt końcowy przedstawiony został na Rys. 1.

Rys. 1. Efekt końcowy.

Wskazywanie elementów języka HTML

W języku HTML zostały zdefiniowane podstawowe znaczniki, które możemy użyć na naszej stronie. W celu zmiany wszystkich obiektów opisanych jednym znacznikiem, np. wszystkie akapity na stronie, musimy odwołać się w jQuery do konstrukcji: $('znacznik'), np. wszystkie akapity na stronie: $('p').

Akapity tekstu zaznaczamy na niebiesko, elementy list na zielono, a w kontrolkach input kolor tekstu zmieniamy na czerwony.

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

$('p').css('color', 'blue');

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

4. Wciśnij ENTER.
5. Sprawdź, czy treść znajdująca się w znaczniku <p> została oznaczona na niebiesko.
6. 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:

$('li').css('color', 'green');

7. 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:

$('input').css('color', 'red');

8. Wpisz w polu tekstowym, po „Podaj tekst”, napis: To jest czerwony tekst.
9. Sprawdź, czy strona wygląda tak, jak na Rys. 3.

Rys. 3. Kolorowanie tekstu elementów na stronie.

Wskazywanie pojedynczych elementów na stronie internetowej

W celu wskazania na stronie pojedynczego elementu możemy wykorzystać jego id. Podobnie, jak w przypadku CSS w jQuery trzeba użyć konstrukcji: $('#ID'), gdzie ID odpowiada właściwości id przypisanej do elementu na stronie.

W celu powiększenia rozmiaru wyświetlanego tekstu w znaczniku input type="button" należy wykonać następujące czynności:

1. Wpisz w wierszu, znajdującym się w prawym dolnym rogu okna przeglądarki (oznaczonym 2 na Rys. 2.):

$('#butWyslij').css('font-size','40px')

2. Sprawdź, czy strona wygląda tak, jak na Rys. 1.

Informacja

W podobny sposób możemy wskazać elementy opisane wspólną właściwością class, wykorzystując konstrukcję $('.class'), gdzie class to nazwa przypisana do parametru class.

Podsumowanie

W tym artykule nauczyliśmy się wskazywać elementy na stronie za pomocą jQuery.

W kolejnym artykule nauczymy się ograniczać wyszukiwane elementy za pomocą filtrów.

 

---