JQuery.

Slides:



Advertisements
Podobne prezentacje
Funkcje w PHP ABK.
Advertisements

Wprowadzenie do języka skryptowego PHP
Systemy rozproszone W. Bartkiewicz
Bezpieczeństwo aplikacji WWW
Podstawowe wiadomości
Komponenty bazy danych Baza danych Jest to uporządkowany zbiór powiązanych ze sobą danych charakterystycznych dla pewnej klasy obiektów lub zdarzeń,
XPath XSLT – część XPath. XSLT – część 12 XPath – XML Path Language Problem: –jednoznaczne adresowanie fragmentów struktury dokumentu XML.
XPath. XSLT – część XPath. XSLT – część 12 XPath – XML Path Language Problem: –jednoznaczne adresowanie fragmentów struktury dokumentu XML.
ASP.NET 2.0 AJAX Extensions 1.0
XSL Extensible Stylesheet Language 6 listopada 2003.
XPath. XSL – część 1..
Technologie XML Mgr inż. Michał Jaros Technologie XML wykład 3.
Przeglądarka Internetowa
Biblioteka do tworzenia agentów w środowisku RoboCup
AJAX Marek Hołówko Maciej Wojciechowski.
Systemy operacyjne Wykład nr 5: Wątki Piotr Bilski.
Tworzenie stron w języku WML jest zbliżone do tworzenia stron w HTML. W obydwu przypadkach używa się do tego celu znaczników (tagów). Zadaniem znaczników.
Forum internetowe, przykład skryptu, Funkcjonalność.
Made by Mateusz Szirch Kilka słów o JavaScript.
Aplikacje Internetowe
System webowy do tworzenia kolektywnych prototypów aplikacji sieciowych i mobilnych Łukasz Przywarty
P ISZ MNIEJ, RÓB WIĘCEJ - ZASTOSOWANIE J Q UERY Kamil Szumański s4126.
Wstęp do JavaScriptu Marek Magiera Październik 2003r.
ZESTAW DO NAUKI JAVASCRIPT
Otwieranie elementów w różnych ramkach
Promotor: dr.inż. Aleksandra Werner
ANNA BANIEWSKA SYLWIA FILUŚ
Prezentacja i szkolenie
System raportowania, ewaluacji oraz badania satysfakcji Klienta.
Instrukcja USOSweb Wersja: Opracował: Sebastian Sieńko Plany zajęć dodatkowych pracownika.
Tworzenie Aplikacji Internetowych dr Wojciech M. Gańcza 8.
Specjalizacja "Dziennikarstwo On-line„ asynchroniczny JavaScript i XML – AJAX Część 6 Prowadzący: Dariusz Jaruga
Zajęcia I Organizacja zajęć Rejestracja i uruchamianie makr
Wprowadzenie do CSS Okiełznać style.
Projektowanie stron WWW
Podstawy HTML RAMKi. Ramki Za ich pomocą możesz swobodnie podzielić okno przeglądarki na kilka części i w nich niezależnie przeglądać dokumenty. Ramki.
Aplikacje internetowe
J A V A S C R I P T Obiekty Opracowała: Anna Śmigielska.
Model obiektowy bazy danych
Smart Portal – podstawy użytkowania. W celu uruchomienia aplikacji Smart Portal, należy: -uruchomić nowe okno przeglądarki internetowej, -wpisać w pole.
HTML (ang. HyperText Markup Language ) – język do tworzenia stron internetowych opierający się na znacznikach, czy inaczej je nazywając – tagach. Język.
Temat 3: Okno dialogowe.
Mapy i dane Open Street Map Technogie map cyfrowych Andrzej Chybicki.
CSS - Selektory. Selektory Selektorem można nazwoć dowolny element języka HTML, dla którego chcemy zdefiniować parametry formatowania. Wyróżniamy następujące.
Obiekty DOM.
Opracowanie mgr Karol Adamczyk
1. Logowanie z usługą Active Directory. a) logowanie do domeny Windows 2003 Server odbywa się znacznie szybciej niż w poprzednich wersjach. b) nie ma odwołania.
Drzewo dokumentu html.
Iga Lewandowska I EMII MU
Adresowanie elementów struktury dokumentów - XPath.
I TY ZOSTAŃ WEBMASTEREM! CZĘŚĆ 2 – „STRUKTURA STRONY” STWORZYŁ GABRIEL ŚLAWSKI.
Łukasz Bieszczad Mateusz Gałązka Karol Włodarek
Wykład 4 Dr Aneta Polewko-Klim Dr Aneta Polewko-Klim
Wykład 2 Programowanie obiektowe. Programowanie obiektowe wymaga dobrego zrozumienia działania funkcji definiowanych przez użytkownika, w ten sposób będziemy.
Portal edukacyjny J A V A S C R I P T JĘZYK PROGRAMOWANIA STRON HTML Opracowała: Anna Śmigielska.
Temat: Porównanie technologii php,c# oraz javascript na przykładzie webaplikacji typu społecznościowy agregator treści Autor: Wojciech Ślawski.
 Podstawowy składnik.NET Framework  Technologia tworzenia w pełni dynamicznych stron internetowych działających po stronie serwera  Zorientowanie na.
ASP.NET Tworzenie i zarządzanie wyglądem aplikacji, tworzenie mapy witryny. Kontrolki nawigacyjne.
JQuery w Visual Studio Autor projektu Co robi jQuery? Podstawowe informacje Zalety korzystania z biblioteki Przykłady.
AJAX w PHP.
SQL Server Analysis Services Action!
Klasy, pola, obiekty, metody. Modyfikatory dostępu, hermetyzacja
Framework css Prezentacje wykonał: szymon kupper
AudaPad / AudaShare AudaShare PRO (2.8)
PROGRAMY DO KONTROLI RODZICIELSKIEJ
PROGRAMY DO KONTROLI RODZICIELSKIEJ
Aplikacje i usługi internetowe
Aplikacje i usługi internetowe
Zapis prezentacji:

jQuery

Dlaczego jQuery?

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

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

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’); }

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

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

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

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", "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

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") ); });

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") …

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") ); });

Biblioteka interfejsu - UI $("#accordion").accordion({header:"h3"}); $("#datepicker").datepicker(); $("#dialog").dialog(); $("#tabs").tabs();

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

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

Wady jQuery Wady W pełnej wersji zajmuje 120kB Niektórzy użytkownicy blokują JavaScript