1 jQuery

2 Dlaczego jQuery?

3 Główne cechy jQuery Framework napisany w JavaScript DarmowaNiezależność od przeglądarki Kompatybilna z CSS3 Efekty Web 2.0 Wbudowany AJAX

4 Notacja $ == $ jest to alias do jQueryPojedynczy znak jako klucz dostępu Pozwala pobrać odnośniki do tagów Dzięki temu notacja jest czytelna i zwięzła: jQuery('#place').html(code); == $('#place').html(code);

5 Funkcje anonimowe Funkcje anonimowe – funkcje nie posiadające zdefiniowanej nazwy Tradycyjne podejście: Function myFn() { $(this).text(‘link’); } $(‘a’).click(myFn); Funkcja anonimowa: $(‘a’).click(function() { $(this).text(‘link’); }

6 Selektory Selektory umożliwiają wybranie jednego lub kilku elementów strony SELEKTOR DZIAŁANIE $("#id") Wybiera element o atrybucie id równym id $("div") Wybiera wszystkie elementy div $(".nazwaklasy") Wybiera wszystkie elementy div zawierające klasę o nazwie nazwaklasy $("div a") Wybiera wszystkie elementy a znajdujące się wewnątrz div $("div:even") Wybiera co drugi, parzysty div $("input:checked") Wybiera zaznaczone pola formularza

7 Selektory - Hierarchiaancestor descendant – potomstwo elementu ancestor pasujące do selektora descendant parent > child –dzieci elementu rodzic pasujące do selektora child prev + next – spośród rodzeństwa elementu prev, znajdującego się po tym elemencie, wybiera pierwszy element pasujący do selektora prev ~ sibilings – spośród rodzeństwa elementu prev znajdującego się po tym elemencie wybiera wszystkie elementy pasujące do selektora sibilings

8 Jak to działa : ready Problem: skrypty zaczynają działać tuż po załadowaniu, jednak reszta kodu strony może dalej się ładować (nie jest dostępna) Rozwiązanie: zdarzenie ready na obiekcie document, wywoływane gdy całe drzewo DOM strony jest dostępne: $(document).ready(function() { // tutaj kod JavaScript }); można jeszcze krócej: $(function() { // tutaj kod JavaScript });

9 Manipulacja liśćmi drzewa w jQueryNa wybranych elementach drzewa DOM możemy następnie przeprowadzać szereg operacji na ich atrybutach lub zawartości KOD JQUERY DZIAŁANIE $("#id").html("kod") Ustawia kod HTML wewnątrz elementu $("a").attr("href") Zwraca wartość atrybutu $("a").attr("href", "www.wp.pl") Ustawia wartość atrybut $("a").css({background-color:'yellow'}) Ustawia kod CSS $("a").addClass("hi") Dodaje klasę CSS $("a").removeClass("hi") Usuwa klasę CSS $("input").val() Zwraca wartość pola

10 Przechodzenie po drzewie DOM w jQueryjQuery posiada kilkanaście metod do poruszania się po drzewie DOM: next(), parent(), each(), contains(), hasClass() … Najczęściej przydatna jest metoda each() wywołująca callback dla każdego wybranego elementu: // ta instrukcja wyświetli dialog z url'em dla każdego napotkanego odnośnika $("a").each( function() { alert( "URL odnosnika: " + $(this).attr("href") ); });

11 Magia jQuery – wywołania łańcuchoweKażda metoda jQuery zwraca także instancję jQuery Dzięki temu możliwe jest zestawianie metod w łańcuchy Można w jednej linii wykonać wiele operacji $("a").filter(":hover").addClass("hi").append("hovered") …

12 Obsługa zdarzeń w jQueryAby obsłużyć zdarzenie dla jednego (lub wielu) elementów wywołuje się funkcję instalującą zdarzenie: $("a").click( function() { alert( "Naciśnięto odnośnik: " + $(this).attr("id") ); }); $("#id").hover( function() { alert( "Najechano na element: " + $(this).attr("id") ); }, function() { alert( "Zjechano z elementu: " + $(this).attr("id") ); });

13 Biblioteka interfejsu - UI$("#accordion").accordion({header:"h3"}); $("#datepicker").datepicker(); $("#dialog").dialog(); $("#tabs").tabs();

14 AJAX jQuery dostarcza kilka metod ułatwiających pracę z AJAXemZdarzenia podzielone są na globalne i lokalne Przydatne metody: ajax() – wykonuje asynchroniczne żądanie HTTP post() – pobiera dane getScript() – pobiera i wywołuje plik JavaScript get() – pobiera elementy DOM na podstawie obiektu jQuery load()

15 Zalety jQuery Zalety Kod jest zwięzły, przejrzysty, intuicyjnyUłatwia manipulowanie drzewem DOM Możliwość definiowania własnych zdarzeń Wygoda tworzenia wtyczek Wspiera XPath oraz CSS 1-3

16 Wady jQuery Wady W pełnej wersji zajmuje 120kBNiektórzy użytkownicy blokują JavaScript