Co je jQuery a jak ho můžete použít?

Úvod

Pokud jste obeznámeni se světem programování, víte, jak důležité programovací jazyky jsou. Mezi ty nejzásadnější a nejčastěji používané patří HTML, CSS, a JavaScript. Zatímco HTML a CSS vám pomáhají navrhnout a strukturovat váš web, JavaScript vám umožňuje udělat jej interaktivním. Existuje celá řada JavaScriptových knihoven, které můžete použít k přidání jedinečných funkcí do vašeho webového projektu. Mezi ně patří i knihovna jQuery.

jQuery sama o sobě není programovací jazyk. Je to nástroj, který můžete použít k usnadnění vývoje webu v JavaScriptu. To pomáhá zjednodušit a zpřehlednit úkoly. Je známá tím, že staví na konceptu „Write Less, Do More“ (Pište méně, dělejte více). Kromě usnadnění vývoje webu vám jQuery přináší také výhodu kompatibility napříč prohlížeči. To znamená, že kód se správně vykreslí bez ohledu na to, jaký prohlížeč je pro výstup použit.

Pro lepší představu o tom, jak jQuery dělá věci stručnějšími, si uveďme příklad. Řekněme, že píšeme program „Hello, World!“. Zde je ukázka toho, jak by vypadal v JavaScriptu a v jQuery:

Oba tyto řádky kódu přinesou stejný výsledek. Jak však vidíte, jQuery činí zápis stručnějším a výstižnějším.

V tomto návodu se dozvíte vše o základech jQuery. Tento nástroj si můžete stáhnout z této webové stránky. Budeme postupovat tak, jako byste byli úplní začátečníci bez jakýchkoli znalostí o jQuery. Tento návod vás naučí, jak jQuery nainstalovat, a seznámí vás s některými základními koncepty, které jsou s ním spojené. Prozkoumáme některé běžné selektory, události a efekty v jQuery. Poté se na užitečných příkladech naučíte testovat vývojářské koncepty jako API, DOM a CDN. Čtěte dál a seznamte se se světem jQuery.

Než začneme

Existují určité věci, které vám usnadní práci, pokud je budete znát předem. Velmi vám například pomůže, pokud máte základní představu o tom, jak fungují HTML a CSS. Tím se v tomto návodu zabývat nebudeme. Budeme pracovat s předpokladem, že umíte nastavit alespoň jednoduchý web. Měli byste mít také základní představu o tom, jak obecně funguje programování. To nutně neznamená, že musíte být odborníkem na JavaScript, abyste mohli pokračovat. Stačí, když se orientujete v pojmech, jako je logika, proměnné a datové typy v programování.

Jak nastavit jQuery ve vašem systému

Nejprve se podívejme, jak můžete nastavit jQuery ve vašem systému. jQuery je k dispozici jako soubor JavaScriptu, protože se jedná o JavaScriptovou knihovnu. Tento soubor musíte propojit v HTML kódu našeho webu. Existují dva způsoby, jak to udělat. Jak jsem již zmínil, jedním ze způsobů je stáhnout jej z zde. Kromě oficiálního webu najdete jQuery také v Google Hosted Libraries přímo zde.

Dalším způsobem je použití sítě pro doručování obsahu (Content Delivery Network neboli CDN) k propojení souboru. CDN se skládá ze sady serverů, které pomáhají doručovat webový obsah lokálně. Hostování souboru jQuery prostřednictvím CDN umožňuje, aby se obsah k uživateli dostal mnohem rychleji. Proto budeme od tohoto okamžiku v tomto návodu používat síť pro doručování obsahu.

In our first example, we will be making a web project. This small project contains style.css v adresáři css/. script.js se nachází v adresáři js/. Nakonec se index.html nachází v kořenovém adresáři webového projektu:

Podle tohoto projektu vytvoříme kostru HTML. Následně ji uložíme jako index.html:

Zde propojíme soubor jQuery. Jak jsem již zmínil, budeme jej propojovat přes CDN. Odkaz na jQuery vložíte před </body> značku. Poté můžete přidat svůj vlastní JavaScriptový soubor, který byl script.js v našem příkladu. Nezapomeňte vždy umístit JavaScriptový soubor pod knihovnu jQuery, takto:

Co byste dělali, kdybyste si místo toho stáhli lokální kopii knihovny jQuery? V takovém případě musíte soubor jQuery uložit do js/ složky. Poté jej můžete propojit jako js/jquery.min.js.

jQuery: Základy

Než se ponoříme do podrobností, projdeme si některé ze základů jQuery. Hlavním úkolem jQuery je používat DOM k propojení HTML prvků v prohlížeči. DOM znamená Document Object Model. Je to metoda, která umožňuje JavaScriptu komunikovat s HTML v prohlížeči. DOM si můžete vizualizovat tak, že kliknete pravým tlačítkem myši na webovou stránku a vyberete možnost Prozkoumat. HTML, které se zobrazí v nástrojích pro vývojáře, je DOM.

Uzel je jednotlivý HTML prvek v DOM. JavaScript může všechny tyto objekty nebo prvky upravovat. Uspořádání těchto objektů si můžete představit jako stromovou strukturu. <html> leží u kořene, zatímco prvky se dále větví.

Kliknutím pravým tlačítkem myši a výběrem možnosti Zobrazit zdrojový kód stránky se vám zobrazí čisté HTML webu. Pamatujte, že to není totéž jako DOM. Zatímco DOM lze měnit, zdrojový kód HTML je zcela statický. Jakékoli změny, které provedete v JavaScriptu, tento HTML soubor neovlivní. Celý <html> uzel je zabalen do vnější vrstvy nazývané objekt document.

Dále uvidíme, jak můžete manipulovat se svou webovou stránkou a jejími funkcemi pomocí jQuery. Předtím se však musíte ujistit, že je stránka připravena.

Po vytvoření souboru script.js v adresáři js/ zadejte následující:

Nyní bude jakýkoli kód, který napíšete, zabalen do tohoto kódu. jQuery detekuje připravenost kódu. Kód v této funkci se spustí až po přípravě DOM.

Vrátíme se ke skriptu „Hello, World!“, o kterém jsme mluvili na začátku návodu. Předpokládejme, že chceme tento skript spustit. Chceme-li použít jQuery k vypsání tohoto textu do prohlížeče, musíme použít ID demo na prázdný blokový odstavec takto:

Chceme-li zavolat jQuery, musíme použít $ symbol. K přístupu k DOM pomocí jQuery můžete použít syntaxi a metody CSS. Jednoduchý příklad vypadá takto:

Toto je formát, který budete s jQuery používat. Již víme, že # symbol představuje ID v CSS. Proto můžete k ID demo přistupovat pomocí selektoru #demo.html() . Tato metoda vám umožní změnit HTML přítomné v prvku.

Následující kód ukazuje vložení programu „Hello, World“ do jQuery ready() obalu:

Tento řádek kódu musíte přidat do script.js souboru. Tento soubor uložte. Poté můžete otevřít index.html soubor v prohlížeči. Měli byste vidět výstup Hello, World!. To je také vhodný okamžik pro kontrolu DOM, abyste tomu lépe porozuměli. Klikněte pravým tlačítkem myši na text „Hello, World!“. Vyberte Prozkoumat prvek. DOM zobrazí <p id="demo">Hello, World!</p>. Kliknutí na Zobrazit zdrojový kód stránky vám naopak ukáže pouze čisté HTML. V tomto případě by to bylo <p id="demo"></p>.

Co jsou selektory?

Nyní přejdeme k některým klíčovým funkcím v jQuery. Mezi ně patří selektory. jQuery selektory říkají programu, se kterými prvky chcete pracovat nebo je „vybrat“. Jsou velmi podobné selektorům, které můžete používat v CSS. Zde je základní formát, jak přistupovat k selektoru v jQuery:

Můžete použít řetězce v jednoduchých nebo dvojitých uvozovkách, ačkoli jQuery style guide dává přednost těm druhým. Pokud chcete, můžete si prohlédnout úplný seznam jQuery selektorů na této oficiální stránce. Pro vaši informaci uvádíme některé z nejčastěji používaných selektorů:

• $("*")

Toto je univerzální selektor (Wildcard). Vybere každý prvek na vaší stránce.

• $(this)

Toto je aktuální selektor (Current). Vybere prvek, se kterým aktuálně pracujete pomocí funkce.

• $("p")

Toto je selektor značek (Tag). Vybere každou instanci značky <p>.

• $(".example")

Toto je selektor třídy (Class). Vybere každý jednotlivý prvek, který má aplikovanou třídu example.

• $("#example")

Toto je selektor ID. Vybere pouze jedinou instanci ID example.

• $("[type='text']")

Toto je selektor atributů (Attribute). Vybere jakýkoli daný prvek s hodnotou text aplikovanou na atribut type.

• $("p:first-of-type")

Toto je selektor pseudoprvků (Pseudo Element). Pomůže vám vybrat první <p>.

Co jsou události?

Některé funkce webové stránky se načtou hned při načtení stránky. Vezměme si příklad „Hello, World“. V tomto případě bychom mohli kód přidat přímo do zdrojového HTML. Co se ale stane, když načtení funkce vyžaduje interakci uživatele? Právě v tom je jQuery užitečné.

Řekněme, že chceme, aby se po kliknutí uživatele na tlačítko zobrazil nějaký text. Chcete-li tuto funkci přidat, musíte přidat <button> prvek do souboru index.html. Toto tlačítko bude naslouchat „události“ kliknutí:

Jakákoli interakce uživatele s prohlížečem je považována za událost. Interakce může probíhat pomocí ukazatele myši nebo klávesnice. Ve výše uvedeném příkladu je naší událostí kliknutí na tlačítko. Proto se jí říká událost kliknutí.

Dále musíme zavolat funkci, která obsahuje kód „Hello, World“. K tomu použijeme metodu click():

Jak vidíte, ID našeho prvku <button> se jmenuje trigger. Můžeme jej vybrat pomocí $(“#trigger"). Účelem přidání metody click() je přimět program, aby naslouchal události kliknutí. Dále do této metody umístíme funkci s textovým kódem:

Náš kód bude nakonec vypadat nějak takto:

Nyní můžete uložit soubor script.js. Obnovte soubor index.html v prohlížeči pro použití změn. Po kliknutí na tlačítko se zobrazí testovací výstup „Hello, World!“.

Kromě kliknutí existují i další typy událostí jQuery. Úplný seznam těchto metod událostí si můžete prohlédnout v tomto oficiálním dokumentu. Zde jsou některé z nejčastěji používaných, na které můžete občas narazit:

• click()

Událost click spustí kód při jednom kliknutí myší.

• hover()

Událost hover spustí kód, když ukazatel myši najede na prvek. Můžete také určit, zda se kód spustí při najetí nebo opuštění myši pomocí mouseenter() and mouseleave() v tomto pořadí.

• submit()

Odeslání formuláře spustí kód.

• scroll()

Událostí, která spustí kód, bude posouvání stránky dolů.

• keydown()

Stisknutí klávesy dolů na klávesnici spustí kód.

Co jsou to efekty?

jQuery efekty fungují společně s událostmi jQuery. Hlavním účelem efektů, jak vyplývá z názvu, je přidat na stránku animace. Umožňují manipulovat s prvky a aplikovat na ně různé druhy efektů. Tyto efekty mohou být spuštěny určitými událostmi.

Pro lepší pochopení si uveďme příklad. Řekněme, že chceme otevřít a zavřít vyskakovací překryvnou vrstvu (overlay). Jedním ze způsobů, jak toho dosáhnout, by bylo použití dvou různých ID. Jedno by překryvnou vrstvu otevřelo a druhé zavřelo. Druhým způsobem je použití třídy. Výhodou použití třídy je, že stejná funkce dokáže překryvnou vrstvu otevřít i zavřít.

Otevřete svůj soubor index.html. Poté smažte tagy <button> a <p> z body. Nyní přidejte do HTML následující řádky kódu:

Dále se podívejme na náš soubor style.css. Naším cílem je použít minimální CSS ke skrytí překryvné vrstvy. K tomu použijeme display: none a vycentrujeme ji takto:

Dále použijeme metodu toggle(). Tato metoda nám umožní přepínat vlastnost display mezi none a block. Překryvná vrstva se tak skryje a zobrazí při každém kliknutí. Přidejte tento kód do souboru script.js:

Nakonec obnovte stránku index.html pro použití změn. Nyní budete moci přepínat viditelnost modálního okna. Stačí kliknout na tlačítka. V kombinaci s tímto můžete použít i další efekty jQuery. Můžete například změnit jednoduché toggle() na slideToggle() nebo fadeToggle().

Níže jsou uvedeny některé z běžně používaných metod efektů v jQuery:

• toggle()

Tato metoda umožňuje měnit viditelnost prvku. Jednosměrné efekty s ní spojené jsou show() a hide().

• fadeToggle()

Tato metoda vám umožní přepínat viditelnost a průhlednost prvku pomocí animace. Jednosměrné efekty jsou v tomto případě fadeIn() a fadeOut().

• slideToggle()

Tato metoda vám umožní použít efekty posunutí k přepínání viditelnosti prvku. Jednosměrné efekty jsou v tomto případě slideUp() a slideDown().

• animate()

Tato metoda efektu vám umožňuje provádět vlastní efekty animace. Používá CSS vlastnosti daného prvku.

Závěr

Doufáme, že vám tento návod pomohl získat důkladný úvod do jQuery. Je to neuvěřitelně užitečný nástroj, který výrazně usnadňuje vývoj webových aplikací a psaní kódu. To platí zejména v případě, že jste ve světě programování relativně noví.

Prozkoumali jsme různé prvky, které tvoří základy jQuery. Také jsme se naučili, jak tyto prvky vybírat a upravovat a jak efektivně využívat události a efekty. Ovládnutí nástrojů, jako je jQuery, vám pomůže vytvářet webové stránky plné interaktivních funkcí, které zajistí poutavý uživatelský zážitek.

Podívejte se na některé zdroje z našeho blogu které vám pomohou při práci s JavaScriptem:

• Průvodce přidáním JavaScriptu do HTML
• Práce s JavaScriptem: Jak fungují třídy 
• Práce s JavaScriptem: Jak fungují prototypy a dědičnost

Příjemné programování!