Linux E X P R E S, jQuery (6) – práce s atributy a vlastnostmi

Stručně o atributech a vlastnostech

Atributy zná každý, kdo někdy něco tvořil v (X)HTML. Pomocí atributů se specifikuje například identifikátor objektu, třídy, styly, jazyk a spousta dalších vlastností. Někdy se uvádějí explicitně (pokud je potřeba je ovlivnit), většina jich je ale implicitních, s výchozími nebo prázdnými hodnotami.

Z atributů vycházejí vlastnosti (properties). Zatímco atribut specifikuje výchozí hodnotu, vlastnost může někdy nabývat různých hodnot na základě nějakých událostí v objektu. Mějme například následující HTML kód:

<input type="checkbox" name="cb" value="abc" id="cb" checked="checked" title="Zaškrtávátko">

Definuje zaškrtávací políčko a to se zobrazí již zaškrtnuté. Pokud uživatel na políčko klikne, zůstane hodnota atributu beze změny (bude odpovídat řetězci „checked“), kdežto hodnota vlastnosti se změní z true na false.

Hodnoty atributů i vlastností lze v JavaScriptu (a tedy i v jQuery) nejen číst, ale také nastavovat. Někdy se tak činí univerzálními metodami, jindy je výhodnější použít speciální metody, které pracují třeba jen s určitou částí (to je třeba případ metody css(), na kterou přijde řeč později).

Pozor – starší verze jQuery (před 1.6) nebyly při práci s atributy a vlastnostmi konzistentní. Pro některé atributy se tehdy vracely hodnoty vlastností, čemuž pak odpovídal i kód, který s tím pracoval. Ve starším kódu tedy ještě můžete najít práci s atributy, která neodpovídá popisu uvedenému v tomto článku.

Kromě „nativních“ vlastností (souvisejících s atributy definovanými ve specifikaci (X)HTML) lze pracovat i s prakticky libovolnými dalšími vlastnostmi objektů. Ty nejsou spojeny s atributy a nemají interní význam. Obdobně si lze definovat i vlastní atributy, ale to obecně není dobrý nápad, protože naruší validitu dokumentu.

Zjišťování hodnot atributů a vlastností

Pro výše uvedený kus HTML kódu lze napsat například takovýto javascriptový kód:

var chkattr = $('#cb').attr('checked');
var chkprop = $('#cb').prop('checked');

První řádek zjistí hodnotu atributu checked. Ta bude odpovídat řetězci, který byl nastaven, tedy „checked“. Nebude se měnit při změně stavu zaškrtnutí; změní se však v případě přímé změny atributu (viz dále). Druhý řádek zjišťuje hodnotu vlastnosti checked. Ta bude true pro zaškrnuté políčko, resp. false pro nezaškrtnuté.

Není na tom nic složitého. Jsou však případy, kdy je vhodnější použít pro získání hodnoty vlastnosti specifickou metodu. Máme například tento HTML kód:

<input type="text" name="txt" value="původní text" id="txt">

Hodnotu atributu – tedy původní text obsažený v daném textovém poli – lze získat úplně stejně jako u toho zaškrtávátka:

var txt = $('#txt').attr('value');

Ovšem pro získání hodnoty je lepší použít val() a nikoli prop():

var txt = $('#txt').val();

Důvodů je hned několik. Jednak je val() v moderních prohlížečích rychlejší. Podstatnějším důvodem je jednotnost při práci s různými druhy vstupů, protože například pro získání textu z objektu textarea metodu prop() nelze použít. A konečně nejdůležitějším důvodem je konzistence chování nezávislá na prohlížeči.

Dalším podobným případem je třeba práce s CSS třídami. Pokud potřebujeme zjistit, zda má některý objekt určitou třídu, lze to udělat takto:

if ($('#hdr').hasClass('first')) {
...
}

Tento kód zjistí, zda má daný objekt přiřazenu určitou třídu (může jich mít víc), a pokud ano, něco se vykoná.

Pozor na to, odkud daná metoda získává hodnoty. Například metody attr(), prop() nebo val() berou vždycky první objekt z množiny v instanci jQuery (ostatní ignorují), metoda hasClass() vrátí true, pokud má danou třídu kterýkoli objekt. Je potřeba si vždy zjistit v dokumentaci, jak to v tom kterém případě je.

Pokud zvolíte metodu attr() nebo prop() pro neexistující atribut/vlastnost, vrátí hodnotu undefined.

Nastavování hodnot atributů a vlastností

Opakem zjišťování hodnot je jejich nastavování. Používají se obvykle totožné (stejně nazvané) metody jako při zjišťování hodnot, případně metody logicky konzistentní (viz dále).

Jak tedy například změnit stav zaškrtávátka? Je to jednoduché:

$('#cb').prop('checked', true);
$('#cb').prop('checked', !$('#cb').prop());

První řádek políčko zaškrtne, druhý řádek invertuje jeho stav (udělá vlastně totéž, jako když na něj uživatel klikne; neřešíme ale teď události, které nastávají). Lze to implementovat podstatně elegantněji, k tomu se ale dostaneme někdy později.

$('#cb').attr('checked', 'checked');

Je to k něčemu dobré? Ano, k nastavení výchozí hodnoty. Hlavně se ale metoda attr() používá u atributů, které nepodléhají změnám tohoto typu. Například takto lze změnit atribut title:

$('#cb').attr('title', 'Nový titulek');

Metodu val() lze použít pro nastavování, pokud se pracuje s objekty pro vstup dat, resp. je to ta správná cesta.

Na rozdíl od použití ke zjišťování hodnot, tady se metody prop(), attr() a val() aplikují na všechny objekty v instanci jQuery. To znamená, že lze nastavovat hodnotu více objektům najednou.

Co se týká CSS tříd, lze s nimi přímo manipulovat pomocí sady metod:

$('#cb').addClass('abcd').removeClass('efgh ijkl');
$('#cb').toggleClass('abcd');
$('#cb').toggleClass('abcd', true);

První řádek ukazuje použití hned dvou metod: addClass() třídu přidává, removeClass() dvě jiné třídy odebírá. Druhý řádek invertuje přítomnost třídy – tedy pokud třída není přítomna, přidá ji, jinak ji odebere. A konečně třetí řádek představuje jiné použití metody toggleClass(), protože ji lze použít místo zmíněných dvou metod. Hodnota true znamená přidání jedné či více tříd, false naopak odebrání.

Odebírání atributů a vlastností

V některých případech – a nebývá to moc často – je potřeba atribut nebo vlastnost z objektu odebrat. Zaškrtávací pole, které se táhne celým tímto článkem, má v HTML definovaný titulek a ten můžeme odebrat:

$('#cb').removeAttr('title');
$('#cb').removeProp('title');

První příkaz odebere příslušný atribut, druhý odebere vlastnost. Jaký je mezi nimi rozdíl? Velmi podstatný. Odebrání atributu způsobí, že atribut i související vlastnost zcela zmizí. Ovšem odebrání vlastnosti nastaví atribut na hodnotu undefined a ta se přenese i do vlastnosti, ovšem ve formě řetězce. Může to být divné, ale je to tak. Proto je v daném případě metodou volby removeAttr().

Popsané chování platí pro nativní vlastnosti, propojené s atributy. Pokud máme v objektu nějakou svoji speciální vlastnost, chování bude jiné:

$('#cb').prop('origtitle', $('#cb').attr('title'));
…
$('#cb').attr('title', $('#cb').prop('origtitle')).removeProp('origtitle');

Příklad uschová do vlastnosti origtitle původní hodnotu atributu title, ve druhé fázi ji zase opačným procesem obnoví a vlastnost origtitle odebere.

Práce s CSS

Speciálním případem práce s atributy a vlastnostmi je ovládání CSS. Často je vhodné to řešit přes třídy (přidávání a odebírání tříd popsané výše), někdy je ale vhodnější nebo dokonce nezbytné nastavovat styly přímo. Na to se podíváme příště.