jQuery - úvod
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

jQuery - úvodjQuery - úvod

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vytvořte si vlastní webové stránky. Snadno, rychle a levně přes Saywebpage.com
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

jQuery - úvod

Google       Google       15. 4. 2008       40 604×

Rozhodol som sa predstaviť jQuery ako nástroj, pomocou ktorého si môžete na stránke vytvoriť zaujímavé efekty a animácie a dodať tak vašim stránkam trochu Web 2.0 looku. Pôjde teda o viacmenej pravidelnú sériu tutoriálov pre začiatočníkov s praktickými ukážkami zameranými na reálne využitie.

Reklama
Reklama

Trocha teórie

jQuery je JavaScriptovská knižnica, dalo by sa povedať, že dokonca až framework, ktorý vám má uľahčiť prácu s javaScriptom. Prináša množstvo efektov a taktiež podporu Ajaxu. Veľkou prednosťou tejto knižnice je jednoduchosť písania príkazov a najmä ich reťazenie.

"You start with 10 lines of jQuery that would have been 20 lines of tedious DOM JavaScript. By the time you are done it's down to two or three lines and it couldn't get any shorter unless it read your mind." - Dave Methvin

“Začnete s 10-timi riadkami jQuery kódu, čo by v čistom DOM JavaScripte bolo 20. Kým ste však hotový, zredukuje sa váš kód na dva alebo tri riadky a kratšie sa to už naozaj zapísať nedá, jedine, že by to vedelo čítať vašu myseľ.” - preklad citátu Dave Methvin-a prevzatého zo stránok jQuery.com

Aby ste si však vedeli aj predstaviť o čom tento citát hovorí, prikladám ukážku jQuery kódu:

 $("p.surprise").addClass("ohmy").show("slow"); 

Spustiť kód

Daný kód vyhľadá všetky odstavce (p), ktoré majú priradenú triedu „surprise“, priradí im triedu „ohmy“ a daný odstavec zobrazí pomocou animácie.

Pripojenie a načítanie jQuery

Na začiatok si vytvoríme testovaciu stránku, s ktorou budeme pracovať počas celého tohto seriálu.
<html>
<head>
<script type="text/javascript" src="cesta/k/jquery.js"></script>
<script type="text/javascript">
// Sem pôjde jQuery kód
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

Ako si môžete všimnúť, do stránok voláme súbor *.js, čo je samotná jQuery knižnica, ktorú si môžete stiahnuť z domvoských stránok jQuery.

Ak si budete sťahovať svoju kópiu jQuery knižnice, máte na výber niekoľko verzií:

  • Minimalizovanú (15kb)
  • Zkomprimovanú (29kb)
  • Plnú (94kb)

Najvýhodnejšie sa môže zdať používať v ostrej prevádzke minimalizovanú verziu (minimalizovaná neznamená oklieštená, použil sa pri jej tvorbe len iný kompresný algoritmus). Vedú sa však diskusie, že spracovanie takejto verzie je náročné na procesný výkon a nedá sa cachovať. Preto keď chcete používať lokálnu verziu jQuery knižnice, použite radšej plnú verziu, ktorá je podstatne menej náročná na spracovanie, zrýchlite tak celkový proces načítavania, a cachujte výstup – nebude potrebné ju načítavať vždy nanovo.

Osobne vám však odporúčam používať online verziu, ktorá zabezpečuje, že je vždy aktuálna a odpadá problém s jej neustálim hľadaním na disku a kopírovaním.

Ak chcete používať túto online verziu, do src k javascriptu napíšte

http://code.jquery.com/jquery-latest.pack.js

Keď už máme napojenú jQuery knižnicu do našej testovacej stránky, pozrieme sa na to, ako ju inicializujeme a môžeme sa vrhnúť na prvú ukážku.

Tí, ktorí už máte skúsenosti s JavaScriptom, by ste pravdepodobne začali písať niečo ako:

window.onload = function(){ alert("a") }

Problémom však je, že akcia volaná takýmto zápisom sa vykoná až po načítaní kompletnej stránky – to znamená všetkých obrázkov, súborov, externých obrázkov, čo môže trvať celkom dlho. jQuery preto používa svoj spôsob volania a to pomocou:

$(document).ready(function(){
// Váš kód
});
Čo to znamená a aký je rozdiel?

Znamená to, že jQuery kontroluje konkrétny element stránky a to konkrétne document. Ak je daný element pripravený na spracovanie, vykonajú sa príkazy vnútri tohto volania, preto aj všetok kód, ktorý budeme písať, budeme zapisovať práve do tejto funkcie.

A aký je vlastne rozdiel medzi štandardným volaním a tým v jQuery?

Na rozdiel od bežnej JavaScriptovej kontroly window.onload, ktorá čaká na načítanie celej stránky, jQuery kontrola sa pýta iba na to, či je element document pripravený na spracovanie, to znamená, že nečaká na všetky obrázky a iné veľké súbory kým sa načítajú.

Náš prvý jQuery kód

Keďže už máme pripojené jQuery do našich stránok, môžeme sa pustiť do nášho prvého kódu. Obrovskou prednosťou jQuery je spôsob vyberania prvkov, s ktorými pracuje. Používa na to totiž CSS selektory! Predpokladám, že každý už má aké-také skúsenosti s CSS a tak by nemal byť pre vás problém pochopiť o čo ide. Pre tých, čo nevedia o čom je reč, dúfam, že pochopia z príkladov.

Prvá ukážka

Ako ste si mohli všimnúť, v našom HTML kóde, ktorý sme si vytvorili na začiatku, je odkaz na domovskú stránku jQuery. Teraz pomocou jQuery vyvoláme alert box, ktorý sa zobrazí po kliknutí na odkaz, avšak ešte predtým, ako sa dostaneme na danú stránku.

$("a").click(function(){
alert("Práve ste klikli na odkaz vedúci na domovskú stránku jQuery");
});

Spustiť kód

Poďme si pekne po poriadku vysvetliť, čo čo robí:

  • $(“a”) – jQuery zápis pre vyhľadanie všetkých odkazov na stránke
  • .click() – funkcia, ktorá kontroluje či bolo na daný element kliknuté, v našom prípade na element a
  • function() {alert (“”) } – vykoná zavolanie samotného alert boxu, ktorý sa zobrazí po kliknutí
Rozšírenie funkčnosti

Pomocou jQuery môžeme taktiež meniť správanie sa elementov. Pre lepšie pochopenie si upravíme náš predošlý príklad. Zabránime, aby sa po kliknutí na odkaz načítala stránka jquery.com, zobrazí sa nám len alert box.

$("a").click(function(){
alert("Práve ste klikli na odkaz vedúci na domovskú stránku jQuery");
return false;
});

Spustiť kód

Záver

Teraz by ste už mali zvládnuť načítať a spustiť jQuery knižnicu vo vašich stránkach. Taktiež sme si ukázali prvú ukážku, ktorá síce ešte nie je moc praktická, no potrebná pre základné pochopenie funkčnosti jQuery.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
0 hlasů
Google
(fotka) Martin PuškáčMartin sa venuje prevažne webovej grafike, taktiež aj webovému programovaniu. Vo voľnom čase sa zaujíma o jQuery, HTML5, PHP, framework Laravel a interaktívne aplikácie a nové trendy v oblasti webu.
Web     Twitter     LinkedIn    

Nové články

Obrázek ke článku Češi tlačí obce do otevřené komunikace – Mobilní Rozhlas si loni pořídilo dalších 171 měst a obcí

Češi tlačí obce do otevřené komunikace – Mobilní Rozhlas si loni pořídilo dalších 171 měst a obcí

Obyvatelé Česka se mnohem více zapojují do veřejného dění. Umožňují jim to přímo samosprávy, které stále častěji využívají nástroje takzvané chytré komunikace a participace. Dokládají to data za rok 2019 ekosystému Mobilní Rozhlas, lídra v oblasti chytré obecní komunikace. Zapojilo se do něj 171 nových měst a obcí, zaregistrovalo celkem 100 tisíc občanů a místní samosprávy jeho prostřednictvím rozeslaly třikrát více adresných zpráv než v roce 2018

Reklama
Reklama
Obrázek ke článku Aktuální průzkum Energie ČS na téma technologií:

Aktuální průzkum Energie ČS na téma technologií:

21 % domácností uvažuje o pořízení klimatizace, 
16 % chce investovat do chytré domácnosti  

Průzkum společnosti Energie ČS, který pro ni realizovala agentura Foresite Marketing, se zaměřil mimo jiné na to, jaké technologie lidé používají v domácnostech a o jakých uvažují, že by si pořídili. 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032020 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý