Technologie Internetu. JQuery

Transkrypt

1 Technologie Internetu. JQuery Aleksander Polsko-Japońska Akademia Technik Komputerowych Wydział Informatyki w Gdańsku ul. Brzegi 55, Gdańsk 22maja2015 1/23

2 JQuery Najnowsza wersja tego dokumentu dostępna jest pod adresem 2/23

3 JQuery Instalacja Obiekt JQuery 3/23

4 JQuery JQuery Instalacja Obiekt JQuery Legalna(MIT) biblioteka w JavaScript do zastosowych internetowych Manipulacja DOM Obsługa zdarzeń AJAX Animacja i inne efekty Dużo wtyczek Uwzględnia niestandadrowe przeglądarki(wersja 2.x wymaga IE9+) Ułatwia(?) napisanie kodu Jest bardzo popularna 4/23

5 Instalacja JQuery Instalacja Obiekt JQuery Pobrać z Wykorzystać CDN <script src=" </script> sąinnecdn Bower: bower install jquery 5/23

6 Obiekt JQuery JQuery Instalacja Obiekt JQuery jquery albo $ 6/23

7 do elementów Nawigacja 7/23

8 do elementów do elementów Nawigacja Po selectorze css(plus kilka rozszerzeń) $("p") $("p.introimg") $("ul li:first-child") $("#test") jquery( table.orders tr:odd ) $("form input:radio") 8/23

9 Wynik zapytania do elementów Nawigacja Zestaw obiektów jquery, podobny do tablicy Ma length, operator[] i wiele metod do manipulacji na elementach $( p )[0] jest elementem DOM $( p ).eq(0) jest obiektem jquery 9/23

10 do elementów rodzicielskich do elementów Nawigacja parent() element rodzicielski parents() wszysctkie elementy rodzicielskie do html parentsuntil(elem) wszystkie elementy rodzicielskie do elem $("span").parent(); $("span").parents(); $("span").parentsuntil("div"); 10/23

11 do elementów dziecięcych do elementów Nawigacja children() elementy dziecięce(jeden poziom) find() wszysctkie elementy dziecięce, pasujące do selectrora $("ul").children(); $("ul").children("li.class1"); $("div").find("span"); $("div").find("*"); 11/23

12 Nawigacja w poziomie do elementów Nawigacja siblings() next() nextall() nextuntil() prev() prevall() prevuntil() 12/23

13 Filtracja do elementów Nawigacja first() last() filter() not() 13/23

14 Modyfikacja zawartości Modyfikacja stylów 14/23

15 /Zmiana zawartości Modyfikacja zawartości Modyfikacja stylów text() zawartość tekstowa elementu text(new) ustaw zawartość tekstową elementu html() zawartość html elementu html(new) ustaw zawartość html elementu val() wartość pola formulaza val(new) ustaw wartość pola formulaza attr(at) wartość atrybutu val(at,new) ustaw wartość atrybutu prop(at) wartość właściwości(selectedindex, checked, defaultselected, etc.) prop(at,new) ustaw wartość właściwości 15/23

16 Callback Modyfikacja zawartości Modyfikacja stylów Wymienione metody mogą mieć jako(drugi) argument funkcję funkcja ta ma dwa argumenty: numer elementu na liście oraz starą wartość $("#test2").html(function(i, origtext){ return"oldhtml:"+origtext+ " New html: Hello <em>world!</em> (index:"+i+")"; 16/23

17 Dodawanie treści Modyfikacja zawartości Modyfikacja stylów prepend() dodaje treść na początku elementu append() dodaje treść na końcu elementu before() dodaje treść przed elementem after() dodaje treść po elemencie $("p").append("new"); $("p").before("<p>new</p>","<p>text</p>"); Utworzenie nowego elementu: $( <tag></tag> ) 17/23

18 Usuwanie treści Modyfikacja zawartości Modyfikacja stylów empty() usuwa wszystkie elementy dziecięce remove() usuwa wszystkie elementy(razem z dziecięcymi) remove(filter) usuwa wszystkie elementy pasujące do filtru $("ul").empty(); $("p").remove(".to_delete"); 18/23

19 Zmiana clasy Modyfikacja zawartości Modyfikacja stylów addclass() removeclass() toggleclass() hasclass() $("h1,h2,p").addclass("blue"); $("div").removeclass("important"); $("span.toc").toggleclass("visible"); 19/23

20 /zmiana właściwości css Modyfikacja zawartości Modyfikacja stylów css(pror) właściwość css(jak getcomputedstyle) css(prop, new) ustaw właściwość css new może być funkcją 20/23

21 Wymiary Modyfikacja zawartości Modyfikacja stylów 21/23

22 Zasada łańcuchowa 22/23

23 Zasada łańcuchowa Każda metoda zwraca nowy element Możliwe(a nawet zalecone) jest stosowanie łańcuchów Zasada łańcuchowa $( <li></li> ).text(value).addclass( clickable ).click(getshowgenre(value)); 23/23