jQuery 1.4 - co nowego - przykłady cz. 1

Na czwarte urodziny frameworku jQuery wydano jego nową wersję 1.4. Z największych nowości to ponownie wzrost wydajności (choć niektórzy donoszą, że na pewnych platformach jQuery 1.4 nie zawsze jest szybszy), nadawanie zdarzeń metodą live(), nowe metody wyszukiwania węzłów - *Until oraz closest, wbudowana obsługa easing'ów (które opisywałem we wpisie ...).

Zdarzenia i metoda live()

Dotychczas podczepianie zdarzeń w jQuery odbywało się poprzez określanie typu zdarzenia (np. click(), mouseover() itd.) lub ogólną metodą bind(). Nowa metoda live() pozwala nadawać zdarzenia nie tylko istniejącym węzłom (które zostałe pobrane przez jQuery), ale także kontrolować, czy węzły, które zostały wybrane nadal spełniają warunek (np. wyszukiwanie przez podanie klasy) lub czy nie zostały dodane nowe elementy spełniające warunek. W ten sposób nie musimy już troszczyć się o treści ładowane dynamicznie (np. poprzez AJAX).

Klasa A
Klasa B

$('.a').live('click', function() {alert('a')});
$('.b').bind('click', function() {$(this).append('
Klasa A
');});

Przykład:

Klasa A

Klasa B

Podczepianie wielu zdarzeń naraz

W przypadku, kiedy istnieje potrzeba nadania wybranym elementom kilka zdarzeń od najnowszej wersji można to zrobić wywołując metodę bind z parametrem obiektu json, gdzie klucz to nazwa zdarzenia (np. click), a wartość to funkcja (function() {}).

$('.a').bind({
    click: function(){alert('a');},
    mouseover: function() {$(this).css('color','blue')},
    mouseout: function() {$(this).css('color','black')}
});

Przykład:

Klasa A

Easing w animacjach

W najnowszej wersji wprowadzono możliwość definiowania własnych metod animacji (easingu), w nieco innej formie niż to było w poprzednich wersjach. Obecnie zdefiniowane są dwie metody swing oraz linear, a dodanie ich do metody animate polega na podaniu tablicy złożonej z wartości docelowej oraz metody easingu dla animowanego parametru, zamiast samej wartości.

$('.a').bind({
    click: function(){
        $(this).animate({
             top:[200, 'linear']
          }, 
          2000)
    }
});

Przykład:

Klasa A

Pauzy podczas animacji

Nowa metoda delay, pozwala na pauzę w łańcuchu animacji. Parametr metody określa ilość milisekund.

$('.a').bind({
    click: function(){
        $(this).slideUp().delay(2000).slideDown();
    }
});

Przykład:

Klasa A

Przy okazji polecam bardzo dobry Cheat Sheet dla najnowszej wersji frameworku.

A do testowania jQuery 1.4 zapraszam na Fiddle It.