Seriál jQuery – 2. díl

V minulém díle jsme si nastínili základní vlastnosti jQuery. Dnes si ukážeme operace s objektem $(), práci se selektory a jak předejít kolizím s jinými knihovnami.

Nevtíravý JavaScript

Dříve byla situace s JavaScriptem taková, že jej nebral nikdo vážně. Důvodem byla jeho odlišná implementace mezi různými prohlížeči (to samé platilo pro implementaci DOM stromu), a obecné používání pofidérních kódových snippetů metodikou copy & paste. Takový kód bylo velmi obtížné udržovat a snad i nemožné ladit. Postupem času se zvyšovala poptávka po robustních aplikacích postavených na JS, proto přišlo několik chytrých hlav s nápadem, aby se na webový dokument nahlíželo jako na tři vrstvy, které fungují nezávisle na sobě:

nejnižší vrstva patří samotnému obsahu stránky a je definována pomocí HTML a textu
druhá vrstva popisuje vzhled stránky a je řízena kaskádovými styly
třetí vrstvu popisuje chování stránky, jehož základ tvoří JavaScript.

Představme si, že bychom bez této poučky vytvářeli webovou stránku: předpisy kaskádových stylů budeme psát přímo uvnitř HTML kódu, JavaScript taktéž. Stane se to, že stránky budou z hlediska údržby neúnosné. Dále si představme, že generujeme obsah či HTML kód převážně JavaScriptem. Co se stane lidem, kteří jej nemají aktivovaný? Jednoduše obsah neuvidí. Proto se snažíme vždy o to, aby obsah byl definován na HTML vrstvě, kde to jen půjde.

Oddělením těchto tří vrstev od sebe zajistíme, aby základní funkcionalita a přístupnost stránky nebyly narušeny.

Objekt $()

Nyní se zaměříme na hlavní objekt jQuery, jenž je zastoupen znakem dolaru – $(). Jako parametry mu můžeme předat CSS selektor nebo HTML element, který chceme dotazem zaměřit. Výsledkem dotazu je pole objektů, se kterými můžeme manipulovat různými způsoby pomocí knihovních funkcí, jenž máme s jQuery k dispozici.

Nyní si ukážeme, jak takový jednoduchý výběr elementů vypadá:

$(".trida") - vyber všechny elementy s třídou .trida
$("#id") - vyber všechny elementy s ID #id
$("#id .trida) - vyber všechny elementy s třídou .trida
                 jenž jsou potomkem elementu s id #id
$("p") - vyber všechny odstavce na stránce

Krása selektorů jQuery leží v možnosti aplikovat CSS3 pravidla bez ohledu na to, zda je prohlížeč podporuje či ne. Následující příklad znázorňující použití CSS3 selektoru bude proto fungovat i ve starších prohlížečích, jako je Internet Explorer 6:

$("p.trida:first-child") - vyber prvního potomka elementu p,
                           jenž má přiřazenou třídu .trida

Metody a události

Se samotným výběrem selektoru nelze samo o sobě nikterak pracovat, proto přicházejí do hry metody a události.

Metody

Metody v jQuery jsou funkční prvky, které s námi vybranými elementy něco dělají. Metod v jQuery je spousta, kompletní výčet lze nalézt ná stránkách jQuery (jQuery API reference). K vybranému elementu/elementům se metoda přidává tečkovou notací. Počet metod, které lze k elementu přidat, není omezen:

$(body).hide().animate().add()...

Co lze tedy s metodami v jQuery dělat? Například:

přidávat elementům třídy
odstraňovat třídy
přepínat třídy
manipulovat s textem uvnitř elementu
manipulovat s vlastnostmi elementů
filtrovat elementy
vytvářet za běhu nové elementy
manipulovat s CSS vlastnostmi elementů
skrývat elementy
spouštět animace
spouštět události

Dejme tomu, že chceme upravit stylový předpis pro všechny elementy odkazu. K tomuto účelu nám slouží metoda .css():

$("a").css({"text-decoration":"none"})

Události

Události jsou typem metod, které se volají až po splnění určitých podmínek. Tím se myslí interakce uživatele se stránkami, například najetí kurzoru myši na určitý element nebo stisknutí pravého tlačítka myši. Události lze však také spouštět automaticky, akce ze strany uživatele proto není bezpodmínečně nutná.

Událost ready()

První událostí, kterou je potřeba znát, je ready(). Slouží k spuštění funkcí až po načtení DOM stromu. Je důležité upozornit, že tato událost nečeká na načtení ostatního obsahu na stránce, tzn. obrázků, flashových animací apod.

Nejčastěji se tato událost volá ve spojení s $(document). Důvod je ten, že potřebujeme často spustit JavaScriptový kód až po načtení DOM stromu celého dokumentu.

Nyní si ukážeme příklad, kdy změníme všem odkazům stylový předpis až po načtení dokumentu:

$(document).ready(function(){

        $("a").css({"text-decoration":"none"});

});

Pamatujte, že veškerý kód, který chceme po načtení dokumentu spustit, musí být uzavřen do anonymní funkce.

Událost hover()

Další velmi často používanou událostí je hover(). Dovoluje nám spouštět libovolné funkce po najetí kurzoru na element. Požaduje 2 argumenty; funkci, která se spustí po najetí kurzoru na element a funkci, která se spustí ve chvíli, kdy kurzor element opustí.

Dejme tomu, že chceme upozornit uživatele na proběhnutou akci po najetí na element s třídou .upozornit:

$(document).ready(function(){

        $(".upozornit").hover(
                function(){
                        alert("Najel jste na element");
                },
                function(){
                        alert("Opustil jste element");
                }

        );

});

Nezapomínejte na to, že jednotlivé funkce pro najetí a opuštění jsou od sebe oddělené čárkou. Výsledek:

lorem ipsum, najeď na mě!

Sdílet: