Toto je 2. díl seriálu JQuery, pokud se dostatečně neorientujete, zkuste první díl.
Toto je 2. díl seriálu JQuery, pokud se dostatečně neorientujete, zkuste první díl.
V minulém díle tohoto seriálu jsme si připoměli, jakým způsobem je možné pomocí jQuery operovat s HTML DOM, nebo-li s HTML elementy v naší webové stránce:
$(výběr).operace()
Nyní si projdeme několik těch nejvíce používáných metod, které jQuery nabízí pro práci s DOM a uvedeme si příklady.
Tyto metody umožňují přidání nové CSS třídy do class atributu elementu (addClass()) nebo odebrání existující (removeClass()).
Nastavení stylu jedné z položek menu na aktivní, nebo-li právě vybranou položku.
.active {font-weight: bold;}
$('#menu-kontakt').addClass('active');
<a id="menu-kontakt" href="/kontakt">Kontakt</span>
attr('název-atributu') - Získá aktuální hodnotu vybraného HTML atributu elementu.
attr('název-atributu', 'hodnota') - Nastaví hodnotu vybraného HTML atributu elementu.
prop('název-vlastnosti') - Získá aktuální hodnotu vybrané vlastnosti elementu.
prop('název-vlastnosti', 'hodnota') - Nastaví hodnotu vybrané vlastnosti elementu.
Jaký je rozdíl mezi atributem (attribute) a vlastostí (property)? Obojí se píše jako "parametr" HTML elementu:
<option value="1" selected>Jedna</option>
Jednoduše řečeno, parametry HTML elementu, které uživatel může svou interakcí s webem změnit, jsou vlastnosti. Zatímco ty, které změnit nemůže, jsou atributy. Obecně se ale souhrně pro všechny parametry HTML elementů používá název atributy.
U výše zmíněného příkladu s <option> by type byl atribut a selected by byla vlastnost. To protože <option> je zpravidla jedna z hodnot, kterou si uživatel může vybrat ze select boxu (<select>) a jakmile překlikne na jinou volbu než "Jedna", nastaví se vlastnost selected jinému elementu <option>.
V této ukázce předstíráme, že naše webová aplikace umožňuje uživateli nastavit si, jestli se mu externí odkazy budou otevírat v novém okně prohlížeče, nebo ve stejném okně prohlížeče.
if (window.localStorage.getItem('settings.externalLinksInNewWindow')) // == true$('a.external').attr('target', '_blank');else$('a.external').attr('target', '_self');
<a class="external" href="http://example.com/">example.com</a>
Metoda append('obsah') přidá obsah do elementu před koncovou značku, zatímco prepend('obsah') přidá obsah na začátek elementu, za otevírací značku.
Obsah může obsahovat jak text, tak i HTML.
$('nav').append('<a href="/kontakt">Kontakt</a>');
<nav><a href="/home">Domů</a><a href="/sitemap">Mapa stránky</a></nav>
Vymaže element z DOM.
Vymazání položky menu, která odkazuje na aktuální stránku. Za normálních okolností bychom použili spíše metodu hide() a nebo bychom té položce nastavili nějaký neproklikávací stav. Ale tentokrát ji prostě odstraníme:
var cesta = window.location.pathname;$('a[href="' + cesta + '"]').remove();
<nav><a href="/home">Domů</a><a href="/sitemap">Mapa stránky</a><a href="/kontakt">Kontakt</a></nav>
html('Nový obsah') - Nastaví obsah elementu, argument může obsahovat HTML. Pokud má element nějaký obsah před voláním této metody, bude vymazán.
html() - Získá obsah elementu.
html('') - Vymaže obsah elementu. Stejné jako empty().
Metoda val() se používá ve spojení s formulářovými prvky stejným způsobem, jako html() s ostatními elementy.
Získání jména a nahrazení jména za pozdrav.
$('#name').html('Hello, ' + $('#name').html());
<h1 id="name">George</h1>
Získání hodnot přihlašovacího formuláře.
$('input[name="uzivatelske-jmeno"]').val(); // získá zadané uživatelské jméno$('input[name="uzivatelske-heslo"]').val(); // získá zadané uživatelské heslo$('#doba-prihlaseni').val(); // získá 1440 a nebo jinou hodnotu <select>, kterou si uživatel vybral
<input type="text" name="uzivatelske-jmeno"><input type="password" name="uzivatelske-heslo"><label for="doba-prihlaseni">Zůstat přihlášen na:</label><select id="doba-prihlaseni"><option value="60">Hodinu</option><option value="1440" selected>Den</option><option value="43200">Měsíc</option></select>
Bez číselného argumentu získá šířku/výšku elementu. S číselným argumentem nastaví výšku/šířku elementu.
Získání výšky vykreslovací oblasti prohlížeče.
$(window).height();
css('název CSS pravidla') - Získá hodnotu CSS stylu elementu.
css('název CSS pravidla', 'hodnota') - Nastaví hodnotu CSS stylu elementu.
css(objekt) - Nastaví více CSS stylů elementu. Objekt by měl být ve formátu:
{ 'název CSS pravidla': 'hodnota', 'název CSS pravidla': 'hodnota', 'název CSS pravidla': 'hodnota', ... }
Nastavení výšky a šířky headeru tak, aby s fotkou na pozadí zabral celou obrazovku.
body {margin: 0;padding: 0;}header {background-image: url(img/background.jpg);background-size: cover;}
$('header').css({width: $(window).width()+'px',height: $(window).height()+'px'});
<header></header>
Obě tyto funkce umožňují nastavit nebo získat pozici elementu. Zatímco offset() se řídí levým horním rohem vykreslovací oblasti prohlížeče, position() se řídí levým horním rohem rodičovského elementu.
offset({ top: číslo, left: číslo }) - nastaví pozici elementu od levého horního rohu vykreslovací oblasti prohlížeče.
offset() - získá pozici elementu od levého horního rohu vykreslovací oblasti prohlížeče, návratovou hodnotou je objekt obsahující souřadnice ve formátu: { top: číslo, left: číslo }.
position({ top: číslo, left: číslo }) - nastaví pozici elementu od levého horního rohu rodičovského elementu.
position() - získá pozici elementu od levého horního rohu rodičovského elementu, návratovou hodnotou je objekt obsahující souřadnice ve formátu: { top: číslo, left: číslo }.
Je třeba mít na vědomí, že aby bylo možné použít offset() nebo position() na nějaký element, musí mít nejdříve nastavené korespondující pozicování pomocí CSS pravidla position.
Umístění šipky do spodní části obrazovky, která po kliknutí scrollne stránku nahoru.
#sipka {position: fixed;display: inline-block;border: 1px solid white;width: 30px;height: 30px;line-height: 30px;text-align: center;color: white;background-color: rgba(0, 0, 0, .7);}
<span id="sipka">↑</span>
Právě jsme si prošli ty nejužitečnější metody pro práci s HTML elementy. Existují další, které naleznete přímo v dokumentaci jQuery. Příště se podíváme na vizuální efekty, kterých je možné s jQuery docílit.
