Jest to pierwszy z planowanego cyklu artykułów na temat biblioteki jQuery. Celem cyklu jest przybliżenie możliwości biblioteki, przedstawienie jej użycia w sposób prosty i przystępny nawet dla osób niedoświadczonych w programowaniu. Przystępując do lektury tego kursu czytelnik powinien jednak mieć podstawową wiedzę w zakresie HTML i CSS. Zaczynamy!

Biblioteka jQuery to jeden z najlepszych projektów ułatwiających pracę w Java Script. Od swojego powstania w 2006r. do dziś projekt zaskarbił sobie sympatię twórców Front-endów i firm tworzących webaplikacje. Zminimalizowany kod źródłowy waży niecałe 38kb, zatem za projektem stoją wydajność i niezawodność.

Rozpoczynamy pierwszy projekt

Zacznijmy od przygotowania środowiska do pracy. W tym celu utworzymy folder a w nim trzy pliki:

  • index.html - plik główny zawierający szkielet dokumentu
  • styl.css - kaskadowy arkusz stylu
  • skrypy.js - plik zawierający kod naszego skryptu

Taka struktura pozwala nam odseparować od siebie szkielet (HTML), styl (CSS) i akcje (JavaScript). Na początku zajmiemy się plikiem index.html. Nadajmy mu następującą treść:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
    <title>Strona główna</title>
    <link rel="stylesheet" href="styl.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="skrypty.js"></script>
  </head>
  <body>
    <h1>Nagłówek strony</h1>
    <p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

Omawiając pokrótce treść dokumentu. W sekcji <head> w kolejności występowania umieściliśmy:

  • Deklarację kodowania znaków
  • Tytuł strony
  • Odwołanie do arkusza stylu
  • Podpięcie biblioteki jQuery
  • Podpięcie naszego pliku ze skryptami

Bardzo ważnym jest, aby wywołanie jQuery poprzedzało wywołanie naszego skryptu, w przeciwnym wypadku nasz skrypt nie zadziała.

Przejdźmy do pliku styl.css :

html, body{
	margin:0px;
	padding:0px;
	background:#000;
	color:#FFF;
}

Na razie nie mamy potrzeby nadawać wyrafinowanego stylu naszej stronie. Usunęliśmy jedynie marginesy i padding, zmieniliśmy kolor tła na czarny a czcionki na biały. Czas przejść do najważniejszego w kontekście kursu pliku: skrypty.js:

$(document).ready(
	function(){
		alert("Mój pierwszy kod w jQuery");
	}
);

Pierwsze kroki w jQuery

Zanim przejdziemy do wyjaśnienia kodu warto przytoczyć składnię obowiązującą w bibliotece jQuery. Prawie każde wywołanie metody z biblioteki będzie miało postać:

$("SELEKTOR").metoda(argumenty);

Gdzie:

  • znak $ reprezentuje odwołanie do biblioteki, można go zastąpić przez: jQuery
  • “Selektor” to łańcuch znaków opisujący obiekty (znaczniki html wraz z ich klasami/ID), do których chcemy zastosować metodę
  • metoda to działanie jakie jQuery ma wykonać na naszym obiekcie/grupie obiektów
  • argumenty to oddzielona przecinkami lista parametrów metody

Nasz kod zawiera tylko jedno wywołanie biblioteki jQuery. Jako selektor używamy odwołania (referencji) do dokumentu (naszej strony). Metoda ready zostaje wywołana przez jQuery w momencie kiedy strona jest w pełni gotowa. Jako argument dla metody ready podajemy funkcję anonimową, w jej ciele zawierać będziemy dalsze działania. Użycie ready jest praktyką standardową i wykorzystywaną w niemal każdym skrypcie jQuery.

Ciało naszej anonimowej funkcji zawiera jedynie wywołanie alertu, standardowej funkcji JavaScript - wyświetla ona okienko o treści zadanej jako argument (tu “Mój pierwszy kod w jQuery”). Od tej chwili każdy dokument jQuery, który będziemy tworzyć powinien mieć następującą formę:

$(function(){
	//Tutaj zamieść kod, który zostanie wykonany kiedy strona będzie w pełni gotowa w przeglądarce
});

Jest to skrócona forma odpowiadająca dokładnie wywołaniu z metodą ready.

Zaczynamy zabawę

Dotychczas poznaliśmy absolutne podstawy konieczne do rozpoczęcia pracy. Teraz przystąpimy do zapoznania się z zagadnieniami związanymi bezpośrednio z jQuery.

Przeglądarka internetowa (która jest środowiskiem wykonawczym dla jQuery) poza renderowaniem stron obsługuje również zdarzenia. JQuery w bardzo przystępny sposób pozwala obsługiwać zdarzenia, czyli reagować na “bodźce” przeglądarki. Ostatni w tej części poradnika przykład pokaże nam, jak zareagować na kliknięcie w Nagłówek strony i zareagować zmianą koloru tekstu Lorem ipsum dolor …. Kod HTML i CSS pozostają bez zmian. Zajmijmy się plikiem skrypty.js:

$(function(){
	$("h1").click(function(){
		$("p").css("color","#F00");
	});
});

Przejdźmy do analizy:

  • Pierwsza i ostatnia linia są już znane: zaczynamy nasze działania dopiero, gdy dokument jest wczytany
  • Linia druga, analizując według schematu:
  • Selektorem jest "h1"
  • Wywołujemy metodę click, czyli
  • Argumentem jest anonimowa funkcja - jaki jest jej cel powiemy za chwilę

W drugiej linijce reagujemy na zdarzenie click czyli kliknięcie w obiekty (w naszym dokumencie tylko jeden) wywołaniem funkcji podanej jako argument.

  • Linijka trzecia to ciało anonimowej funkcji będącej argumentem. Mówiąc wprost jest to zestaw instrukcji, który zostanie wykonany po kliknięciu na obiekt h1. “Zestaw” tym razem składa się z jednego wywołania. Nadaje ono wszystkim odnalezionym w dokumencie obiektom p właściwość css color:#F00 czyli ustawia kolor tekstu na czerwony.

Na tym zakończymy pierwszy artykuł z cyklu wprowadzenia do jQuery. W kolejnym artykule zapoznamy się dokładniej z możliwościami jQuery na przykładzie bardziej rozbudowanych dokumentów.

Do lepszego zrozumienia powyższego artykułu polecam natomiast następujące źródła:

Zapraszam do zapoznania się z kolejną częścią serii Podstawy jQuery.