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

jQuery - úvodjQuery - úvod

 

jQuery - úvod

Google       Google       15. 4. 2008       36 457×

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 RAD Studio a Windows Store

RAD Studio a Windows Store

RAD Studio je první vývojové prostředí se zabudovanou podporou balení aplikací typu Win32 a Win64 pro jejich umístění a šíření prostřednictvím Windows 10 Store.

Reklama
Reklama
Obrázek ke článku Testujte na 2 400+ Android a iOS zařízení

Testujte na 2 400+ Android a iOS zařízení

V dnešní době, kdy většina softwaru pro mobilní aplikace je tvořena a distribuována průběžně, mnohdy do celého světa je třeba zajistit také průběžnou automatizaci testování mobilního softwaru. V případě mobilních aplikací pro Android a iOS začíná být problém, jak testovat na obrovském množství kombinací HW variant, rozměrů, edic operačních systémů různých výrobců v různých částech světa na reálných zařízení. Simulátory a emulátory nejsou většinou to pravé. Pokud již testuji, jak si udělat vlastní beta distribuci opravdovým reálným testerům napříč platformami?

Obrázek ke článku Funkcie main vo Windows API

Funkcie main vo Windows API

V tretej časti seriálu o Windows API budeme hovoriť o funkčných prototypoch main. Funkčný prototyp je tvorený názvom funkcie a typom signatúry, pričom sa vynecháva telo funkcie. 

loadingtransparent (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();
Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý