jQuery návod – (2) Jak začít

Vítejte zpět ve druhém díle našeho seriálu o jQuery! V minulém článku jsme si řekli něco o tom, co je to vlastně jQuery a proč je tak oblíbené. Dnes se ponoříme do praktické části a ukážeme si, jak začít s jQuery v našem projektu.

1. Stažení a integrace jQuery

Prvním krokem je samozřejmě mít jQuery v našem projektu. Existuje několik způsobů, jak toho dosáhnout:

1. Stáhnout z oficiálního webu

• Navštivte jQuery.com a stáhněte si nejnovější verzi.
• Vložte stažený soubor do složky s vaším projektem a pak ho linkujte v HTML souboru pomocí „<script>“ tagu.

<script src="cesta/k/jquery.js"></script>

3. Použít CDN (Content Delivery Network)

• Pokud nechcete stahovat jQuery přímo do vašeho projektu, můžete ho načítat přes CDN.
• Jedním z populárních CDN je například Google:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Kontrola, zda jQuery funguje

Po integraci jQuery byste měli ověřit, zda vše funguje správně. To můžete udělat následujícím kódem:

$(document).ready(function(){
    alert("jQuery je nyní připraveno!");
});

Pokud se vám zobrazí alert s touto zprávou, vše funguje, jak má.

3. Základy syntaxe

Jedním z hlavních důvodů popularity jQuery je jeho snadná a intuitivní syntaxe. Základem je výběr (neboli selekce) elementů a provedení nějaké akce na nich.

Základní syntaxe vypadá následovně:

$(selektor).akce();

• $ – Znamená, že chceme pracovat s jQuery.
• selektor – Vybere HTML element(y).
• akce() – Je JavaScriptová funkce, kterou chcete provést na vybraném elementu.

4. Ukázka základního kódu

Pojďme se podívat na jednoduchý příklad:

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

Co tento kód dělá? Když uživatel klikne na jakýkoli odstavec („<p>„), daný odstavec zmizí.

Závěr

Nyní víte, jak začít s jQuery ve vašem projektu. Integrace je snadná, a díky CDN se můžete dokonce vyhnout stažení knihovny do vašeho projektu. Se syntaxí jQuery se budeme setkávat pravidelně v dalších částech tohoto seriálu, takže je dobré si ji co nejdříve osvojit.

V dalším díle seriálu se zaměříme na psaní našeho prvního kódu a podíváme se blíže na základní funkce a selektory v jQuery. Takže neváhejte a připojte se k nám i příště!

Děkuji za čtení a těším se na setkání v dalším díle!