Novinky v jQuery 1.4

jQuery 1.4 má novou formu dokumentace API, kterou najdeme na adrese api.jquery.com. V nové dokumentaci je možné filtrovat metody podle verze, ve které se objevily. Pojďme se tedy podívat, co nás čeká za novinky ve verzi 1.4

Novinky v API

http://api.jquery.com/…version/1.4/

Více callback funkcí

Mnoho metod nyní přijímá jako parametr i callback funkci. Metody pak pracují tak, že callback fci. zavolají a výsledek použijí jako svůj běžný textový parametr.

V případě, že jQuery kolekce obsahuje více elementů (a má to smysl), aplikuje se callback funkce na každý element zvlášť. Toto je patrně nejzajímavější využití této novinky. Funkce je pak volána s jedním nebo dvěma parametry (podle smyslu). První je vždy index v rámci kolekce elementů a druhý pak zpravidla původní hodnota atributu, který metoda mění.

Týká se to metod: after( function ), .append( function(index, html) ), .prepend( function(index, html) ), .before( function ), .html( function(index, html) ), .text( function(index, text) ), .val( function ), .replaceWith( function ), .wrap( wrappingFunction ), .wrapAll( wrappingFunction ), .wrapInner( wrappingFunction ), .addClass( function(index, class) ),  .css( propertyName, function(index, value) )

Příklad při použití .addClass()

$('ul li').addClass(function(i) {
  return 'item-' + i;
});

Události

.live( eventType, [ eventData ], handler )

Live nyní umí předávat eventData stejně jako .bind(). Tato metoda byla kompletně přepsána a nyní podporuje více událostí. Konkrétně: submit, change, mouseenter, mouseleave, focus a blur.

Dvě nové události: .focusin() a .focusout()

Jedná se o alternativu k .focus() a .blur(). Na rozdíl od nich, události .focusin() a .focusout() probublávají a můžeme je zachytit i na potomcích.

Traversování „až po“

V metodách pro traversování přibyly tři nové metody: .nextUntil( [ selector ] ), .parentsUntil( [ selector ] ) a .prevUntil( [ selector ] ). Umožní zahrnout do jQuery kolekce všechny elementy až po podmínku vyjádřenou selektorem. Například:

<ul>
    <li class="prvni">1</li>
    <li class="druhy">1</li>
    <li class="treti">1</li>
    <li class="ctvrty">1</li>
</ul>
$(".prvni").nextUntil(".treti");
// bude obsahovat [<li class="prvni">, <li class="druhy>]

Nové metody

.clearQueue( [ queueName ] )

Nová metoda, která vyprázdní frontu. Dříve bylo za tímto účelem nutno psát toto:

$("#test").queue(queueName, []); // nahrazení fronty novu prázdnou frontou

A přesně takto i vypadá implementace této nové metody.

.delay( duration, [ queueName ] )

Nová metoda delay pro přidání zpoždění do fronty. Parametr duration přímá i textová označení známá z efektů „fast“, „slow“ a pod.

Nyní je možné místo

$("#test")
    .fadeIn()
    .queue(function(){
        var el = $(this);
        setTimeout(function(){
            el.dequeue();
        }, 5000);
    })
    .fadeOut();

psát

$("#test").fadeIn().delay(5000).fadeOut();

.detach( [ selector ] )

Metoda pro vyjmutí jQuery kolekce elementů z DOM (zachová ale veškerá nastavení včetně data)

.unwrap()

Odstraní rodiče elementů (samotný element ale zachová). Funguje zhruba takto:

var x = $("#test");
x.parent().replaceWith(x);

.toArray()

Vrátí pole DOM elementů v jQuery kolekci. Má stejný výsledek jako .get() (bez parametru). toArray je ale jasnější název.

Nové statické metody

jQuery.contains( container, contained )

Nová statická metoda pro zjištění, jestli je nějaký DOM element uvnitř jiného:

jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false

S tímto souvisí i metoda .has( contained ), která má nově verzi s parametrem typu DOM.

jQuery.isEmpty­Object( object )

Statická metoda, která zkontroluje, jestli je daný objekt prázdný. Hodí se při práci s literálovým zápisem.

jQuery.isEmptyObject({}) // true
jQuery.isEmptyObject({ foo: "bar" }) // false

jQuery.isPlai­nObject( object )

Statická metoda, která zkontroluje, jestli zadaný objekt vznikl literálovým zápisem. Funguje na principu kontroly konstruktoru a prototypu objektu.

jQuery.proxy( function, scope ), jQuery.proxy( scope, name )

Implementace funkce „bind“ (nemá nic společného z .bind metodou jQuery), kterou možná znáte z jiných frameworků. Jako jeden z parametrů vezme funkci a vrátí novou, u které bude vždy zachován  obor platnosti (this bude reference na zadaný objekt – parametr scope – ať je volána odkudkoli a jakkoli).

 Uvažme následující příklad.

var obj = {
    name: "Jan Novák",
    test: function(){
        alert(this.name);
    }
};

Pokud bychom teď chtěli metodu obj.test volat po kliknutí na nějaký element, můžeme nyní psát.

$("#test").click( jQuery.proxy( obj, "test" ) );

Výhodné je také to, že jQuery.proxy při použití pro obsluhu události, zachová refernci na původní funkci. Prostě pro odstranění obsluhy události vzniklé pomocí jQuery.proxy můžeme použít přímo referenci na původní funkci. Nemusíme se starat o referenci na funkci, kterou vrátí jQuery.proxy.

$("#test").unbind( "click", obj.test );

jQuery.noop

Toto není nová metoda, ale nová vlastnost. Není to nic jiného, než prázdná funkce. Prostě

jQuery.noop = function (){};

Co se jinak nevešlo

.add( selector, context ), .closest( selector, [ context ] )

U Metody add a closest, které pracují se selektroem, je nyní možné specifikovat druhým parametrem context, ve kterém se bude selektor vyhodnocovat. Stejně tak jako tomu je u samotné $( selector, [context] ).

.offset( coordinates ), .offset( coordinates(index, coords) )

Metoda .offset nyní umožňuje i nastavení. Existuje i verze s callback parametrem (viz část „Více callback funkcí“).

.data( obj ), .data()

Metoda data umožňuje nyní pracovat přímo s objektovou strukturou a ne jen formou key – value, jak tomu bylo doposud.

$("#test").data({a: 1, b: 2});

$("#test").data(); // vrátí {a: 1, b: 2}

.index( selector ), .index()

Metoda index nyní kromě DOM elementu umí pracovat i přímo se selektorem, případně použije pro porovnání sousedy elementu. Složí k určení pozice elementu v jQuery kolekci vůči okolnímu DOMu.

jQuery()

Volání jQuery bez parametrů nyní vrátí prázdný jQuery objekt (s prázdnou kolekcí elementů).

jQuery( html, props )

Při vytváření DOM elementů z HTML kódu je nyní možné rovnou předat vlastnosti, které se budou na nově vzniklé elementy aplikovat

$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

Co se API přímo nedotklo

Novinky v API jsou jen malá část změn, velká část jQuery byla kompletně přepsána a optimalizována. O všech novinách a změnách nás autoři budou informovat každý následující den po dobu 14 dnů pomocí stránky http://jquery14.com/. Už to naznačuje, že vydání verze 1.4 bude velmi zajímavé sledovat. Určitě se máme na co těšit.  Vždyť jQuery má právě 4. narozeniny.

 Popřejme mu vše nejlepší…