docWprowadzenie do jQuery
download 
Reklamacja Transkrypt
Wprowadzenie do jQuery
Technologie programowania systemów internetowych
jQuery – lab. 1
Wprowadzenie do jQuery
1. Przygotowanie projektu
• Stwórz nowy projekt typu PHP, usuń z niego plik index.php
• Do katalogu projektu rozpakuj dołączone do ćwiczeniaarchiwumLab_jQuery_1.zip
• Przyjrzyj się zawartości plików: index.html i
w przeglądarce
main.css, sprawdź wygląd strony
• Ze strony http://jquery.com pobierz bibliotekę jQuery i umieść w katalogu projektu
• W pliku index.html, w sekcji <head> dodaj dwa elementy <script> – jeden ładujący
bibliotekę jQuery (popraw 1.X.X na właściwy numer wersji):
<script type="text/javascript" src="jquery-1.X.X.min.js"></script>
oraz drugi, w którym umieszczać będziemy własny kod JavaScript:
<script type="text/javascript">
// ... tutaj będzie kod JavaScript, w tym wywołania jQuery
</script>
Strona 1 z 6
Technologie programowania systemów internetowych
jQuery – lab. 1
2. Funkcja ready()
• Funkcja ready() służy do zdefiniowania kodu, który ma zostać wywołany po załadowaniu
strony:
$(document).ready(argument);
• Argumentem funkcji ready() może być:
o
o
nazwa funkcji,
funkcja anonimowa.
• W przygotowanym wcześniej bloku <script> umieść wywołanie funkcji ready(). Jako
argument przekaż funkcję anonimową:
$(document).ready(function() {
// ... tutaj będą wszystkie wywołania jQuery
});
•
Cały kod tworzony w dalszej części ćwiczenia umieszczać będziemy wewnątrz powyższej
funkcji.
•
Przetestuj działanie funkcji ready() – w ciele funkcji anonimowej umieść kod:
alert('Ala ma kota');
i odśwież stronę w przeglądarce. Po załadowaniu strony powinno pojawić się okno
dialogowe z komunikatem. Jeśli wszystko działa prawidłowo, możesz usunąć wywołanie
alert(…).
3. Podstawowe selektory
•
•
Podstawowe selektory w jQuery mają taką samą postać, jak w CSS. Przykłady:
– wybierz element z atrybutem id='daneOsobowe'
o
'#daneOsobowe'
o
'#daneOsobowe td' – wybierz elementy typu td, znajdujące się wewnątrz
elementu o id='daneOsobowe'
o
'div.rameczka'
(class='rameczka')
– wybierz elementy typu div należące do klasy 'rameczka'
jQuery wprowadza dodatkowe modyfikatory, np. first, last, even, odd, contains, empty.
Przykłady:
o
'#oceny tr:odd'
– wybierz tylko nieparzyste wiersze tabeli oceny
o
'#oceny tr:last'
– wybierz ostatni wiersz tabeli oceny
o
'td:contains(2.0)' – wybierz komórki zawierające tekst '2.0'
Strona 2 z 6
Technologie programowania systemów internetowych
jQuery – lab. 1
4. Modyfikacja stylu wybranych elementów
•
Typowe wywołanie funkcji jQuery ma postać:
$(selektor).nazwaFunkcji(argumenty);
Na elementach wskazywanych przez selektor wykonywana jest podana funkcja.
•
Do zmiany stylu wybranych elementów może posłużyć funkcja css. Przykład – zmiana
koloru komórek tabeli o id=daneOsobowe:
$('#daneOsobowe td').css('color', '#000060');
Powyższy kod umieść w ciele funkcji anonimowej przekazanej do funkcji ready(). Cały
blok <script> powinien w tym momencie wyglądać następująco:
<script type="text/javascript">
$(document).ready(function() {
$('#daneOsobowe td').css('color', '#0000c0');
});
</script>
Sprawdź działanie w przeglądarce. Po odświeżeniu strony imię i nazwisko powinny być
wyświetlane na niebiesko.
•
Dopisz kolejne polecenia zmieniające:
o
kolor tła nieparzystych wierszy tabeli z ocenami
$('#oceny tr:odd').css('background-color', '#e0e0e0');
o
kolor ocen niedostatecznych na czerwony, a bardzo dobrych na zielony:
$('#oceny td:contains(2.0)').css("color", "red");
$('#oceny td:contains(5.0)').css("color", "green");
Strona 3 z 6
Technologie programowania systemów internetowych
jQuery – lab. 1
5. Obsługa zdarzeń – kliknięcie przycisku
•
•
Aby dodać obsługę kliknięcia na przycisku należy:
o
wybrać przycisk za pomocą selektora,
o
wywołać funkcję click(), przekazując do niej jako argument funkcję anonimową
z kodem, który ma być wywołany po kliknięciu przycisku.
Przykład:
$('#poprawButton').click(function() {
alert('Ktoś mnie kliknął!');
});
Powyższy kod spowoduje, że po kliknięciu na przycisku o id='poprawButton' zostanie
wyświetlony komunikat. Sprawdź działanie w przeglądarce.
•
Jeśli wszystko działa prawidłowo, usuń wywołanie funkcji alert(). W to miejsce
wstawimy kod, który poprawi oceny niedostateczne na 3.
•
Aby poprawić oceny, musimy:
•
o
wybrać za pomocą selektora komórki z oceną 2.0,
o
zmienić ich zawartość na 3.0,
o
zmienić ich kolor na czarny.
Spróbuj zrobić to samodzielnie.
…
Strona 4 z 6
Technologie programowania systemów internetowych
•
jQuery – lab. 1
… a skoro Ci się nie chciało, oto gotowy kod:
$('#oceny td:contains(2.0)').text('3.0').css("color", "black");
Widzimy tu przykład łańcuchowego wywoływania metod jQuery - każda z nich zwraca
obiekt jQuery, na którym można wywoływać kolejne metody:
•
o
na wybranych komórkach wywołaliśmy metodę text, zmieniającą ich zawartość,
o
następnie na tych samych komórkach wywołaliśmy metodę css, zmieniając ich
kolor.
Kompletny kod powinien w tej chwili wyglądać następująco:
<script type="text/javascript">
$(document).ready(function() {
$('#daneOsobowe td').css('color', '#0000c0');
$('#oceny tr:odd').css('background-color', '#e0e0e0');
$('#oceny td:contains(2.0)').css("color", "red");
$('#oceny td:contains(5.0)').css("color", "green");
$('#poprawButton').click(function() {
$('#oceny td:contains(2.0)').text('3.0').css("color", "black");
});
});
</script>
•
Sprawdź działanie w przeglądarce.
Zadanie
Dodaj samodzielnie obsługę dwóch pozostałych przycisków:
•
•
Ukryj/pokaż niedostateczne – kliknięcie powinno schować lub pokazać całe wiersze tabeli,
w których znajdują się oceny niedostateczne. Aby to osiągnąć konieczne będzie
wykorzystanie dwóch nowych funkcji:
o
parent() – zwraca element nadrzędny w stosunku do wybranego elementu;
pozwoli to nam dostać się do wiersza (element <tr>) po wybraniu selektorem
komórki (element <td>);
o
toggle() – powoduje cykliczne schowanie/pokazanie wybranego elementu.
Usuń ostatni wiersz – do usunięcia elementu można użyć metody remove().
Dodawanie elementów do strony
•
Aby dodać nowe przedmioty do tabeli, wykorzystamy następujące funkcje:
Strona 5 z 6
Technologie programowania systemów internetowych
•
jQuery – lab. 1
o
append() – dołącza podany kod html do wskazanego elementu;
o
text() – wywołane bez argumentu zwraca zawartość tekstową elementu;
wywołane z argumentem - ustawia zawartość elementu;
o
val() – działa podobnie jak text(), lecz służy od obsługi zawartości pól
formularza (element input);
o
funkcja JavaScript parseInt() – zamienia łańcuch tekstowy na liczbę całkowitą.
Kompletny kod realizujący dodanie przedmiotu:
$('#dodajButton').click(function() {
// Pobierz zawartość pierwszej kolumny ostatniego wiersza:
var s = $('#oceny tr:last td:first').text();
// Zamień ją na liczbę i zwiększ o jeden:
var n = parseInt(s) + 1;
// Pobierz dane wpisane do pól formularza:
var o = $('#ocena').val();
var p = $('#przedmiot').val();
// Przygotuj kod html nowego wiersza:
var wiersz = '<tr><td>' + n + '</td><td>' + p + '</td><td>' +
o + '</td>';
// Dodaj nowy wiersz do tabeli:
$('#oceny table').append(wiersz);
});
Strona 6 z 6
