Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk
Moduł 7 jquery
Agenda Czym jest jquery? Podstawowe zasady jquery Selektory jquery Model DOM i jquery Zdarzenia i jquery Ajax i jquery jquery UI
Czym jest jquery? Powstała w 2006 roku, Silnie wspierana przez Microsoft, JQuery jest to obecnie jedna z najpopularniejszych bibliotek upraszczających programowanie w języku JavaScript przede wszystkim operacje na modelu DOM, Wspiera wiele różnych przeglądarek
Podstawowe zasady jquery (1) Podstawą jest obiekt jquery (oznaczany również $) Obiekt ten służy do pobierania z modelu DOM elementów lub tworzenia nowych i wykonywania na nich wymaganych działań jquery("p").css("color", "red"); $("p").css("color", "red"); Akcje mogą być wykonywane również bezpośrednio na obiekcie jquery np. iterowanie po elementach, AJAX. $.each(tablica, function(indeks, element) { } );
Podstawowe zasady jquery (2) Trzy koncepcje leżące u podstaw jquery to: Filozofia "pobierz działaj" Funkcja $ Fluent API Każda metoda jquery zwraca obiekt jquery, co pozwala łączyć działania na tych samych elementach w łańcuchy jquery("p").css("color", "red").filter(".dane").html("ala ma kota").end().show();
Podstawowe zasady jquery (3) Zdarzenie ready punkt startowy aplikacji $(document).ready(function() { }); Może występować w uproszczonej wersji $(function() { });
Selektory jquery (1) Biblioteka jquery posiada bardzo bogaty zestaw selektorów, bazujących na składni CSS wszystkie elementy - $("*") selektory HTML - $("a") selektory ID - $("#id") selektory klasy - $(".klasa") kontekst elementy pochodne - $("div a.menu") kontekst dzieci - $("div>a") kontekst rodzeństwo - $("span~a"), $("span+a") wartość atrybutu: $("a[rel]") $("a[rel=menu]") $("a[href^=http]") $("a[href$=.com"]) $("a[href*=onet"])
Selektory jquery (2) Biblioteka jquery posiada bardzo bogaty zestaw selektorów, bazujących na składni CSS selektory formularzy - $("input:radio"), $(":button") selektory wg. pozycji - :first, :last, :first-child :last-child, :only-child, :nth-child(n), :nth-child(even odd), :nth-child(an+b), :even, :odd, :eq(n), :gt(n), :lt(n).
Model DOM i jquery (1) Biblioteka jquery pozwala na przechodzenie po elementach drzewa DOM oraz dokonywanie ich modyfikacji Funkcja size() get(index) index(element) add(wyrażenie) not(wyrażenie) filter(wyrażenie) slice(pocz, kon) end() find(selektor) Opis Zwraca liczebność zbioru Pobiera jeden lub wszystkie elementy Zwraca indeks elementu Dodaje elementy w wyrażeniu do zbioru Usuwa elementy w wyrażeniu ze zbioru Filtruje elementy zbioru na podstawie wyrażenia Zwraca fragment zbioru Wykorzystane w ciągu metod jquery przywraca zbiór elementów do poprzedniego zbioru Zwraca listę elementów pochodnych zgodnych z selektorem
Model DOM i jquery (2) Biblioteka jquery pozwala na przechodzenie po elementach drzewa DOM oraz dokonywanie ich modyfikacji funkcja each(funkcja) attr(nazwa) attr(nazwa,wartość) removeattr(nazwa) addclass(nazwy) removeclass(nazwy) css(nazwa, wartość) css(nazwa) html(tekst), html() text(tekst), text() Opis Wywołuje funkcję przekazaną jako parametr na wszystkich elementach zbioru Zwraca wartość atrybutu Ustawia wartość atrybutu Usuwa atrybut Dodaje określone klasy do obiektów zbioru Usuwa określone klasy z obiektów zbioru Ustawia właściwość CSS Zwraca właściwość CSS Ustawia/zwraca zawartość wszystkich elementów zbioru Ustawia/zwraca zawartość tekstową we wszystkich elementach zbioru.
Model DOM i jquery (3) Biblioteka jquery pozwala na przechodzenie po elementach drzewa DOM oraz dokonywanie ich modyfikacji funkcja append(zawartość) wrap(element) wrapall(element) remove() empty() val() val(wartość) val(wartości) Opis Dołączazawartość przekazaną jako parametr do wszystkich elementów zbioru. Obejmuje obiekty w zbiorze elementem przekazanym jako parametr Obejmuje obiekty w zbiorze jako całość -elementem przekazanym jako parametr Usuwa wszystkie obiekty w zbiorze z drzewa DOM Usuwa zawartość wszystkich elementów w zbiorze Zwraca wartość właściwości "value" Ustawia właściwość "value" Powoduje, że wszystkie checkbox-y, radiobutton-y i obiekty selekt są wybrane, jeżeli wartość atrybutu value przyjmuje jedną z wartości przekazanych jako parametr
Model DOM i jquery (4) Za pomocą funkcji $ można tworzyć również nowe elementy HTML $("<div>witaj świecie</div>") $("<div>") $("<div/>")
Zdarzenia i jquery Biblioteka jquery pozwala na przypisywanie zdarzeń Podstawową metodą oferującą taką funkcjonalność jest bind bind(nazwazdarzenia, dane, funkcjaobsługizdarzenia) Najczęściej stosowane zdarzenia posiadają własne funkcje pozwalające je przypisywać do elementów: blur(), change(), click(), dblclick(), focus(), keydown(), keyup(), keypress(), load(), mousedown(), mouseenter(), mouseleave(), mousemove(), mouseout(), mouseover(), mouseup(), ready(), resize(), select(), submit(), toggle(), unload()
Ajax i jquery Biblioteka jquery pozwala na przypisywanie zdarzeń Podstawową metodą oferującą taką funkcjonalność jest bind $.ajax(opcje) $.get(url, parametry, funkcja) $.getjson(url, parametry, funkcja) $.post(url, parametry, funkcja) Najczęściej stosowane parametry funkcji $.ajax to: type - "GET" "POST" url datatype - "xml" "json" "script" "html" success
jquery UI (1) Dodatkowa biblioteka do jquery zawierająca dodatkowe kontrolki, które można wykorzystać na stronie Dostępna pod adresem: http://jqueryui.com
jquery UI (2)
jquery UI (3)