WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1

Transkrypt

1 WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1

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

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

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

5 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=" ></script>

6 $(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.

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

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

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

10 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. }); <p>lorem...</p> Skrypt przypisze obsługę zdarzenia onclick wszystkim akapitom p występującym w dokumencie.

11 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. }); <p id="tresc">lorem</p>

12 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. }); <p class="inny">lorem</p>

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

14 ŁĄ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. }); <p><span>tu jest akapit</span></p> 8. <h4><span>tu jest nagłówek</span></h1>

15 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

16 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. }); <p><span>tu jest akapit</span></p> 8. <h4><span>tu jest nagłówek</span></h1>

17 WYBRANE METODY I ZDARZENIA CZĘŚĆ 2

18 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. }); <p>lorem</p>

19 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. }); <form action="#" method="post"> 9. <input type="text" name="imie" value="" /> 10. </form> 11. <div></div>

20 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. }); <p>lorem</p>

21 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. }); <p>lorem</p>

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

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

24 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; } $(document).ready(function(){ 4. $('p').click(function(){ 5. $(this).toggleclass('inny'); 6. }); 7. }); <p>lorem</p>

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

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

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

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

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

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

31 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

32 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> $(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. });

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

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

35 DZIĘKUJĘ ZA UWAGĘ MATERIAŁY POMOCNICZE