jQuery 1.4 – co nowego?

Z dniem 14 stycznia 2010 roku oficjalnie udostępniono kod nowej stabilnej wersji biblioteki jQuery. Nowa wersja posiada sporo nowych możliwości. Poprawiono również szybkość frameworka między innymi dzięki przebudowie takich metod jak html() czy remove().
Jedną z nowych funkcjonalności, która zwróciła moją uwagę jest przekazywanie atrybutów do obiektu jQuery. Na przykład aby utworzyć element a z kilkoma atrybutami oraz an chor tekstem „Strona Design Concept” wystarczy użyć następującego kodu

$('<a/>', {  
id: 'design',  
href: 'http://designconcept.zzl.org',  
title: 'Design Concept',   
text: 'Strona Design Concept'  
});

Do popularnej metody addClass() możemy teraz jako parametr przekazać funkcję zwracającą oddzielone spacjami nazwy klas, które mają być dodane do elementu. Jest to bardzo przydatna nowość. Powiedzmy, że mamy nieuporządkowaną listę kilku li i chcemy nadać każdemu z nich klasę postaci item1 dla pierwszego, item2 dla drugiego itd. Zadanie to realizuje poniższy kod.

$('ul.lista li').addClass(function() {
var i = parseInt($(this).index()) + 1
return 'item' + i;
});

Kolejną nowinką jest metoda nextUntil(), która znajduje wszystkich braci określonego elementu występujących po nim, ale… do napotkania elementu przekazanego jako parametr metody. Najlepiej zilustruje to przykład. Dysponujemy zagnieżdżoną listą.

<ul class="lista2" style="list-style-type:none">
	<li>jeden</li>
	<li>dwa</li>
	<li>trzy</li>
	<li>cztery</li>
	<li>
	<ul>
		<li>jeden</li>
		<li>dwa</li>
		<li>trzy</li>
	</ul>
	</li>
	<li>pięć</li>
	<li>sześć</li>
</ul>

Poniższa linijka zmieni kolor czcionki na czerwony wszystkim elementom, aż do napotkania elementu li zawierającego treść „pięć”.

$('.lista2 li:first').nextUntil('li:contains("pięć")').css('color', 'red');

jQuery 1.4 daje nam do dyspozycji dwa nowe zdarzenia focusin i focusout, analogiczne do focus i blur, ale łatwiejsze w dopasowaniu do własnych potrzeb. Zdarzenie focusin zachodzi dla elementu wtedy gdy dostaje on fokus lub jeśli jakikolwiek element wewnątrz niego dostaje fokus. Poniższy listing ilustruje działanie tego zdarzenia.

$("p").focusin(function() {
	$(this).find("span").css('display','inline').fadeOut(2000);
});

Dodano też element, którego w poprzednich wersjach brakowało, a mianowicie opóźnienie animacji. Metoda delay(), bo o niej mowa jako argument przyjmuje czas opóźnienia w milisekundach. Poniżej najpierw wykonujemy slideUp(), następnie czekamy 1 sekundę i wykonujemy fadeIn().

$('#test2').slideUp(1000).delay(1000).fadeIn(1000);

Można też łatwo sprawdzić czy jakiś element zawiera inny element. Na przykład poniższa linijka sprawdza czy element div o identyfikatorze test3 zawiera element span. Jeśli tak zmienia kolor tekstu na pomarańczowy.

$('div#test3').has('span').css('color','orange');

Nowa metoda detach() umożliwia usuwanie elementów z drzewa DOM podobnie jak remove(). Między nimi istnieje jednak subtelna różnica – detach() zachowuje wszystkie dane związane z elementem (również przypisane zdarzenia).
Zapraszam do zobaczenia w praktyce sześciu z powyższych przykładów. Na stronie znajduje się spis wszystkich nowości i zmian. W celu zapoznania się ze wszystkimi możliwościami jQuery 1.4 warto odwiedzić nową dokumentację.