Zajęcia 3
3. Zdarzenia, efekty i filtry
3.1. Zdarzenia
3.1.1. Metody zdarzeń
Metoda .on() jest używana do obsługi wszystkich zdarzeń.
Przykład 3.1.1.1.
$('li').on('click', function() {
$(this).addClass('complete');
});
3.1.2. Obiekt event
Każda funkcja obsługi zdarzeń otrzymuje obiekt event. Zawiera on metody i właściwości powiązane ze zdarzeniem, które wystąpiło.
Opis właściwości i metod:
- type - typ zdarzenia;
- which - kliknięty przycisk lub naciśnięty klawisz;
- target - element modelu DOM, który zainicjował zdarzenie;
- timeStamp - liczba milisekund, które upłynęły od 1.01.1970r. (tzw. czas systemu Unix) do chwili wystąpienia zdarzenia - nie działa w Firefoxie;
- preventDefault() - uniemożliwia zachowanie domyślne;
- stopPropagation() - zatrzymuje propagowanie zdarzeń do elementów nadrzędnych.
Przykład 3.1.2.1.
$(function() {
$('li').on('click', function(e) {
$('li span').remove();
var date = new Date();
date.setTime(e.timeStamp);
var clicked = date.toDateString();
$(this).append('<span class="date">' + clicked + ' ' + e.type + '</span>');
});
});
3.2. Efekty
3.2.1. Podstawowe efekty
Poprzez jQuery możemy rozbudować naszą stronę internetową o różne efekty:
- .show() - wyświetla wybrane elementy;
- .hide() - ukrywa wybrane elementy;
- .toggle() - przełącza między wyświetlaniem i ukryciem wybranych elementów;
- .fadeIn() - powoli rozjaśnia wybrane elementy, które na końcu stają się całkowicie widoczne;
- .fadeOut() - powoli przyciemnia wybrane elementy, które na końcu stają się całkowicie przezroczyste;
- .fadeTo() - zmienia przezroczystość wybranych elementów;
- .fadeToggle() - ukrywa lub wyświetla wybrane elementy przez zmianę ich przezroczystości (przeciwieństwo ich aktualnego stanu);
- .slideUp() - wyświetla wybrane elementy z efektem wślizgu;
- .slideDown() - ukrywa wybrane elementy z efektem wślizgu;
- .slideToggle() - wyświetla lub ukrywa wybrane elementy z efektem wślizgu (w kierunku przeciwnym do ich aktualnego stanu);
- .delay() - opóźnia wykonanie kolejnych elementów w kolejce;
- .stop() - zatrzymuje animację, jeśli jest aktualnie odtwarzana;
- .animate() - tworzy własne animacje.
Przykład 3.2.1.1.
Pobierz archiwum efekty w jQuery.
3.2.2. Animacje CSS
Metoda .animate() pozwala na tworzenie własnych efektów i animacji przez zmianę właściwości CSS.
.animate({
// style przeznaczone do zmiany
}[, speed] [, easing] [, complete]);
- parametr speed wskazuje długość animacji wyrażoną w milisekundach (można również użyć słów kluczowych slow i fast;
- parametr easing może przyjąć dwie wartości: linear (szybkość animacji jest stała) i swing (szybkość animacji zwiększa się w środku przejścia, natomiast na początku i końcu jest wolniejsza);
- parametr complete jest używany w celu wywołania funkcji, która powinna być uruchomiona po zakończeniu animacji - jest to tak zwana funkcja wywołania zwrotnego.
Wejdź na stronę jQuery animate() Method. Jest tam dostępna lista stosowanych w jQuery odpowiedników nazw właściwości CSS.
A jak animować kolor?
Wejdź na stronę jQuery plugin for color manipulation and animation support.
Przykład 3.2.2.1.
Korzystając z archiwum pobranego wcześniej z efektami w jQuery, podmień plik z kodem JavaScript na poniższy:
$(function() {
$('li').on('click', function() {
$(this).animate({
opacity: 0.0,
paddingLeft: '+=80'
}, 500, function() {
$(this).remove();
});
});
});
Ćwiczenie 3.2.2.1.
Napisz kod tworzący poniższą animację:
Rozwiązanie wyślij na repozytorium Githuba do katalogu Lesson_03. Skrypt z rozwiązaniem nazwij exercise_3221.html.
3.3. Nawigacja po modelu DOM
Gdy wybierzemy elementy w jQuery(), wymienione poniżej metody można wykorzystać w celu uzyskania dostępu do węzłów innych elementów powiązanych z początkowo wybranymi.
- .find(‘selektor’) - wszystkie elementy w zbiorze aktualnie wybranych, w których dopasowano selektor;
- .closest(‘selektor’) - najbliższy element nadrzędny (niekoniecznie bezpośredni) dopasowany do selektora;
- .parent() - bezpośredni element nadrzędny aktualnie wybranego;
- .parents() - wszystkie elementy nadrzędne aktualnie wybranego;
- .children() - wszystkie elementy potomne aktualnie wybranego;
- .siblings() - wszystkie elementy równorzędne aktualnie wybranego;
- .next() - nastepny element równorzędny aktualnie wybranego;
- .nextAll() - wszystkie nastepne elementy równorzędne aktualnie wybranego;
- .prev() - poprzedni element równorzędny aktualnie wybranego;
- .prevAll() - wszystkie poprzednie elementy równorzędne aktualnie wybranego.
Przykład 3.3.1.
$(function() {
var $h2 = $('h2');
$('ul').hide();
$h2.append('<a class="show">pokaż</a>');
$h2.on('click', function() {
$h2.next('ul')
.fadeIn(500)
.children('.hot')
.addClass('complete');
$h2.find('a').fadeOut();
});
});
Ćwiczenie 3.3.1.
Dany jest kod źródłowy HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tytuł strony...</title>
</head>
<body>
<header>
<h1 class="header header1">Nagłówek H1</h1>
<h2 id="header2" class="header">Nagłówek H2</h2>
</header>
<nav>
<ul>
<li><a href="/">Strona główna</a></li>
<li><a href="/newsy">Newsy</a></li>
<li><a href="/artykuly">Artykuły</a></li>
<li><a href="/opinie">Opinie</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
<section>
<h2>Sekcja 1</h2>
<article>
<h2>Formularz</h2>
<form action="http://www.jakaswitryna.com/review.php" method="get">
<fieldset>
<legend>
Szczegóły konta:
</legend>
<label>
Imię:
<input type="text" name="name" size="30" maxlength="100">
</label>
<br /><br />
<label>
Email:
<input type="email" name="email" size="30" maxlength="100">
</label>
<br />
</fieldset>
<br />
<fieldset>
<legend>
Kilka informacji o Tobie:
</legend>
<p>
Czy odwiedzisz nas ponownie?
<br />
<label>
<input type="radio" name="rating" value="yes" />
Tak
</label>
<label>
<input type="radio" name="rating" value="no" />
Nie
</label>
<label>
<input type="radio" name="rating" value="maybe" />
Może
</label>
</p>
<p>
<label for="comments">
Komentarz:
</label>
<br />
<textarea rows="4" cols="40" id="comments">
</textarea>
</p>
<label>
<input type="checkbox" name="subscribe" checked="checked" />
Chcę być informowany o aktualizacjach.
</label>
<br />
<input type="submit" value="Prześlij infomacje" />
</fieldset>
</form>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Popularne przepisy</h2>
<a href="">Grillowany kurczak</a>
<a href="">Mielone kotleciki z kurczaka</a>
<a href="">Smażone naleśniki</a>
<a href="">Gulasz z kurczaka</a>
</section>
<section class="contact-details">
<h2>Kontakt</h2>
<p>Dania świata <br />
ul. Poznańska 27 <br />
Poznań
</p>
</section>
</aside>
<footer>
© 2017 Dania świata
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="ex231.js"></script>
</body>
</html>
Dla podanych niżej elementów tej strony podaj bezpośredniego rodzica, najbliższy element nadrzędny <section>, następny i poprzedni element równorzędny oraz wszystkie elementy potomne:
a) sekcja klasy popular-recipes;
b) nawigacja strony <nav>;
c) sekcja boczna <aside>;
d) formularz.
Rozwiązanie wyślij na repozytorium Githuba do katalogu Lesson_03. Skrypt z rozwiązaniem nazwij exercise_331.js.
3.4. Filtry
3.4.1. Użycie filtrów
Po wybraniu elementów w jQuery do zbioru można dodać kolejne elementy metodą .add() lub filtrować istniejące, aby tym samym pracować jedynie z podzbiorem elementów. Możemy też sprawdzać, czy wybrane elementy są dopasowane do warunku (innego selektora) poprzez metodę .is(), która zwraca wartość boolowską.
Filtrowanie za pomocą drugiego selektora:
- .filter() - wyszukuje w dopasowaniu elementy, które są dopasowane do drugiego selektora;
- .find() - w dopasowanym zbiorze wyszukuje elementy potomne dopasowane do drugiego selektora;
- .not() / :not() - wyszukuje elementy, które nie są dopasowane do selektora;
- .has() / :has() - w dopasowanym zbiorze wyszukuje elementy, które mają elementy potomne dopasowane do selektora;
- :contains() - wybiera wszystkie elementy zawierające określony tekst (wielkość liter parametru ma znaczenie).
Na przykład poniższe zapisy są sobie równoważne:
- $(‘li’).not(‘.hot’).addClass(‘cool’);
- $(‘li:not(‘.hot’)’).addClass(‘cool’); - to działanie jest szybsze.
Przykład 3.4.2.1.
$(function() {
var $listItems = $('li');
$listItems.filter('.hot:last').removeClass('hot');
$('li:not(.hot)').addClass('cool');
$listItems.has('em').addClass('complete');
$listItems.each( function() {
var $this = $(this);
if ($this.is('.hot')) {
$this.prepend('Priorytetowe: ');
}
});
$('li:contains("miód")').append(' (lokalny)');
});
3.4.2. Wyszukiwanie elementów wg kolejności
Każdy element zwracany przez selektor jQuery ma przypisany numer indeksu, który może być wykorzystany do filtrowania wybranych elementów:
- .eq() - element dopasowany do numeru indeksu;
- :lt() - element o numerze indeksu mniejszym niż podany;
- :gt() - element o numerze indeksu większym niż podany.
Przykład 3.4.2.1.
$(function() {
$('li:lt(2)').removeClass('hot');
$('li').eq(0).addClass('complete');
$('li:gt(2)').addClass('cool');
});
3.4.3. Wybór z elementów
jQuery oferuje specjalne selektory zaprojektowane do pracy z formularzami sieciowymi. Jednak nie zawsze zapewniają one najszybszy sposób wybierania elementów. Jeżeli korzystamy z jednego z takich selektorów, jQuery przeanalizuje wszystkie elementy w dokumencie w celu znalezienia dopasowania (używając kodu jQuery, który nie działa tak szybko jak selektory CSS). Dlatego też zawęzić fragment dokumentu analizowanego przez skrypt. Odbywa się to przez umieszczenie nazwy elementu lub użycie innego selektora jQuery przed zastosowaniem selektorów wymienionych niżej.
Dostęp do elementu w formularzu sieciowym może odbywać się także za pomocą tych samych selektorów, które służą do wyboru dowolnego elementu w jQuery.
Selektory dla elementów formularza sieciowego:
- :button - elementy <button> i <input>, których atrybut type ma wartość button;
- :checkbox - elementy <input>, których atrybut type ma wartość checkbox - lepszą wydajność można uzyskać poprzez $(‘[type=”checkbox”]’);
- :checked - zaznaczone elementy w polach wyboru oraz przyciskach opcji;
- :disabled - wszystkie elementy, które są wyłączone;
- :enabled - wszystkie elementy, które są włączone;
- :focus - element, który jest aktualnie aktywny - lepszą wydajność można uzyskać za pomocą $(document.activeElement);
- :file - wszystkie elementy, które pozwalają na wybór pliku;
- :image - elementy <input>, których atrybut type ma wartość image - lepszą wydajność można uzyskać poprzez $(‘[type=”image”]’);
- :input - wszystkie elementy <button>, <input>, <select> oraz <textarea> - lepszą wydajność można uzyskać poprzez .filter(“:input”);
- :password - elementy <input>, których atrybut type ma wartość password - lepszą wydajność można uzyskać poprzez $(‘input:password’);
- :radio - elementy <input>, których atrybut type ma wartość radio - aby wybrać grupę przycisków opcji, można użyć $(‘input[name=”gender”]:radio’);
- :selected - wszystkie wybrane elementy - lepszą wydajność można uzyskać poprzez .filter(“:selected”);
- :submit - elementy <button> i <input>, których atrybut type ma wartość submit - lepszą wydajność można uzyskać poprzez [type=”submit”];
- :text - elementy <input>, których atrybut type ma wartość text - lepszą wydajność można uzyskać poprzez $(‘input:text’).
Zadania domowe
Zadanie 1.
Rozwiąż quiz dostepny na classmarker.com o nazwie Zajęcia 2,3 - jQuery.
Źródła
- Duckett Jon, JavaScript and JQuery: Interactive Front-End Web Development, przeł. Robert Górczyński, Helion, 2015, ISBN 978-83-283-0126-9.