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.

Dominik Wlazłowski

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

     

Podaj dalej: 11001