Od provozovatele projektu Rychlost.CZ
WebDev.wiki > Návody pro webmastery a vývojáře > Operace s DOM (s HTML) a příklady

Operace s DOM (s HTML) a příklady - JQuery

vydáno: 05.12.2016, seriál: JQuery | komentářů: 0

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.

addClass() a removeClass()

Tyto metody umožňují přidání nové CSS třídy do class atributu elementu (addClass()) nebo odebrání existující (removeClass()).

Ukázka:

Nastavení stylu jedné z položek menu na aktivní, nebo-li právě vybranou položku.

CSS
.active {
font-weight: bold;
}
Použité vlastnosti: font-weight
Javascript
$('#menu-kontakt').addClass('active');
HTML
<a id="menu-kontakt" href="/kontakt">Kontakt</span>
Použité tagy: <a>, <span>

attr() a prop()

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

Ukázka:

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.

Javascript
if (window.localStorage.getItem('settings.externalLinksInNewWindow')) // == true
$('a.external').attr('target', '_blank');
else
$('a.external').attr('target', '_self');
HTML
<a class="external" href="http://example.com/">example.com</a>
Použité tagy: <a>

append() a prepend()

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.

Ukázka:
Javascript
$('nav').append('<a href="/kontakt">Kontakt</a>');
HTML
<nav>
<a href="/home">Domů</a>
<a href="/sitemap">Mapa stránky</a>
</nav>
Použité tagy: <nav>, <a>

remove()

Vymaže element z DOM.

Ukázka:

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:

Javascript
var cesta = window.location.pathname;
$('a[href="' + cesta + '"]').remove();
HTML
<nav>
<a href="/home">Domů</a>
<a href="/sitemap">Mapa stránky</a>
<a href="/kontakt">Kontakt</a>
</nav>
Použité tagy: <nav>, <a>

html() a val()

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.

Ukázka:

Získání jména a nahrazení jména za pozdrav.

Javascript
$('#name').html('Hello, ' + $('#name').html());
HTML
<h1 id="name">George</h1>
Použité tagy: <h1>
Ukázka:

Získání hodnot přihlašovacího formuláře.

Javascript
$('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
HTML
<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>
Použité tagy: <input>, <label>, <select>, <option>

width() a height()

Bez číselného argumentu získá šířku/výšku elementu. S číselným argumentem nastaví výšku/šířku elementu.

Ukázka:

Získání výšky vykreslovací oblasti prohlížeče.

Javascript
$(window).height();

css()

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', ... }

Ukázka:

Nastavení výšky a šířky headeru tak, aby s fotkou na pozadí zabral celou obrazovku.

CSS
body {
margin: 0;
padding: 0;
}
header {
background-image: url(img/background.jpg);
background-size: cover;
}
Použité vlastnosti: margin, padding, background-image
Javascript
$('header').css({
width: $(window).width()+'px',
height: $(window).height()+'px'
});
HTML
<header></header>
Použité tagy: <header>

offset() a position()

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.

Ukázka:

Umístění šipky do spodní části obrazovky, která po kliknutí scrollne stránku nahoru.

CSS
#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);
}
HTML
<span id="sipka">↑</span>
Použité tagy: <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.

JavaScript: návody a průvodce
jQuery: návody a průvodce