Wstęp do jQuery - Instytutu Informatyki UJ

Programowanie w Sieci Internet
— jQuery - nowy aromat kawy
Kraków, 19 października 2012
mgr Piotr Rytko
Wydział Matematyki i Informatyki
Co będzie dziś
jQuery - nowy aromat kawy, czyli biblioteka do programowania w Java Script po stronie
klienta / programowanie dla przeglądarki.
• Wstęp do jQuery,
• składnia,
• pisanie w jQ,
• $.ajax(),
• kilka przydatnych funkcji,
• przykłady.
Wstęp do jQuery
Aby zacząć programować w jQuery nie trzeba nam dużo.
Po pierwsze musimy zdobyć jakąś świeżą (jak poranne bułeczki) bibliotekę jQuery.
Najświeższe biblioteki można zawsze znaleźć na stronie:
http://jquery.com/download/
lub jeśli masz dostęp do Git’a, to możesz pobrać go z repository:
git clone git://github.com/jquery/jquery.git
Następnie należy umieścić odpowiedni link do biblioteki w kodzie strony która ma zostać
obsłużona przez nasz skrypt (najlepiej zrobić to w sekcji nagłówkowej, aczkolwiek w
dowolnym miejscu na stronie będzie to działać).
<script src=jquery.js></script> <!-- zgodne z html5 -->
I już możesz rozpocząć działanie w skrypcie.
Wstęp do jQuery c.d.
jQuery umożliwia:
• manipulację kodem HTML / DOM,
• manipulację kodem CSS,
• obsługę eventów HTML,
• animacje i efekty wizualne,
• obsługę AJAX,
• oraz wiele innych.
Aby wykonać akcję na obiekcie wystarczy umieścić ją po kropce za selektorem obiektu:
$(selector).action();
np.: $(‘.initiallyHiddenClass’).show(‘slow’);
$(this) odnosi się do bieżącego elementu w aktualnym kontekście.
Funkcje callback wykonywane są po zakończeniu działania eventu np:
$(selector).show(2000,myFunction); <!-- Po zakończeniu animacji efektu show()
trwającego 2000 milisekund zostanie wywołana funkcja myFunction() -->
Składnia
Większość programów w JS jeśli miała się uruchomić po załadowaniu strony
wykorzystywało kod:
• window.onload = function(){ ... }
W jQuery można to zrobić na kilka sposobów:
• $(document).ready(function() { ... });
• $().ready(function() { ... });
• $(function() { ... });
• jQuery(document).ready(function($) { ... });
Składnia jQuery jest bardzo podobna do CSS. Selektory są definiowane tak jak w CSS.
Akcje bindowane do elementów mogą definiować własne działanie przez definiowanie
funkcji: $(selector).dblclic(function() { ... }); funkcje te mogą też przyjmować eventy
i operować na nich: $(‘a’).click(function(e) { e.preventDefault(); alert(‘Locked’); });
jQuery ma bardzo zwięzłą składnię łańcuchową. Każdy łańcuch rozpoczyna się od znaku
$, a kolejne polecenia dopinane są do łańcucha za pomocą kropki ‘.’
$(selektor).css(‘color’,‘red’).click(function(){ alert(‘ha, ha’); }).hide(‘slow’).show(‘fast’);
Pisanie w jQ
Aby debugować kod jQuery można wypisywać nieznane wartości przez alert(info); lub
mniej inwazyjnie dla użytkownika (w przypadku gdybyśmy zapomnieli usunąć debugu z
kodu przed wdrożeniem projektu) poprzez konsolę:
console.log(info);
Konsola jest dostępna przez firebug’a, dragonfly’a czy inspektora.
Zamiast pisać pętli for in można wykorzystać wbudowaną akcję .each(), w której można
zadeklarować funkcję, która ma zostać wykonana na każdym obiekcie zwróconym przez
selektor.
Jako, że niektóre akcje zwracają nowy obiekt a w jQuery akcje można umieszczać
łańcuchowo, nie zawsze chcemy się odwołać do nowo zwróconego obiektu. Wtedy
możemy skorzystać z metody .end() aby wrócić do poprzedniego elementu jQuery.
$.ajax()
AJAX służy do pobierania danych z zewnętrznego źródła i obrabiania go przez kod bez
konieczności przeładowywania strony.
$.ajax(argumenty);
argumenty:
• url - adres źródła danych (np.: “rss.xml”),
• type - typ zapytania (np.: “GET”),
• data - obiekt z danymi do wysłania w zapytaniu,
• async - czy zapytanie ma być przetwarzane asynchronicznie (domyślnie true),
• beforeSend - callback przed wysłaniem wiadomości,
• success - callbac na wypadek powodzenia,
• error - callback na wypadek niepowodzenia,
• complete - callback wykonywany po zakończeniu success lub error,
• i wiele innych.
Przydatne funkcje
Najczęściej przydają się funkcje automatyzujące animacje czy inne efekty na stronie.
• show() - rozwija element od górnego lewego rogu,
• hide() - chowa element zwijając go do górnego lewego rogu,
• toggle() - działa zamiennie tak jak show() i hide(),
• fadeIn(), fadeOut(), fadeToggle() - ukrywanie i pokazywanie elementu,
• fadeTo() - zmienia opacity elementu do zadanej wartości,
• slideUp(), slideDown(), slideToggle() - zwijanie w górę, w dół i zamienne,
• animate({parametry},speed,callbackFunction) - do animacji obiektów za pomocą
manipulacji stylami, np.:
$("div").animate({
height:’+22px’, width:’+22px’,left:’-11px’,top:’-11px’
});
• stop() - zatrzymuje akcje animacji i efektów,
Przydatne funkcje c.d.
• text() - zwraca wartość jedynie tekstową elementu (pomijając tagi HTML),
• html() - zwraca wartość zachowując wewnątrz strukturę drzewa DOM,
• val() - pobiera zawartość atrybutu value elementu,
jeśli podano wartość jako atrybut, to akcje te ustawią odpowiednio zawartości elementu
• attr(name,val) - jeśli brak val podaje wartość atrybutu name, wpp ustawia go na val,
• append() - dopina wartość z argumentu na koniec zawartości elementu,
• prepend() - jak wyżej, ale przed zawartością elementu,
• after() - dopina zawartość za danym elementem,
• before() - dopina zawartość przed danym elementem,
• remove() - usuwa dany element z drzewa DOM wraz z wszystkimi dziećmi,
• empty() - usuwa z drzewa DOM zawartość wraz z wszystimi dzieci danego elementu,
• addClass(), removeClass(), toggleClass(), css() - dodaje, usuwa ulasy i zmienia css,
• width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight() - zwracają
szerokości i wysokości elementu,
Przykłady
Kod jQuery:
$("div").animate({left:'200px',fontSize:'3em',width:'+=110px',height:'-=46px'},3000);
element do manipulacji na stronie:
<div style="height:100px;width:200px;">ANIMATE ME</div>
$.ajax({
!
type: "GET",
!
url: "time.xml",
!
success: function(data) {
!
!
T = $(data).find(‘time’);
!
!
!
!
$('.now').children().remove();
!
!
$('#schoolTable').children().remove();
!
!
var tmp = 0;
!
!
var i = 0;
!
!
$(‘.rows’).each(function(){
!
!
!
if(T > ++i)
!
!
!
!
tmp = i;
!
!
!
$('#schoolTable').append($(this));
!
!
}
!
!
if(T > S && T < E)
!
!
!
$('.now').append($(‘.rows:nth-child(‘+i+’)’).show();
!
!
else
!
!
!
$('.now').hide();
!
}
});
Dziękuję za uwagę!