Seriál o jQuery: selektory v různých podobách

Druhý díl seriálu o jQuery pro začátečníky vám ukáže, jak používat nejrůznější způsoby pro označování prvků na stránce. Zápis ve stejné podobě jako v CSS totiž není jediný způsob, jak JavaScriptu pomocí jQuery sdělit, se kterým prvkem chcete manipulovat.

reklama

Ve videonávodu vám postupně ukážu práci s CSS selektory, atributovými selektory, pořaďovými selektory a s operátory u selektorů. Podíváme se i na to, jak lze zkoumat vlastnosti jednoho prvku po druhém, pokud vyhovuje dané množině v závislosti na nějakém selektoru.

Cvičení k videu

Vytvořte v HTML tabulku a přidejte tlačítko, které obarví druhý řádek. Vyzkoušejte si postupně několik možností, kterými jej zaměříte
Nastudujte si dokumentaci k selektorům v jQuery a upravte podbarvení nadpisů tak, abyste se vyhnuli práci se třídami i specifikaci prvků H1 a H2
Vyzkoušejte úpravu placeholderu v textových políčkách. Zatímco funkce .attr('placeholder') hodnotu vrací, tak .attr('placeholder','hodnota') ji nastavuje. Zkuste po stisku nějakého tlačítko projít všechna políčka a jejich placeholder tímto způsobem změnit
Vytvořte tlačítko, které projde všechny nadpisy. Ve smyčce each pomocí konstrukce if a funkce .hasClass('třída') zkontrolujte, zda mají třídu yellow a pokud ano, pak ji přes removeClass('třída') odeberte a poté přidejte třídu pro modrou barvu

Kód z tohoto videonávodu najdete na adrese jsbin.com/susaru/edit?html,js,output.

Tagy

jQuery

JavaScript

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu. Web Development Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz.

@maxiorel