
Przedstawiamy 2. część kursu jQuery, w której opiszemy efekty, zdarzenia oraz operacje na DOM z użyciem tej biblioteki.
Krok dalej w jQuery
Zacznijmy od podstawowej obsługi efektów.
Metoda show() – powoduje dynamiczne pokazanie ukrytego elementu. Jako argumenty może przyjąć prędkość oraz funkcję zwrotną:
show( speed, callback )
Metoda hide() – ukrywanie elementu:
hide( speed, callback )
Metoda toggle() – przełączanie widoczności elementu: pokaż – gdy ukryty, schowaj – gdy widoczny:
toggle( switch )
Przykład – użycie metody toggle() na elemencie przycisku:
var flip = 0; $("button").click(function () { $("p").toggle( flip++ % 2 == 0 ); });
Zwijanie i rozwijanie elementu
Metody zmieniają widoczność elementu, robią to jednak z animacją (zwijanie / rozwijanie):
slideDown( speed, callback )
slideUp( speed, callback )
Fading – efekty przejścia
Tutaj natomiast występuje animacja pojawiania / znikania:
fadeIn( speed, callback )
fadeOut( speed, callback )
Zmiana stylu elementu
Możemy dynamicznie ustawić style elementu, używając metod: css(), addClass() i removeClass().
Przykłady użycia:
$(this).css('color', 'yellow'); // ustaw właściwość color $(this).addClass('inny'); // dodaj klasę CSS $(this).removeClass('inny'); // usuń klasę
Przykład 2 – iteracja:
$(document).ready(function(){ // kazdy li stanie sie niebieski $('li').css('color', 'blue'); });
Kaskada
Znamy to już z innych frameworków. Wiele metod może zostać ze sobą połączone w łańcuch.
Przykład:
$('li').css('color', 'yellow').append('- read more') .css('background','black'); // możemy to oczywiście wywołać jako 3 osobne instrukcje
Zdarzenia / Events
Kolejną, bardzo mocną stroną jQuery jest obsługa zdarzeń.
Przykład – pokaż alert po kliknięciu w paragraf:
$(document).ready(function() { $('p').click(function() { alert('Witaj'); }); });
Obsługę podwójnego kliknięcia uzyskujemy poprzez:
$('p').dblclick(function(){...});
Mysz
Metody obsługi myszy również znajdziemy w jQuery. Metody takie jak .mouseout(), .mouseOver(), i wiele, wiele innych, szczegółowo opisanych w dokumentacji.
Usuwanie obsługi zdarzenia dokonujemy poprzez unbind():
$('#switcher-narrow, #switcher-large').click(function() { $('#switcher').unbind('click'); });
Keyboard – klawiatura
Obsługa klawiatury w jQuery jest całkowicie bezbolesna.
Przykład:
$(document).ready(function() { $(document).keyup(function(event) { switch (String.fromCharCode(event.keyCode)) { case 'D': $('#switcher-default').click(); break; case 'N': $('#switcher-narrow').click(); break; case 'L': $('#switcher-large').click(); break; } }); });
Animacje – przykłady
Podstawowo, obsługa animacji w jQuery wygląda tak:
.animate({property1: 'value1', property2: 'value2'}, speed, easing, function() { alert('The animation is finished.'); } );
Np. efekt rozrastania się elementu:
$('#grow').animate({ height: 500, width: 500 }, "slow", function() { alert('Element urósł!'); });
Szybkość animacji określamy w drugim parametrze, w tym przypadku „slow” (powoli).
Przykład – pozycjonowanie elementów z efektem animacji:
$(document).ready(function() { $('div.label').click(function() { var paraWidth = $('div.speech p').outerWidth(); var $switcher = $(this).parent(); var switcherWidth = $switcher.outerWidth(); $switcher .animate({left: paraWidth - switcherWidth},'slow') .animate({height: '+=20px'}, 'slow') .animate({borderWidth: '5px'}, 'slow'); }); });
DOM i jQuery
Jak się możemy spodziewać, jQuery wyposaża nas w potężne narzędzia obsługi DOM.
Przykład – kiedy DOM jest gotowy, drugi paragraf w dokumencie (index 1) zostanie ukryty:
$(document).ready(function() { $('p:eq(1)').hide(); });
Przykład – dynamiczna zawartość:
$(document).ready(function() { $('p:eq(1)').hide(); $('a.more').click(function() { $('p:eq(1)').show(); $(this).hide(); return false; }); });
Przykład – dostęp do elementów DOM:
var myTag = $('#my-element')[0].tagName;
Przykład – DOM i manipulacja formularzem:
$('form#login') // ukryj wszystkie etykiety z klasą 'optional' .find('label.optional').hide().end() // dodaj czerwoną ramkę dla elementów input typu 'password' .find('input:password').css('border', '1px solid red').end() // dodaj obsługę akcji submit .submit(function() { return confirm('Are you sure you want to submit?'); });
Wstawianie nowego elementu do DOM – metody insertXXX()
Przykład – wstaw link na końcu artykułu:
$(document).ready(function() { $('<a href="#top">back to top</a>') .insertAfter('div.article p'); $('<a id="top"></a>'); });
Metoda insertAfter() – wstawia za wyznaczonym elementem. Do wstawienia czegoś przed element, użyjemy insertBefore().
Jest jeszcze inne podejście – dodawanie do elementu: prependXXX.
Przykład:
$('<a id="top" name="top"></a>').prependTo('body');
Wrapping elementów, czyli osadzanie elementu w określonym kodzie HTML
Przykład:
.wrap('<li id="foot-note-' + (index+1) + '"></li>');
Kopiowanie elementów możemy wykonać za pomocą metody clone(), np.:
// ten kod stworzy kopię pierwszego paragrafu w div'ie // z klasą "chapter" $('div.chapter p:eq(0)').clone(); // przykład 2 $('div.chapter p:eq(0)').clone().insertBefore('div.chapter');
Metody operowania na DOM – podsumowanie
1. Tworzenie nowych elementów w strukturze:
metoda $()
2. Wstawianie elementów wewnątrz elementu:
metody .append(), .appendTo(), .prepend(), .prependTo()
3. Wstawianie nowych elementów obok elementu:
metody .after(), .insertAfter(), .before(), .insertBefore()
4. Wstawianie nowych elementów HTML wokół wskazanych elementów – wrapping:
metody .wrap(), .wrapAll(), .wrapInner()
5. Zmiana elementów lub tekstu w nich zawartego:
metody .html(), .text(), .replaceAll(), .replaceWith()
6. Usuwanie elementów z wnętrza określonego elementu:
metoda .empty()
7. Usuwanie określonego elementu i jego potomków z dokumentu:
metoda .remove()
Podsumowanie
Opisaliśmy jak wygląda obsługa zdarzeń, efekty i animacje, a podsumowaniem metod służących do wykonywania operacji DOM kończymy 2. część podstawowego kursu jQuery.