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.
[codesyntax lang=”javascript”]
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
[/codesyntax]
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
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
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.
[codesyntax lang=”javascript”]
jQuery(document).ready(function() {
[/codesyntax]
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.
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
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.
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
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.
[codesyntax lang=”javascript”]
<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>
[/codesyntax]
Przed sprawdzeniem wyniku działania tego skryptu zastanów się – jakie kolory będzie miał tekst w poszczególnych znacznikach?
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ń.