W sieci istnieje bardzo dużo źródeł traktujących o jQuery – istnieją liczne wskazówki, przykładowe kody i cała masa pluginów do jQuery. Jednakże wciąż czuć lekki niedosyt całościowego potraktowania tematu od samego początku – od podstaw.
Zaczynając od dzisiaj w kolejnych artykułach będą się pojawiać kolejne części kursu jQuery – godzina dziennie z jQuery (szybki kurs). Zaczynając od podstaw wyjaśniane będą coraz to bardzie skomplikowane aspekty biblioteki jQuery i przedstawione zostaną możliwości jakie z sobą niesie.
Czego dowiesz się z artykułu?
- jak ściągnąć bibliotekę,
- jak wygląda składnia jQuery,
- jak zbudować pierwszą, działającą funkcję (animację).
Pierwszym, krokiem by zacząć przygodę z jQuery, jest oczywiście ściągniecie samej biblioteki. W tym celu należy wejść na stronę biblioteki jQuery i pobrać bibliotekę.
Na stronie, będziemy mieli dwie opcje do wyboru – wersję produkcyjną (w skompresowanej wersji), na której będziemy pracować w dalszej części artykułu, lub wersję developerską, która zajmuje znacznie więcej miejsca i wykorzystywana jest w momencie, gdy sami chcemy wprowadzać zmiany bezpośrednio w bibliotece jQuery.
W momencie, gdy mamy już ściągniętą bibliotekę jQuery, zabieramy się do programowania. Pierwszym krokiem, jaki musimy zrobić, jest dołączenie biblioteki do naszego dokumentu.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-
<html>
-
<head>
-
<title>Poznaj jQuery w 24 godziny – kurs jQuery</title>
-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
-
-
<script src="js/jquery-1.3.2.min.js" type="text/javascript"> </script>
-
-
</head>
-
<body>
-
-
</body>
-
</html>
Teraz nadszedł czas by zbudować naszą pierwszą funkcję. Załóżmy, że nasz skrypt, wykorzystujący jQuery, będzie po kliknięciu chował zawartość diva.W tym celu w pierwszej kolejności wstawimy element div na stronę i link, do którego zostanie przypisana akcja.
-
<body>
-
<div id="pojBox"></div>
-
<a href="#">Kliknij by zobaczyć jakie to proste</a>
-
</body>
Rezultat tego fragmentu kodu został pokazany poniżej – jak można się domyśleć w tej chwili jeszcze nic sie nie będzie wykonywało.
W dalszej kolejności dodamy plik kaskadowych styli CSS,
-
<head>
-
<title>Poznaj jQuery w 24 godziny – kurs jQuery</title>
-
<meta http-equiv="content-type" content="text/html; charset=utf-8">
-
-
<script src="js/jquery-1.3.2.min.js" type="text/javascript"> </script>
-
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
-
-
</head>
a następnie wzbogacimy element #pojBox o style.
-
#pojBox {
-
background-color:#7FEF40;
-
height:200px;
-
width:400px;
-
}
czego efektem będzie zielony box pokazany poniżej.
Nadszedł czas na dołączenie naszego skryptu pod jQuery. Tworzony nowy plik z rozszerzeniem .js i dołączamy do w sekcji nagłówka dokumentu w ten sam sposób jak w przypadku dołączania biblioteki jQuery.
-
<script src="js/jquery-1.3.2.min.js" type="text/javascript"> </script>
-
<script src="js/pierwsza_funkcja.js" type="text/javascript"> </script>
-
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
Oczywiście chcemy odpalić nasz skrypt dopiero w momencie, kiedy wszystkie elementy na stronie zostaną załadowane, ponieważ próby wpływania na elementy których jeszcze nie ma skutkowały by błędem ze strony JavaScriptu, a tym samym zatrzymaniem wykonania ewentualnych innych funkcji JavaScriptowych zawartych na stronie. Czyli chcemy odpalić kod dopiero kiedy dokument jest gotowy, by można było nim manipulować.
Pisanie funkcji zaczynamy od znaku $, który jest znacznikiem jQuery, a następnie piszemy szablon funkcji.
-
$(function(){
-
-
});
Więc chcemy, by po kliknięciu w box, nastąpiło schowanie boksu #pojBox. W tym celu wykorzystujemy potęgę jQuery, a mianowicie selektory (selektory zostaną szczegółowo opisane w dalszych artykułach). W bardzo prosty sposób selektory w jQuery, działają na podobnej zasadzie jak selektory w kaskadowych arkuszach styli CSS, więc w przyjemny sposób możemy skorzystać z tego mechanizmu pisząc $(„#pojBox”), co w prostej drodze znaczy pobierz element o id pojBox. Dalej chcemy by po kliknięciu w element wykonała się nasza funkcja, więc skorzystamy z funkcji click(), a następnie aby schować element wykorzystamy funkcję fadeOut().
-
$(function(){
-
$("#pojBox").click(function(){
-
$("#pojBox").fadeOut();
-
});
-
});
Warto zauważyć, ze funkcja fadeOut(), którą wywołalismy w przykładzie bezparametrowo, może przyjmować dodatkowe parametry, na przykład możemy ustawić prędkość zanikania obiektu, a nawet możemy ustawić, by po wykonaniu tej funkcji wykonała się inna dodatkowa funkcja (ale o tym w dalszych artykułach).
I tak, przypuśćmy, że chcemy, aby element zanikał przez 4 sekundy. W tym celu musimy jako parametr funkcji jQuery podać wskazany czas, ale w milisekundach. Warto zauważyć, że wpisana wartość nie jest w cudzysłowie, ponieważ jeżeli mamy do czynienia z liczbami typu int lub float w JavaScripcie, nie wpisujemy wartości w nawiasach.
-
$(function(){
-
$("#pojBox").click(function(){
-
$("#pojBox").fadeOut(4000);
-
});
-
});
Teraz załóżmy, że chcemy by po kliknięciu w link, element #pojBox powracał do poprzedniego stanu. Cala konstrukcja będzie bardzo podobna do poprzedniej, z ta jednak różnicą, że zmieni się selektor jQuery, oraz zamiast funkcji biblioteki jQuery fadeOut(), wykorzystamy funkcję fadeIn(). Warto jeszcze wspomnieć, że w jQuery istnieją trzy predefiniowane szybkości animacji: slow, normal i fast, które zostaną pokazane w poniższym przykładnie.
-
$(function(){
-
$("#pojBox").click(function(){
-
$("#pojBox").fadeOut(4000);
-
});
-
-
$("a").click(function(){
-
$("#pojBox").fadeIn('normal');
-
});
-
});
Ponieważ parametr funkcji fadeIn() nie jest liczbą, należny napisać go w cudzysłowie.
Podsumowanie
I to tyle. Właśnie w przeciągu około 10 minut, udało Ci się napisać swoją pierwszą animację wykorzystującą bibliotekę jQuery. A to dopiero początek. W ramach kolejnych części kursu będą przedstawione i wyjaśnione coraz to bardziej złożone aspekty wykorzystania biblioteki jQuery, prezentując coraz to ciekawsze rezultaty.
Zapisz się na RSS by dowiadywać się o nowościach w serwisie!
4 komentarze do “Szybki kurs: godzina dziennie z jQuery #1 – wprowadzenie”
Śliczny tekst – bardzo czekam na kolejny odcinek kursu!
Dzięki za zainteresowanie.
kolejną część właśnie wyszła:
Szybki kurs: godzina dziennie z jQuery #2 – manipulacja elementami
Postaram się trochę częściej uaktualniać sam kurs jQuery.
Dobry artykuł na początek.
Nie wiem czy celowo czy nie ale
$(function(){
$(„#pojBox”).click(function(){
$(„#pojBox”).fadeOut();
});
});
raczej powinien być
$(function(){
$(„#pojBox”).click(function(){
$(this).fadeOut();
});
});
Nie łamie to pewnej zasady zwanej DRY.
Dzięki za koment.
Masz absolutną rację, że powinno być this. Po prostu w tym przypadku nie chciałem wprowadzać this – zostawiłem to na dalszą część kursu, a szersze wyjaśnienie będzie a propos selektorów w jQuery.