Wrzesień 15th, 2013 
Dominik-W 
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.
Opublikowano w 
Tags: 
