WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1

Podobne dokumenty
JQuery. $('#pierwszy').css('color','red').hide('slow').show(3000); $(document).ready(function() { //... tutaj nasze skrypty jquery //...

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

Zajęcia 4 - Wprowadzenie do Javascript

DOM (Document Object Model)

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

SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania. Wykład 2. dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania,

za pomocą: definiujemy:

Rys.2.1. Drzewo modelu DOM [1]

Technologie Internetu. JQuery

HTML (HyperText Markup Language) hipertekstowy język znaczników

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Funkcje i instrukcje języka JavaScript

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: Wersja: 1.

Zaawansowane aplikacje internetowe

Tworzenie Stron Internetowych. odcinek 7

Przetwarzanie dokumentów XML i zaawansowane techniki WWW Zdarzenia w JavaScript (Zajęcia r.)

Kompresja stron internetowych

W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:

Podstawy JavaScript ćwiczenia

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Kaskadowe arkusze stylów (CSS)

WYKŁAD 1 ANGULARJS CZĘŚĆ 1

HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści

Programowanie WEB PODSTAWY HTML

Wykład 03 JavaScript. Michał Drabik

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XML extensible Markup Language. część 5

Technologie internetowe w programowaniu

Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap.

Podstawy technologii WWW

Programowanie w Sieci Internet jquery - nowy aromat kawy angular.js. Kraków, 24 października 2014 r. mgr Piotr Rytko Wydział Matematyki i Informatyki

HTML (HyperText Markup Language)

Pierwsza strona internetowa

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Angular, cz. II. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński

Czym jest AJAX. AJAX wprowadzenie. Obiekt XMLHttpRequest (XHR) Niezbędne narzędzia. Standardowy XHR. XHR z obsługą baz danych

jquery Aplikacje internetowe laboratorium jquery

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

Zdarzenia Zdarzenia onload i onunload

Przekształcenie danych przestrzennych w interaktywne mapy dostępne na stronach www (WARSZTATY, poziom zaawansowany)

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.

plansoft.org Zmiany w Plansoft.org

CSS - layout strony internetowej

Szablon główny (plik guestbook.php) będzie miał postać:

Dokumentacja Skryptu Mapy ver.1.1

Aplikacje WWW - laboratorium

ASP.NET MVC. Podstawy. Zaawansowane programowanie internetowe Instrukcja nr 3

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

XML extensible Markup Language. część 5

Innowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY

Elementarz HTML i CSS

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Ćwiczenie: JavaScript Cookies (3x45 minut)

Ćwiczenie 9 - CSS i wstawianie CSS

Tworzenie Stron Internetowych. odcinek 6

Laboratorium 6 Tworzenie bloga w Zend Framework

Aplikacje internetowe

ANIMACJE W CSS3. Czyli po co płacić podatek o Javy Script i JQuery

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

Backend Administratora


Laboratorium 7 Blog: dodawanie i edycja wpisów

Podstawy (X)HTML i CSS

I. Dlaczego standardy kodowania mailingów są istotne?

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH

Referat z przedmiotu Technologie Internetowe SPIS TREŚCI

REFERAT O PRACY DYPLOMOWEJ

Tworzenie Stron Internetowych. odcinek 10

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Zastosowanie kaskadowych arkuszy stylów (CSS - Cascading Style Sheets) w technologii JavaServer Faces

Tablica zawierająca odniesienia do znajdujących się w dokumencie obiektów typu Anchor.

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ

SUM Edukacja Techniczno Informatyczna Języki i Systemy Programowania. Wykład 3. dr Artur Bartoszewski - WYKŁAD: Języki i Systemy Programowania,

rk HTML 4 a 5 różnice

Selektory Pseudoklasy. Gabriela Panuś

Laboratorium 1: Szablon strony w HTML5

Budowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS)

PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, O STRUKTURZE PRZEDMIOTOWEJ

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

JAVAScript w dokumentach HTML (2)

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs

Szczegółowy opis zamówienia:

I. Formatowanie tekstu i wygląd strony

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Tworzenie stron internetowych w oparciu o język HTML

Dane - pobieranie, przekazywanie i przechowywanie. dr Beata Kuźmińska-Sołśnia

CZYM JEST JAVASCRIPT?

Pliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji:

Podstawy tworzenia stron internetowych

Hyper Text Markup Language

Aplikacje internetowe

Tworzenie Stron Internetowych. odcinek 9

Transkrypt:

WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1

CZYM JEST JQUERY? Biblioteka napisana w języku JavaScript, oparta na zasadzie write less, do more. Celem jej powstania było uproszczenie stosowania JavaScript na stronach. Dzięki jquery zadania, które zazwyczaj wymagają wielu linijek kodu JS można zapisać w postaci jednej linijki kodu i osiągnąć ten sam rezultat. Ponadto w jquery uproszczono wykorzystanie Ajax oraz manipulację drzewem DOM.

CZYM JEST JQUERY? jquery pozwala w wygodny i zrozumiały sposób korzystać z następujących funkcjonalności: Selektory - umożliwiają wybranie dowolnego podzbioru węzłów modelu DOM; Atrybuty - jquery pozwala przetwarzać atrybuty węzłów dokumentu; Manipulowanie modelem DOM; Zmiana i przypisywanie stylu do elementów; Rozbudowana obsługa zdarzeń, możliwość definiowania własnych; Efekty animacje; AJAX - prosty interfejs realizujący asynchroniczne zapytania;

DLACZEGO JQUERY? kod JavaScript opisujący zachowanie strony, jest odseparowany od zawartości (danych), a co za tym idzie może być łatwo edytowany; reakcje na zdarzenia kliknięć lub edycji nie zaśmiecają kodu HTML, dzięki czemu jest on krótszy i bardziej przejrzysty; niezależność od przeglądarki: IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+; obsługa selektorów zgodna z CSS3; małe rozmiary - zminiaturyzowana wersja to tylko 19KB; wygoda tworzenia wtyczek; jeden z najpopularniejszych framework ów JS; jeden z najprostszych frmawerk ów JS.

DOŁĄCZANIE DO STRONY Aby zacząć używać jquery, należy dołączyć plik biblioteki do strony internetowej w części HEAD lub przed końcem elementu </body>: <script src="js/jquery.js"></script> Innym sposobem jest dołączenie skryptu bezpośrednio z zewnętrznego źródła CDN (Content Delivery Network): <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" ></script>

$(DOCUMENT).READY() Każdy skrypt jquery rozpoczyna się od odpowiednika funkcji DOMContentLoaded, sprawdzającej, czy wszystkie elementy drzewa DOM zostały już załadowane. $(document).ready(function(){ }); lub $(function(){... }); Dobrą praktyką jest ładowanie funkcji JS po załadowaniu drzewa DOM, pozwala to unikać błędów, np. odczytywania wielkości obrazka, który się jeszcze nie załadował lub ukrywania warstwy, której jeszcze nie ma.

SKŁADNIA jquery ma zwięzłą konstrukcję skryptów, do której wykorzystuje składnię łańcuchową. Każdy taki łańcuch rozpoczyna się znakiem $, a poszczególne polecenia są łączone w łańcuchy za pomocą kropki. $('#pierwszy').css('color','red').hide('slow').show(3000); Powyższe polecenie wystarczy podzielić względem kropek: 1. Pobieramy obiekt o id #pierwszy, 2. ustawiamy mu kolor na red, 3. ukrywamy go powoli, 4. pokazujemy w czasie 3 sekund.

SKŁADNIA Oczywiście nie musimy wszystkiego pisać w jednej linii: $('#pierwszy').css('color','red').hide('slow').show(3000); to samo uzyskamy rozdzielając polecenia: $('#pierwszy').css('color','red'); $('#pierwszy').hide('slow'); $('#pierwszy').show(3000);

SELEKTORY To, co wyróżnia jquery to fakt, że swoje działanie opiera na składni arkuszy styli CSS, dzięki czemu powiązanie elementów HTML, styli CSS oraz operacji JavaScript jest intuicyjne. Tak więc przy wybieraniu elementów, na których będziemy pracować, korzystamy z nazw znaczników, id oraz class, tak jakbyśmy to robili w plikach CSS.

ELEMENT HTML Do wyboru wszystkich elementów zadanego typu służy selektor będący nazwą elementu. Akapity wybierzemy selektorem p, sekcje div - selektorem div, tabele - selektorem table. 1. $(document).ready(function(){ 2. $('p').click(function(){ 3. alert('kliknięto p'); 4. }); 5. }); 6. ---------------------------- 7. <p>lorem...</p> Skrypt przypisze obsługę zdarzenia onclick wszystkim akapitom p występującym w dokumencie.

IDENTYFIKATOR Jeśli element HTML zawiera identyfikator id, wówczas stosujemy selektor składający się ze znaku # oraz identyfikatora: 1. $(document).ready(function(){ 2. $('#tresc').click(function(){ 3. alert('kliknięto #tresc'); 4. }); 5. }); 6. ---------------------------- 7. <p id="tresc">lorem</p>

KLASA Selektor elementów wzbogaconych o klasę składa się z kropki i nazwy klasy: 1. $(document).ready(function(){ 2. $('.inny').click(function(){ 3. alert('kliknięto.inny'); 4. }); 5. }); 6. ---------------------------- 7. <p class="inny">lorem</p>

WARTOŚĆ ATRYBUTU Selektor: a[href="ipsum.html"] odnosi się do elementu a, którego atrybut href przyjmuje wartość ipsum.html. 1. $(document).ready(function(){ 2. $('a[href="ipsum.html"]').click(function(){ 3. alert('kliknięto ipsum.html'); 4. }); 5. }); 6. ---------------------------- 7. <ol> 8. <li><a href="lorem.html">lorem</a></li> 9. <li><a href="ipsum.html">ipsum</a></li> 10. <li><a href="dolor.html">dolor</a></li> 11. </ol>

ŁĄCZENIE SELEKTORÓW Podobnie jak w CSS tak i w jquery można łączyć selektory. 1. $(document).ready(function(){ 2. $('h4 span').click(function(){ 3. $(this).css('color','green'); 4. }); 5. }); 6. ---------------------------- 7. <p><span>tu jest akapit</span></p> 8. <h4><span>tu jest nagłówek</span></h1>

INNE SELEKTORY $("*") - wszystkie elementy $("p:first") - pierwszy akapit $("ul li:first-child") pierwszy element każdej listy $("[href]") - wszystkie elementy z atrybutem href $("a[target='_blank']") - wszystkie elementy <a> z target="_blank" $("a[target!='_blank']") - wszystkie elementy <a> z target!="_blank" $("tr:even") wszystkie parzyste elementy tr $("tr:odd") wszystkie nieparzyste elementy tr

REFERENCJA THIS Dostęp do bieżącego, wybranego elementu wewnątrz funkcji jquery zapewnia $(this) - referencja do obiektu, który wygenerował zdarzenie. 1. $(document).ready(function(){ 2. $('h4 span').click(function(){ 3. $(this).css('color','green'); 4. }); 5. }); 6. ---------------------------- 7. <p><span>tu jest akapit</span></p> 8. <h4><span>tu jest nagłówek</span></h1>

WYBRANE METODY I ZDARZENIA CZĘŚĆ 2

DOSTĘP DO TREŚCI DOKUMENTU Dostęp do treści elementu zapewnia metoda html(). Wywołana bez parametru zwraca bieżącą treść elementu. Wywołana z parametrem ustala nową treść: 1. $(document).ready(function(){ 2. $('p').click(function(){ 3. $(this).html('one, two,...'); 4. }); Po kliknięciu wstawi w akapit tekst z nawiasu. 5. }); 6. ---------------------------- 7. <p>lorem</p>

ODCZYT ATRYBUTÓW Dostęp do atrybutów zapewnia metoda attr(), której parametrem jest nazwa atrybutu HTML: 1. $(document).ready(function(){ 4. $('input').attr('value'); 6. }); 7. ---------------------------- 8. <form action="#" method="post"> 9. <input type="text" name="imie" value="" /> 10. </form> 11. <div></div>

PRZYPISANIE STYLU CSS Styl elementu zmienimy metodą css(), która pobiera dwa parametry: nazwę właściwości oraz wartość: 1. $(document).ready(function(){ 2. $('p').click(function(){ 3. $(this).css('color', 'yellow'); 4. }); 5. }); 6. ---------------------------- 7. <p>lorem</p>

PRZYPISANIE STYLU CSS Możliwe jest też przekazanie więcej niż jednego parametru: 1. $(document).ready(function(){ 2. $('p').click(function(){ 3. $(this). css({ 4. 'font-size' : '16px', 5. 'background-color' : '#ff0000', 6. 'height' : '60px' 7. }); 8. }); 9. }); 10. ---------------------------- 11. <p>lorem</p>

DODANIE KLASY Każdy element wybrany selektorem możemy dynamicznie wzbogacić o klasę. Umożliwia to metoda addclass(). 1..inny { color: yellow; } 2. ---------------------------- 3. $(document).ready(function(){ 4. $('p').click(function(){ 5. $(this).addclass('inny'); 6. }); 7. }); 8. ---------------------------- 9. <p>lorem</p>

USUNIĘCIE KLASY Aby usunąć klasy wywołujemy removeclass(): 1..inny { color: yellow; } 2. ---------------------------- 3. $(document).ready(function(){ 4. $('p').click(function(){ 5. $(this).removeclass('inny'); 6. }); 7. }); 8. ---------------------------- 9. <p>lorem</p>

ZAMIANA KLASY Aby cyklicznie zmieniać klasy wywołujemy toggleclass() dzięki temu jeśli klasa jest dodana, zostanie usunięta i vice versa: 1..inny { color: yellow; } 2. ---------------------------- 3. $(document).ready(function(){ 4. $('p').click(function(){ 5. $(this).toggleclass('inny'); 6. }); 7. }); 8. ---------------------------- 9. <p>lorem</p>

ZDARZENIA jquery zapewnia dostęp do pełnego zestawu zdarzeń HTML i JS. Duża część funkcji odpowiedzialnych za zdarzenia może być wywoływana na dwa sposoby. Pierwszym sposobem jest wywołanie z parametrem, którym jest funkcja: $('elementclass').click(function(){ }); Takie wywołanie definiuje funkcję obsługi zdarzenia. Drugi sposób wywołania to wywołanie bezparametrowe: $('p').click(); Powoduje ono uruchomienie zdarzenia (ang. trigger).

WIĄZANIE ZDARZEŃ Częstym sposobem definiowania zdarzeń dla danego elementu jest wykorzystywanie metody dołączającej on(). W przeciwieństwie do wcześniejszych przypadków, metoda ta wiąże dane zdarzenie ze wszystkimi elementami na stronie, także tymi, których jeszcze na niej nie umieściliśmy np. wygenerujemy je dopiero dynamicznie za pomocą JS. $('.elementclass').on('click', function() { }); Odczepianie zdarzenia następuje przez.off()

WIĄZANIE ZDARZEŃ 1. $('.elementclass').on({ 2. mouseenter: function(){ 3. $(this).css("background-color", "lightgray"); 4. }, 5. mouseleave: function(){ 6. $(this).css("background-color", "lightblue"); 7. }, 8. click: function(){ 9. $(this).css("background-color", "yellow"); 10. } 11. });

FILTRY jquery udostępnia sporo metod dodatkowych, które możemy wykorzystać do pobrania obiektów. Na przykład: eq(index) - pobiera z listy pobranych elementów element o danym indeksie, lt(index) pobiera elementy o indeksie mniejszym od danego, gt(index) - pobiera elementy o indeksie większym itp., filter(':odd') pobiera nieparzyste elementy filter(':even') pobiera parzyste elementy $('p:eq(0)').addclass('important'); $('p:lt(1)').addclass('important');

PORUSZANIE PO DRZEWIE DOM.parent() określa bezpośredniego rodzica danego elementu.parents() określa wszystkich rodziców danego elementu $("span").parent(); $("span").parents("ul"); parentsuntil() określa wszystkich rodziców aż do zadanego elementu $("span").parentsuntil("section");.children() - określa wszystkich potomków danego elementu $("div").children();.find() wynajduje elementy znajdujące się w danym elemencie $("p").find("span");

PRZYKŁAD: Kolorujemy wiersze tabeli - na inny kolor parzyste i nieparzyste. Jednak selektor ma nie dotyczyć wiersza <tr> zawierającego komórki <th> czyli nagłówka. 1. $('td').parent().filter(':odd').addclass('odd'); 2. $('td').parent().filter(':even').addclass('even'); 3. $('td:contains("wojtek")').next().addclass('important'); Wybieramy wszystkie komórki <td> tabeli. Za pomocą funkcji parent() wskazujemy na ich rodziców - wiersze <tr>. Następnie lista wierszy jest filtrowana. W pierwszym przypadku wybierane są tylko nieparzyste, a w drugim wyłącznie parzyste. Na koniec wybieramy wszystkie komórki zawierające słowo "Wojtek" i za pomocą funkcji next() wskazujemy elementy sąsiadujące z nimi.

EFEKTY WIZUALNE JQUERY jquery zawiera zestaw funkcji, za pomocą których możemy dodać do naszej strony efekty wizualne. Sześć pierwszych przyjmuje parametry slow, normal, fast oraz szybkość efektu w milisekundach..show() pokazuje element :.show("menu").hide() chowa element.fadein() element pokazuje się stopniowo.fadeout() element stopniowo staje się przezroczysty.slidein() element wsuwa się.slideout() element się wysuwa.animate() zaawansowana funkcja do animacji.toggle() wysuwa i wsuwa element naprzemiennie

PRZYKŁAD - AKAPITY 1. <div class="menu"> 2. <p>najedź na mnie!</p> 3. <p>albo na mnie!</p> 4. </div> 5. <p id="content">wtedy ja się pojawię!</p> ------------------------------------------------------------ 1. $(document).ready(function() { 2. $('#content').hide(); 3. $('.menu p').hover(function() { 4. $(this).css('color', 'red'); 5. $('#content').fadein(500); 6. }, function() { 7. $('#content').slideout(500); 8. }); 9. });

AJAX - ASYNCHRONICZNE ŁADOWANIE PLIKU Do załadowania zewnętrznego pliku służy metoda load(): $('#content').load("demo_test.txt"); Działa ona w oparciu o obiekt XMLHttpRequest. Dokument, którego adres URL jest podany jako parametr jest pobierany asynchronicznie w tle (Ajax). Jeśli przekażemy w niej parametr zostanie zwrócona zawartość elementu o tym parametrze z wczytywanego dokumentu: $('#content').load("demo_test.txt #p1");

AJAX - ASYNCHRONICZNE ŁADOWANIE PLIKU Dwie dodatkowe metody Ajax to metody pozwalające na komunikację z serwerem.get() i.post(). 1. $("button").click(function(){ 2. $.post("demo_test_post.asp", 3. { 4. name: "Ava Gardner", 5. city: "New York" 6. }, 7. function(data, status){ 8 alert("data: " + data + "\nstatus: " + status); 9 }); 10. });

DZIĘKUJĘ ZA UWAGĘ MATERIAŁY POMOCNICZE http://www.w3schools.com/jquery/default.asp https://jquery.com/