Novinky v jQuery 1.4

jQuery je velmi dobře známý, široce používaný a oblíbený JavaScriptový framework. Dnes, tedy 14.1.2010 by měla být uvolněna jeho verze s pořadovým číslem 1.4. Pojďme se proto aktuálně podívat, jaké novinky pro nás jeho tvůrce připravil, a s jakými změnami se budou muset programátoři vypořádat.

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

Konvence: Protože framework jQuery je vlastně jen jeden objekt, který lze používat mnoha způsoby, bude v textu použita následující konvenci: Statická metoda je metoda, kterou voláme přímo nad jQuery objektem (např. jQuery.noConflic­t). Pokud bude řeč o metodě, myslí se tím metoda jQuery objektu, který dostaneme voláním $(„nějaký-selektor“) (např. $(„a“).addClas­s(„xy“)). Občas bude řeč o jQuery objektu jako o kolekci elementů, tím se myslí pouze to, že např. objekt který vrátí $(„a“) interně obsahuje kolekci všech DOM elementů <a/>.

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>]

Pracujete s HTML a chtěli byste své weby dostat na vyšší úroveň? Přijďte na školení JavaScript a AJAX, které pořádá Akademie Root. Naučíte se, jak používat moderní funkce dnešních prohlížečů. Naučíme vás používat JavaSctipt a AJAX, tvořit základní skripty a ovládnout web pomocí nových vlastností.

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ší…

Autor studuje softwarové inženýrství na ČVUT FEL, zabývá se vývojem běžných i méně běžných (Google Gadgets) webových aplikací. Se zájmem sleduje vývoj JavaScriptu a JS frameworků.

Komentáře: 28

Přehled komentářů

Honza Marek live
jtousek Re: live
virgee podle mne to funguje
Honza Marek Re: podle mne to funguje
jtousek Re: podle mne to funguje
Daniel Steigerwald Re: podle mne to funguje
blizzboz Re: Novinky v jQuery 1.4
Michal Augustýn Re: Novinky v jQuery 1.4
karf Re: Novinky v jQuery 1.4
Michal Augustýn Re: Novinky v jQuery 1.4
KLoK preklep
Martin Malý Re: preklep
Dave Re: preklep
Aichi jQuery učí lidi prasit
Pekelník Re: jQuery učí lidi prasit
c4tto Re: jQuery učí lidi prasit
Aichi Re: jQuery učí lidi prasit
Martin Malý Re: jQuery učí lidi prasit
Daniel Steigerwald Re: jQuery učí lidi prasit
Daniel Steigerwald Re: jQuery učí lidi prasit
Martin Malý Re: jQuery učí lidi prasit
Daniel Steigerwald Re: jQuery učí lidi prasit
Martin Malý Re: jQuery učí lidi prasit
Daniel Steigerwald Re: jQuery učí lidi prasit
dark Re: jQuery učí lidi prasit
Aichi Re: jQuery učí lidi prasit
karf Re: jQuery učí lidi prasit
Karel Minařík Re: jQuery učí lidi prasit
Zdroj: https://www.zdrojak.cz/?p=3155