Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Wielkość: px

Rozpocząć pokaz od strony:

Download "Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk"

Mikołaj Szymczak
8 lat temu
Przeglądów:

1 Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk

2 Moduł 7 jquery

3 Agenda Czym jest jquery? Podstawowe zasady jquery Selektory jquery Model DOM i jquery Zdarzenia i jquery Ajax i jquery jquery UI

4 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

5 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) { } );

jquery("p").css("color", "red"); $("p").

6 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();

obiekt jquery, co pozwala łączyć działania na tych samych elementach w

7 Podstawowe zasady jquery (3) Zdarzenie ready punkt startowy aplikacji $(document).ready(function() { }); Może występować w uproszczonej wersji $(function() { });

8 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"])

klasa") kontekst elementy pochodne - $("div a.

9 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).

10 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

wszystkie elementy Zwraca indeks elementu Dodaje elementy w wyrażeniu do zbioru Usuwa elementy w wyrażeniu ze zbioru Filtruje elementy zbioru na podstawie

11 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.

przekazaną jako parametr na wszystkich elementach zbioru Zwraca wartość atrybutu Ustawia wartość atrybutu Usuwa atrybut Dodaje określone klasy do obiektów zbioru Usuwa

12 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

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

13 Model DOM i jquery (4) Za pomocą funkcji $ można tworzyć również nowe elementy HTML $("<div>witaj świecie</div>") $("<div>") $("<div/>")

14 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()

przypisywać do elementów: blur(), change(), click(), dblclick(), focus(), keydown(), keyup(), keypress(), load(), mousedown(),

15 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

16 jquery UI (1) Dodatkowa biblioteka do jquery zawierająca dodatkowe kontrolki, które można wykorzystać na stronie Dostępna pod adresem:

17 jquery UI (2)

18 jquery UI (3)

Podobne dokumenty

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie