Wprowadzenie do jQuery
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