jQuery návod – (3) První kód

Vítejte v třetím díle našeho seriálu o jQuery. Ve dvou předchozích článcích jsme si představili, co je to jQuery, a následně jsme si ukázali, jak začít a jak knihovnu začlenit do našeho projektu. Nyní je čas psát náš první jQuery kód!

1. Základy syntaxe jQuery

V předchozím článku jsme si ukázali základní syntaxi jQuery:

$(selektor).akce();

Máme dva hlavní komponenty – selektor a akce. Nyní se věnujme hlouběji tomu, jak tuto syntaxi v praxi využít.

2. První kód: Skrytí a zobrazení prvků

Nejprve si vytvoříme jednoduchý HTML kód:

<button id="ukaz">Ukaž</button>
<button id="skryj">Skryj</button>
<p>Toto je text, který můžeme skrýt nebo zobrazit pomocí jQuery!</p>

Nyní chceme, aby po kliknutí na tlačítko s id „skryj“ zmizel odstavec a po kliknutí na tlačítko s id „ukaz“ se opět zobrazil. K tomu použijeme následující jQuery kód:

$(document).ready(function(){
    $("#skryj").click(function(){
        $("p").hide();
    });
    $("#ukaz").click(function(){
        $("p").show();
    });
});

3. Porovnání s čistým JavaScriptem

Pro srovnání, pokud bychom chtěli dosáhnout stejné funkčnosti pouze pomocí JavaScriptu, kód by vypadal zhruba takto:

document.getElementById("skryj").addEventListener("click", function(){
    document.querySelector("p").style.display = "none";
});

document.getElementById("ukaz").addEventListener("click", function(){
    document.querySelector("p").style.display = "block";
});

Jak můžete vidět, jQuery nám opravdu usnadňuje práci tím, že nám umožňuje psát méně kódu a je čitelnější.

4. Výhody jQuery syntaxe

• Stručnost a čitelnost: Jak jsme viděli v předchozím příkladu, jQuery kód je obvykle kratší a lépe čitelný než čistý JavaScript.
• Kompatibilita s prohlížeči: jQuery se postará o mnoho rozdílů mezi prohlížeči, což znamená, že nemusíte psát různý kód pro různé prohlížeče.
• Bohaté API: jQuery nabízí širokou škálu funkcí, které usnadňují manipulaci s DOM, práci s událostmi, animace a mnoho dalšího.

Závěr

Nyní už víte, jak psát základní kód v jQuery a jaký je rozdíl mezi psaním kódu v jQuery a čistém JavaScriptu. Díky jQuery můžete rychle a efektivně dosáhnout požadované funkčnosti, aniž byste museli psát dlouhý a komplikovaný kód.

V dalším díle se podíváme na to, jak vybírat různé prvky na stránce pomocí selektorů a jak s nimi pracovat. 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!