Wpis ten zapoczątkuje kilkuczęściową serie kursu jQuery. Kurs będzie przeznaczony głównie dla osób chcących szybko zacząć korzystać z tej biblioteki. Przed rozpoczęciem dalszej lektury zalecam zapoznanie się z moim kursem JavaScript oraz HTML. Przyda się także podstawowa znajomość stylów CSS.

Czym jest jQuery?

jQuery jest zaawansowaną, prostą w użyciu, biblioteką napisaną w JavaScript. Dzięki niej przy niewielkim nakładzie pracy możemy tworzyć widowiskowe efekty i animacje na naszych stronach WWW. jQuery poza tworzeniem animacji i możliwości operacji na drzewie DOM pozwala także na proste korzystanie z technologii AJAX i obsługi przeróżnych zdarzeń.

Instalacja

Integracja biblioteki z naszą stroną ogranicza się do pobrania najnowszej wersji jQuery z oficjalnej strony i umieszczenia do niej odsyłacza w segmencie <head> strony.

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

Od teraz możemy korzystać ze wszystkich funkcji dostępnych w bibliotece w bardzo podobny sposób, w jaki korzysta się z podstawowych funkcji JavaScript.

Składnia i operacje na drzewie DOM

<html>
<head>
	<title>Kurs jQuery #1 example 1</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		alert('Hello World!');
	});
	</script>
</head>
 
<body>
</body>
</html>

DEMO

Jeśli na ekranie wyświetliło nam się okienko – wszystko działa.

Składnia biblioteki jest bardzo prosta do zapamiętania. Znak dolara ($) jest aliasem dla funkcji jQuery(). Pierwsza linijka naszego kodu mogłaby więc wyglądać też w taki sposób.

jQuery(document).ready(function() {

Stosowanie znaku dolara ma przede wszystkim znaczenie estetyczne. Funkcja ta odpowiada za wyszukiwanie i zwracanie nam danego selektora (identyfikatora, klasy, znacznika) w drzewie DOM i operacji na nim.

W powyższym przykładzie na naszym dokumencie HTML document wykonujemy funkcje ready(), a następnie stosujemy alert() do wyświetlenia tekstu. alert() wykona się dopiero wtedy, kiedy całe drzewo DOM będzie załadowane i będzie można wykonywać na nim operacje. Za to ‚zabezpieczenie’ odpowiada właśnie ready(). Każdy następny kod będziemy wykonywać w podobny sposób.

W skrócie można to opisać tak, że alert() wykona się dopiero po załadowaniu całej strony.

Przejdźmy do bardziej praktycznego przykładu. Spróbujmy załadować tekst do stworzonego przez nas diva przy pomocy jQuery.

<html>
<head>
	<title>Kurs jQuery #1 example 2</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$('#identyfikator').text("Hello World!");
	});
	</script>
</head>
 
<body>
	<div id="identyfikator"></div>
</body>
</html>

DEMO

Przy pomocy $() odwołujemy się do znacznika o identyfikatorze identyfikator i poprzez użycie funkcji text() ładujemy do niego tekst podany w parametrze.

jQuery ma to do siebie, że pozwala na swobodne łączenie funkcji ze sobą.

$(selektor).funkcja(parametry).funkcja2(parametry);

Dzięki temu przy pomocy jednego odwołania można wykonać kilka funkcji jak wyświetlenie tekstu i zmiana jego koloru przy pomocy CSS.

<html>
<head>
	<title>Kurs jQuery #1 example 3</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$('#identyfikator').text("Hello World!").css("color", "red");
	});
	</script>
</head>
 
<body>
	<div id="identyfikator"></div>
</body>
</html>

DEMO

Do poprzedniego przykładu dodaliśmy jedynie funkcje css() przyjmującą dwa parametry. Pierwszy z nich to właściwość, a druga wartość w języku CSS. W rezultacie na ekranie pojawi nam się czerwony napis „Hello World!” w podanym divie.

Do klas, identyfikatorów oraz znaczników możemy odwoływać się w taki sam sposób jak w arkuszu CSS.

<html>
<head>
	<title>Kurs jQuery #1 example 4</title>
	<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function() {
		$('#identyfikator').css("color", "red");
		$('.klasa').css("color", "blue");
		$('span').css("color", "green");
	});
	</script>
</head>
 
<body>
	<div id="identyfikator">Tekst</div>
	<div class="klasa">Tekst2</div>
 
	<p id="paragaraf">Paragraf</p>
	<p class="klasa">Akapit <span>span</span></p>
</body>
</html>

Przed sprawdzeniem wyniku działania tego skryptu zastanów się – jakie kolory będzie miał tekst w poszczególnych znacznikach?

DEMO

Słowem zakończenia

Tak oto dobrnęliśmy do końca wprowadzenia w świat jQuery. Korzystanie z $() i umiejętność dopisywania innych funkcji jest niewątpliwie całym sekretem tej ogromnej biblioteki. W następnej części kursu zajmiemy się tworzeniem płynnych animacji tekstu oraz obsługą zdarzeń.

Przeczytaj także: