JQuery.

Prezentacja na temat: "JQuery."— Zapis prezentacji:

1 jQuery

2 Dlaczego jQuery?

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

4 Notacja $ == $ jest to alias do jQuery
Pojedynczy 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 - Hierarchia
ancestor 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 jQuery
Na 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", " 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 jQuery
jQuery 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ńcuchowe
Każ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 jQuery
Aby 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 AJAXem
Zdarzenia 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, intuicyjny
Uł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 120kB
Niektórzy użytkownicy blokują JavaScript