Wprowadzenie
Technikum » PAI » Biblioteka jQuery » Wprowadzenie
Biblioteki języka JavaScript umożliwiają szybkie i łatwe tworzenie rozszerzeń dla strony internetowej. Do najpopularniejszych należą: jQuery, Prototyp; Dojo, Moo Tools, YUI. Są to biblioteki open source. Każda z nich zawiera specyficzny dla siebie zestaw funkcji usprawniających pracę z modelem DOM.
Opis biblioteki
Biblioteka jQuery to framework zawierający różnorodne funkcje, przy których wykorzystaniu można realizować często spotykane zadania (np. animacje, obsługę zdarzeń, tworzenie efektów wizualnych na stronie internetowej). Jej główną zaletą jest łatwość użycia, niezależność od przeglądarki i małe rozmiary otrzymanego kodu. Biblioteka ułatwia pracę nad stroną internetową i umożliwia tworzenie czytelnego kodu.
4.1.1. Zasady korzystania z biblioteki jQuery
Aby korzystać z biblioteki jQuery, należy pobrać jej plik ze strony http://wwwjquery.com. Ta metoda jest zalecana w celu
programowania i testowania skryptów. Inna metoda to korzystanie z biblioteki za pośrednictwem sieci dostarczania treści.
Rozwiązania oparte na udostępnianiu za pośrednictwem sieci dostarczania treści (tzw. hosting) powodują zwiększenie
przepustowości danych wysyłanych z witryny. Rozwiązania hostingowe są udostępniane przez firmy o dużych sieciach, takie
jak Google, Microsoft. Gdy użytkownik otworzy wybraną stronę na swoim komputerze, biblioteka jQuery zostanie przesłana
przez serwer znajdujący się najbliżej niego. Dzięki temu skróci się czas ładowania strony.
Na stronie http://w-ww.jquery.com dostępne są dwie wersje biblioteki jQuery. Wer¬sja nieskompresowana przeznaczona jest do
programowania i testowania. W celu skrócenia czasu ładowania wersja skompresowana usuwa niepotrzebne komentarze, podziały
wierszy, spacje i znaki tabulacji. Zmniejszenie objętości pliku zostało uzy¬skane kosztem jego czytelności, dlatego ta
wersja pliku nie nadaje się do testowania i analizy kodu.
Po wybraniu metody korzystania z biblioteki należy dołączyć ją w kodzie projekto¬wanej strony internetowej. W sekcji
<head> dokumentu HTML powinien zostać wstawiony wpis:
<script type="text/javascript" src={ścieżka do pliku}/jquery/1.4.2.min. js></script>
Aby zapewnić poprawność przetwarzania strony, arkusze stylów CSS powinny znaleźć się w dokumencie HTML przed biblioteką
jQuery. W tym dokumencie powinien zostać zdefiniowany również element doctype. Jego brak może spowodować błędne
zacho¬wania przeglądarki lub biblioteka jQuery może zostać niepoprawnie przetworzona.
Sposób dołączania biblioteki jQuery pobranej na lokalny komputer i zapisanej w fol¬derze js pod nazwą jquery.js został
pokazany w przykładzie 4.1.
Przykład 4.1
<!DOCTYPE html>
<html> <head> <title>Dołączenie biblioteki jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"›
<link href="css/style.css>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"›
//treść skryptu
</script>
</head> <body>
</body>
</html>
Alternatywnie biblioteka jQuery może zostać dołączona u dołu strony przed znaczni-kiem domykającym </body>.
Sposób dołączania biblioteki jQuery udostępnionej w ramach hostingu przez firmę Google został pokazany w przykładzie 4.2.
Przykład 4.2
<link href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min. js" type="text/javascript" ></script>
<script type="text/javascript"› //treść skryptu
</script>
Natomiast sposób dołączenia biblioteki jQuery udostępnionej na serwerze jQuery wygląda następująco:
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
Podstawowym sposobem korzystania z biblioteki jQuery jest użycie funkcji $ ( ) . Wy¬biera ona określone elementy dokumentu
drzewa DOM i pozwala wchodzić w różnego rodzaju interakcje. Zapis $ (document) to pobranie odnośnika do dokumentu HTML
Druga metoda to użycie zapisu jQuery w postaci: j Query (document) .
Podstawową metodą służącą do obsługi zdarzeń biblioteki jQuery jest metoda ready 0 , która jest wywoływana po załadowaniu
drzewa DOM. Jej argumentem jest nazwa funkcji, która zostanie uruchomiona, gdy struktura drzewa DOM otwieranej witryny
zostanie załadowana do przeglądarki. Kod w postaci:
$(document).ready(function() (
//tutaj znajdzie się wykonywany kod
1);
może stanowić szablon tworzonych skryptów. Ten szablon może znaleźć się w doku¬mencie HTML w treści skryptu, ale lepiej
umieścić go w pliku zewnętrznym.
4.1.2. Selektory
Selektory to podstawowe elementy biblioteki jQuery. Wszystkie operacje dotyczące modelu DOM używają selektorów. Przy ich
pomocy wybieramy te elementy strony, które będą przetwarzane. Biblioteka jQuery korzysta z selektorów arkuszy CSS i kil¬ku
niestandardowych selektorów jQuery. Najczęściej używane selektory CSS zostały przedstawione w tabeli 4.1.
Tabela 4.1. Wybrane selektory CSS
Ogólna postać użycia selektora wygląda następująco:
$('selektor").metoda()
Jak widać, selektor składa się z aliasu biblioteki jQuery (j Query lub $), wybranego elementu modelu DOM zapisanego w
cudzysłowach lub apostrofach i ujętego w nawiasy okrągłe oraz metody biblioteki jQuery. Metodą biblioteki może być zarówno
definicja stylów, jak i animowanie elementów na stronie.
Prosty przykład pokazuje wykorzystanie biblioteki do ukrywania i pokazywania tekstu po kliknięciu napisu j Query.
Przykład 4.3 Kod HTML:
<!DOCTYPE HTML> <html>
<head>
<title>JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-l.8.3.js"></script> <script type="text/javascript"
src="js/moje_skrypty.js"></script> </head>
<body>
<p id="bibl">jQuery — Kliknij!</p>
<div id="bibl_info" style="display:none;">
Biblioteka jQuery zawiera różnorodne funkcje dające możliwość realizacji często spotykanych zadań (animacje, obsługa
zdarzeń, tworzenie efektów na stronie internetowej).
Jej głównymi zaletami są łatwość użycia, niezależność od przeglądarki i małe rozmiary.
</div>
</body>
</html>
Plik ze skryptem moje_skrypty.js:
$(document).ready(function()
$('#bibl').click(function(){ $('#bibl_info').toggle(); ));
ł);
W podanym wyżej przykładzie pobrana ze strony biblioteka została zapisana w folde¬rze js. W pliku moje_skrypty.js został
zapisany skrypt utworzony zgodnie z podanym wcześniej szablonem. Po załadowaniu drzewa DOM zostanie wywołana funkcja
anoni¬mowa wykonująca polecenia na elementach dokumentu HTML W wyniku wykonania kodu po kliknięciu napisu jQuery wyświetli
się opis wybranego hasła, a po ponownym kliknięciu napisu opis zostanie ukryty (rysunek 4.1).
Google
Biblioteka jQuery zawiera różnorodne funkcje dające możliwość realizacji często spotykanych zadań (animacje, obsługa
zdarzeń, tworzenie efektów na stronie internetowej). Jej główny-mi zaletami są łatwość użycia, niezależność od
przeglądarki i małe rozmiary.
Rysunek 4.1. Po kliknięciu napisu jQuery - Kliknij! został wyświetlony opis tego hasła
W kodzie HTML zostały zdefiniowane identyfikatory dla akapitu id="bibl" oraz dla
znacznika div id="bibl_info". Zapis funkcji $ ' #bib1 ' ) to pobranie elementu
• identyfikatorze bibl i po wystąpieniu zdarzenia cl i ck wywołanie funkcji obsłu-gującej to zdarzenie. W wyniku dla
elementu o identyfikatorze bibl_info zostanie wykonana metoda toggle ( ), która na przemian ukrywa i pokazuje wybrany
element. Metodę toggle () można uzupełnić o parametr określający szybkość zwijania i roz-wijania tekstu. Parametr ten może
przyjąć jedną z wartości:
• s iow — wolne przewijanie:
$(1tbiblinfo').toggle("slow");
• normal — normalna szybkość przewijania,
• fast — szybkie przewijanie,
• dowolna wartość — szybkość przewijania w milisekundach: s ( . ) . toggłe (3000) ;
Zmiana zawartości pliku moje_skrypty.js spowoduje zmianę działania strony. Przykład 4.4
$ (document) . ready (function ()
$(.*').css('font-family., 'arial, verdana');
) ;
W podanym przykładzie dla wszystkich elementów strony zostały przy użyciu metody css O ustawione właściwości font-family.
Przykład 4.5
$(document).ready(function()
$('dry').css('background', 'red'); i);
W podanym wyżej przykładzie dla wszystkich znaczników <div> został przy użyciu metody cs s ( ) zmieniony kolor tła.
Zadanie 4.1
Zaprojektuj na stronie internetowej blok zawierający kilka haseł związanych z budową komputera. Hasła są widoczne na
stronie, natomiast ich opis pojawia się po kliknięciu hasła. Zdefiniuj odpowiednio style dla wyświetlanych bloków
informacji.
4.1.3. Filtry selektorów jQuery
Przy zastosowaniu selektorów realizujemy wybór określonych elementów modelu DOM. Jeżeli użyjemy filtrów, otrzymamy
selektory, które zwracają elementy spełniające określone kryteria.
Filtry jQuery rozpoczynają się od znaku „ : ", po którym występuje nazwa zastosowa¬nego filtra. Wybrane filtry jQuery
zostały przedstawione w tabeli 4.2.
Tabela 4.2. Filtry biblioteki jQuery
Selektor
: fir s t pierwszy element z wyszukiwanego zbioru
:last ostatni element z wyszukiwanego zbioru
eq (indeks)
wybrany element wyszukiwanego zbioru (indeksowanie rozpo-czyna się od 0)
: odd nieparzyste elementy wyszukiwanego zbioru
: even parzyste elementy wyszukiwanego zbioru
: contains ( tekst ) element zawierający podany tekst
:hidden elementy ukryte oraz pola typu <input type="hidden">
:visible elementy widoczne
Jedną z metod ułatwiających odczyt wierszy w tabeli lub elementów listy jest naprze-mienne ich kolorowanie. Polega to na
kolorowaniu każdego wiersza parzystego lub nieparzystego. Do tego celu mogą zostać użyte filtry : even i : odd.
Przykład 4.6 Kod HTML:
<!DOCTYPE HTML>
<html> <head> <title>Filt even</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"› <script type="text/javascript" src="js/jquery-
1.8.3.js"></script>
<script type="text/javascript" src="js/moje_skrypty4.js"></script> </head>
<body>
<table width=400>
<tr><td width=100> Produkt</td><td width=250> Opis</td><td width=50> Cena</ td></tr>
<tr><td> Olej</td><td> Olej rzepakowy</td><td> 6 zI</td></tr>
<tr><td> Cukier</td><td> Cukier brązowy</td><td> 4 zł</td></tr>
<tr><td> Mąka</td><td> Mąka krupczatka</td><td> 3 zł</td></tr>
<tr><td> Sól</td><td> Sól warzona</td><td> 2 zI</td></tr>
<tr><td> Masło</td><td> Masło śmietankowe</td><td> 4 zł</td></tr> <tr><td> Chleb</td><td> Chleb razowy</td><td> 3
zI</td></tr>
</table> </div> </body> </html>
Kod j Query:
$(document).ready(function()
$('tr:even').css('background', '#BOBOB0'); $('tr:odd').css('background', '#EEB');
);
Wynik wykonania kodu został pokazany na rysunku 4.2.
Rysunek 4.2. Użycie filtrów :even i :odd
Tę samą metodę możemy zastosować również dla listy nieuporządkowanej. Standardem jest wykorzystywanie listy
nieuporządkowanej do tworzenia menu na stronę interneto¬wą. Rozróżnianie elementów listy poprzez ich naprzemienne
kolorowanie może pomóc użytkownikom w poruszaniu się po menu.
Przykład 4.7 Kod HTML:
<!DOCTYPE HTML>
<html> <head> <title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css"›
.tlol{
background: #EEE;
.t1o2(
background: #BOBOBO;
ł
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/moj_skrypt5.js"></script>
</head> <body> <p>Menu</p>
<ul id="menu"›
<li> Pierwszy element</li>
<li> Drugi element</li>
<li> Trzeci element</li>
<li> Czwarty element</li>
</ul>
</body>
</html>
Kod jQuery (moj_skrypt5):
$(document).ready(function()
{
$("ul li:even").addClass('łi.o2'); $ ("ul li:odd").addClass('t1o1');
1);
W kodzie jQuery zostały pobrane wszystkie odnośniki do elementów listy Elementy parzyste ("ul li : even") zostały za
pomocą metody addClass (t1o2) przypisane do klasy tlo2, a elementy nieparzyste do klasy t lo 1. Klasy tloł i tlo2 zostały
zdefinio¬wane w arkuszach stylów CSS. Metoda addClass ( ) pozwala na dodanie wybranych selektorów do istniejącej już
klasy. W wyniku wykonania kodu elementy parzyste listy zostaną dodane do klasy t 1 o2, a nieparzyste do klasy -bici
(rysunek 4.3).
Gogle ■ 1 Szukaj Więcej >>
Menu
• Pierwszy element
• Drugi element
• Trzeci element
• Czwarty element
Rysunek 4.3. Naprzemienne kolorowanie elementów menu
Metody związane z używaniem stylów CSS zostały pokazane w tabeli 4.3. Tabela 4.3. Metody CSS
Nazwa metody
c s s )
umożliwia pobranie lub ustawienie właściwości dla dowolnego
. ( elementu
. addClas s ( ) umożliwia dodanie klasy CSS do dowolnego elementu
. hasClas s ( ) umożliwia testowanie, gdy element posiada klasę
. removeclas s () umożliwia usunięcie klasy CSS z dowolnego elementu
. toggleClas s () umo
żliwia dodanie i usunięcie klas CSS z dowolnego elementu
Gdyby w dokumencie HTML istniały jeszcze inne listy, to dla wszystkich elementów list zostałyby przypisane klasy t lo ł
lub tlo2. Aby tego uniknąć, w skrypcie można dodać informację, że przypisanie do klas dotyczy tylko listy, dla której
został zdefiniowany
identyfikator id="menu". Natomiast w kodzie HTML musi nastąpić przypisanie tego identyfikatora do wybranej listy
Przykład 4.8
$(document).ready(function()
$("ul#menu li:even").addClass('tło2'); $("ul#menu li:odd").addClass('tłol'); });
Zadanie 42
Utwórz menu dla strony internetowej, w którym wybrana myszą pozycja menu będzie podświetlana. Wykorzystaj kod z
poprzednich przykładów oraz zdefiniowane przez siebie style elementów menu.