Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

JQuery. 2 z 15 Dlaczego jQuery? 3 z 15 Główne cechy jQuery Framework napisany w JavaScript Darmowa Niezależność od przeglądarki Kompatybilna z CSS3 Efekty.

Podobne prezentacje


Prezentacja na temat: "JQuery. 2 z 15 Dlaczego jQuery? 3 z 15 Główne cechy jQuery Framework napisany w JavaScript Darmowa Niezależność od przeglądarki Kompatybilna z CSS3 Efekty."— Zapis prezentacji:

1 jQuery

2 2 z 15 Dlaczego jQuery?

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

4 4 z 15 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: $('#place').html(code); jQuery('#place').html(code); ==

5 5 z 15 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 6 z 15 Selektory Selektory umożliwiają wybranie jednego lub kilku elementów strony SELEKTORDZIAŁ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 7 z 15 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 8 z 15 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 }); $(function() { // tutaj kod JavaScript }); można jeszcze krócej:

9 9 z 15 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 JQUERYDZIAŁ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 10 z 15 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 11 z 15 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 12 z 15 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 13 z 15 Biblioteka interfejsu - UI $("#dialog").dialog(); $("#datepicker").datepicker(); $("#tabs").tabs(); $("#accordion").accordion({header:"h3"});

14 14 z 15 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 15 z 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 16 z 15 Wady jQuery Wady –W pełnej wersji zajmuje 120kB –Niektórzy użytkownicy blokują JavaScript


Pobierz ppt "JQuery. 2 z 15 Dlaczego jQuery? 3 z 15 Główne cechy jQuery Framework napisany w JavaScript Darmowa Niezależność od przeglądarki Kompatybilna z CSS3 Efekty."

Podobne prezentacje


Reklamy Google