Miesięcznik informatyków i menedżerów IT sektora publicznego

Paweł Ziółkowski

Podstawy pracy z jQuery

Biblioteka jQuery to narzędzie, które sprawi, że praca z JavaScript stanie się dużo łatwiejsza. Ten rozwijany od 10 lat zestaw funkcji jest szeroko wykorzystywany w pracy administratorów stron, a nawet potrafi zastąpić niektóre frameworki.

Obecne strony WWW są dynamiczne, a ich działanie oraz wygląd zmieniają się po wczytaniu w oknie przeglądarki. Możemy dostać powiadomienie o nowym artykule, dodać nowy wpis do prezentowanej listy lub nawet zmienić układ elementów na stronie. Takie działania umożliwia język JavaScript (JS), który udostępnia funkcje do manipulacji stroną. Często wykonywaną czynnością jest znalezienie jednego elementu i zmiana jego zawartości lub wyglądu. Wykorzystujemy do tego funkcję getElementById wbudowaną w każdą przeglądarkę. Przykładowy kod, który pobierze element z drzewa DOM z identyfikatorem lista oraz doda do niego klasę CSS, wygląda tak:

let elem = document.getElementById(‘lista’);
elem.className += ‘ czarneTlo’;

Jeżeli często sięgamy po ten kod, możemy stworzyć odpowiednią funkcję lub nawet zapisać w innym pliku i dołączyć do sekcji script:

(function() {
document.dodajKlaseCzarneTlo = function(eid) {
let elem = document.getElementById(eid);
elem.className += ‘ czarneTlo’;
}
})();

Powyższy kod dodaje do obiektu document nową metodę, którą można wywołać w każdym miejscu na stronie. Zestaw użytecznych funkcji możemy rozbudowywać, modyfikować i ulepszać z biegiem czasu. Tak właśnie powstała biblioteka jQue­ry (jQ), która jest zestawem wielu funkcji, ułatwiających pisanie kodu JavaScript. Jedną z najważniejszych jest $() – funkcja, której argumentem jest selektor, czyli sposób w jaki chcemy odnaleźć dany element, i zwracająca wyszukane na stronie elementy pasujące do niego. Innymi słowy, ktoś stworzył plik js z funkcją $, a my jedynie musimy zamieścić ten plik przed naszym kodem, aby z niego korzystać.

Biblioteka jQuery zapewnia szybszy dostęp do kodu JavaScript. W porównaniu z czystym JS możemy użyć mniej kodu (zgodnie z zasadą: „write less, do more”). Takie rozwiązanie nazywa się w programowaniu lukrem składniowym (syntactic sugar) i polega na zastąpieniu jednego kodu innym, krótszym. Tym właśnie jest funkcja $, która wywołuje za nas odpowiednie funkcje JS. Programista, chcąc wyszukać element po identyfikatorze lub klasie, nie musi sam wywoływać metod document.getElementById, czy też document.getElementsByClassName (lub innych), wystarczy, że użyje uproszczonego zapisu z wykorzystaniem znaku $. Użycie selektora #id jQuery wywoła metodę getElementById, klasy – getElementsByClassName lub nazwy elementu HTML – getElementsByTagName.

Początek pracy

Aby skorzystać z jQuery, należy dołączyć jej pliki do naszej strony. Możemy to zrobić, pobierając je lub wskazując ich lokalizację na innym serwerze. Po wejściu na stronę jquery.com w zakładce Download zobaczymy wszystkie możliwości instalacji. Nas interesuje link Download the compressed, production jQuery 3.2.1, czyli pobranie pliku js, który został skompresowany (wersja stabilna). Dołączenie tego pliku do naszej strony trzeba wykonać tak, jak każdy inny plik JavaScript, wstawiając odpowiedni wpis w sekcji HEAD:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

Jeżeli wybierzemy opcję z wykorzystaniem serwera CDN, należy w miejsce lokalizacji pliku (atrybut src) wprowadzić zdalny adres pliku, który otrzymamy po kliknięciu na odpowiedni link na stronie code.jquery.com (strona ta wygeneruje dla nas cały kod do umieszczenia na naszej stronie).

Cele jQ

Zastosowanie jQuery jest szerokie. Główne cele zostały wyszczególnione na stronie z API (api.jquery.com):

  • document traversal – wybór elementów z DOM i poruszanie się po nim,
  • manipulation – zmiana elementów DOM (atrybutów, stylów),
  • event handling – obsługa zdarzeń (kliknięcia, wciskanie klawiszy),
  • animation – animacje,
  • AJAX – zapytania asynchroniczne.

Każda z powyższych grup oferuje własny zestaw funkcji, które zostały wymienione po lewej stronie dokumentacji biblioteki wraz z jej pozostałymi możliwościami. Podstawą pracy z jQuery jest wskazanie elementu DOM na naszej stronie za pomocą odpowiedniego selektora i wywołanie na tym elemencie funkcji, najczęściej przy użyciu tzw. method chainingu:

$(‘img’).prop(‘src’);

[...]

Autor jest absolwentem Uniwersytetu Ekonomicznego we Wrocławiu, pracuje jako informatyk w Urzędzie Gminy w Miękini.

Pełna treść artykułu jest dostępna w papierowym wydaniu pisma. Zapraszamy do składania zamówień na prenumeratę i numery archiwalne.
 
 

Polecamy

Biblioteka Informacja Publiczna

Specjalistyczne publikacje książkowe dla pracowników administracji publicznej

więcej