|
Podstwy frameworku jQuery
Charakterystyka jQuery Biblioteka jQuery pozwala oddzielić strukturę dokumentu XHTML od zachowania (JavaScript). Strona, która korzysta z jQuery nie zawiera w kodzie HTML żadnych zdarzeń, a jedynie elementy HTML opcjonalnie z identyfikatorami i klasami. Obsługę zdarzeń definiujemy całkowicie w JavaScripcie, wykorzystując do tego funkcje i metody biblioteki jQuery. Zaczynamy od wskazania, o który element lub elementy HTML nam chodzi. Zadanie to realizujemy przy użyciu selektorów. Wygodne są selektory, których składnia korzysta ze składnią selektorów CSS. Po wybraniu elementów odpowiednim selektorem definiujemy zachowania elementu(-ów). Do tego służą metody klasy jQuery. Zapewniają one łatwy dostęp do zawartości, atrybutów i zdarzeń elementu lub elementów wybranych przy użyciu selektora. W przypadku gdy selektor pasuje do wielu elementów, wszystkie pasujące elementy będą przetwarzane iteracyjnie. JQuery umożliwia również pobieranie dokumentów przy użyciu Ajaksa za pomocą metody, load(), której parametrem jest adres URL pobieranego dokumentu. Tutaj znajdziesz tylko opis podstawowych możliwości jQuery. Pełną dokumentację, tutoriale, przykłady i najnowszą wersję biblioteki jQuery znajdziesz na stronie http://jquery.com. Najprostszy dokument HTML z jQuery Biblioteka jQuery jest dołączana do stron jako zewnętrzny plik JavaScript. Po dołączeniu do dokumentu pliku jquery-1.4.2.js mamy już dostęp do obiektów i metod biblioteki jQuery. Podstawową metodą jest ready() klasy jQuery, wywoływana po kompletnym załadowaniu kodu strony, a zatem możemy operować pełnym drzewem DOM. Wewnątrz funkcji ready() definiujemy anonimową funkcję, która zostanie wywołana po zakończeniu ładowania dokumentu. W tej funkcji możemy umieścić dowolny kod, np. wywołanie okna informacyjnego alert():
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert('Witaj');
});
</script>
</head>
<body>
Treść strony...
</body>
</html>
Obsługa zdarzeń Separacja zdarzeń od struktury polega na tym, że wewnątrz elementów body nie występują żadne zdarzenia JavaScript. Zdarzenie np. onclick elementu div w tradycyjnym dokumencie HTML wyglądałoby tak:
<p onclick="alert('To jest DIV')">Kliknij tutaj !</p>
Natomiast korzystając z jQuery definiujemy selektor 'div' oraz metodę click(), w której umieszczamy wywołanie funkcji alert():
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('div').click(function(){
alert('To jest DIV');
});
});
</script>
</head>
<body>
<div>Kliknij tutaj !</div>
</body>
</html>
Dziwny znak $ w kodzie jest aliasem funkcji o nazwie jQuery(). W przykładzie występuje funkcja jQuery() wywołana z parametrem document. Funkcja ta zwraca obiekt, na rzecz którego wywołujemy metodę ready. Parametrem metody ready() jest funkcja anonimowa czyli bez nazwy: function(){ }. W treść funkcji możemy wpisać dowolny kod. W naszym przykładzie było to wywołanie funkcji jQuery() z parametrem div. Zwróconemu obiektowi wywołaliśmy metodę click(), której parametrem jest funkcja anonimowa wywołująca okno dialogowe alert(). Element Do wyboru wszystkich elementów zadanego typu służy selektor będący nazwą tagu. Akapity wybierzemy selektorem p, bloki div - selektorem div, a np. tabele - selektorem table. Poprzedni przykład przypisze obsługę zdarzenia onclick wszystkim blokom div w całym dokumencie. Identyfikatory Jeśli element HTML zawiera atrybut ID, to odwołując się do niego używamy selektora składającego się ze znaku # oraz identyfikatora:
$(document).ready(function(){
$('#blok').click(function(){
alert('Kliknięto blok o Id = blok');
});
});
..........................
<div id="blok">Kliknij tutaj !</div>
Klasy Selektor elementów wzbogaconych o atrybut CLASS składa się z kropki i nazwy klasy i może operować na elementach różnych typów:
$(document).ready(function(){
$('.klasa').click(function(){
alert('Kliknięto element o Class = klasa');
});
});
..........................
<div class="klasa">Akapit z atrybutem klasa</viv>
..........................
<p class="klasa">Akapit z atrybutem klasa</p>
Wartość atrybutu JQuery umożliwia również odwołanie do elementów, które posiadają określony atrybut, a także posiadające określony atrybut z przypisaną do niego konkretną wartością, np.:
$(document).ready(function(){
$('img[title]').click(function(){
alert('Kliknięto obrazek z atrybutem TITLE');
});
$('img[title="wybrany"]').click(function(){
alert('Kliknięto obrazek z atrybutem TITLE = wybrany');
});
});
Pierwsza definicja dotyczy wszystkich tagów IMG, które posiadają atrybut title. Druga - tylko tych, których atrybut title ma wartość wybrany. Zmiana zawartości fragmentów strony Dostęp do treści poszczególnych elementów strony umożliwia metoda html(). Wywołana bez parametru zwraca aktualną treść elementu łącznie z tagami HTML. Wywołana z parametrem wstawia do wybranego elementu nową treść. Jeśli metodę html() wywołamy na rzecz klikniętego akapitu, wówczas kliknięcie akapitu może np. spowodować zmianę jego treści, np.:
$(document).ready(function(){
$('p#akapit').click(function(){
$(this).html('Zmieniłeś treść tego akapitu...');
});
});
..........................
<p id="akapit">Kliknij mnie</p>
Dostęp do klikniętego akapitu wewnątrz metody click umożliwia słowo kluczowe this, które jest referencja do obiektu, który wygenerował zdarzenie. Zmiana stylu elementów strony Styl dowolnego elementu strony możemy zmienić metodą css(), która pobiera dwa parametry:
Np.:
$(document).ready(function(){
$('td').click(function(){
$(this).css('background-color', 'red');
});
});
Powyższy skrypt spowoduje, że kliknięcie każdej komórki tabeli na stronie zmieni jej tło na czerwone. Jeżeli mamy zdefiniowane klasy stylów, to zamiast ustawiać poszczególne atrybuty możemy skorzystać a klas CSS oraz metod addClass() i removeClass(), np.:
.styl1 {
color: black;
background-color: white;
}
.styl {
color: white;
background-color: black;
}
..........................
$(document).ready(function(){
$('p#akapit').mouseover(function(){
$(this).removeClass('styl1');
$(this).addClass('styl2');
});
$('p#akapit').mouseout(function(){
$(this).removeClass('styl2');
$(this).addClass('styl1');
});
});
..........................
<p id="akapit" class="styl1">Jakaś treść akapitu...</p>
Ten skrypt spowoduje, że po najechaniu myszką na podany akapit będzie on wyświetlany w kolorze białym na czarnym tle. Po "zjechaniu" myszką z akapitu będzie wyświetlany w kolorze czarnym na białym tle. Zdarzenia Biblioteka jQuery zapewnia dostęp do wszystkich możliwych zdarzeń obsługiwanych przez JavaScript:
Jak widać z powyższej listy część funkcji odpowiedzialnych za zdarzenia może być wywoływana na dwa sposoby. Pierwszym sposobem jest wywołanie z parametrem, którym jest funkcja. Takie wywołanie definiuje funkcję obsługi zdarzenia. Drugi sposób wywołania to wywołanie bezparametrowe. Powoduje ono wygenerowanie określonego zdarzenia i wykonanie przypisanego do tego zdarzenia kodu JavaScript lub innego domyślnego działania (np. wysłania danych z formularza na serwer). Ajax czyli ładowanie fragmentu strony Do załadowania zewnętrznego pliku używamy metody load(), np.:
$(document).ready(function(){
$('#content').load('moja_strona.html');
});
..........................
<div id="content"></div>
Działa ona w oparciu o obiekt XMLHttpRequest. Dokument, którego adres URL jest podany jako parametr jest pobierany asynchronicznie w tle (Ajax), a po pobraniu z serwera jego zawartość jest wyświetlana w elemencie div o id równym content. Metoda ta może być w prosty sposób wykorzystana do obsługi menu, które nie będzie przeładowywało całej strony, ale jedynie ten jej fragment, który powinien się zmienić po wybraniu danej opcji. Njprzeważniej robimy to tworząc pełną strukturę strony i wstawiając w nią element o identyfikatorze np. #content, do którego ładujemy zmienne fragmenty po kliknięciu na wybraną przez użytkownika opcję menu. Może to wyglądać na przykład tak:
$(document).ready(function(){
$('#link_1').click(function(){
$('#content').load('strona_startowa.html');
});
$('#link_2').click(function(){
$('#content').load('o_firmie.html');
});
$('#link_3').click(function(){
$('#content').load('kontakt.html');
});
});
..........................
<ol>
<li id="link_1">Strona startowa</li>
<li id="link_2">O firmie</li>
<li id="link_3">Kontakt</li>
</ol>
..........................
<div id="content"></div>
W powyższym przykładzie kliknięcie na element o identyfikatorze #link_N wywołane zostanie odpowiadająca mu funkcja, która spowoduje załadowanie zewnętrznego dokumentu do elementu o identyfikatorze #content. Opcje menu mogą być również zapisane jako hiperłącza a. W takim przypadku obsługa menu może się znacznie uprościć. Np.:
$(document).ready(function(){
$('a.menu').click(function(){
$('#content').load($(this).attr('href') + '.html');
return false;
});
});
..........................
<a class="menu" href="strona_startowa">Strona startowa</a>
<a class="menu" href="o_firmie">O firmie</a>
<a class="menu" href="kontakt">Kontakt</a>
..........................
<div id="content"></div>
Jak to działa:
|