Reklama
Wizyt
Dzisiaj: 308Wszystkich: 520585

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.





Reklama