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.

Reklama

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.

Reklama

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.

Reklama

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!

Reklama
Reklama
Zavřít reklamu