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

jQuery - úvodjQuery - úvod

 

jQuery - úvod

Google       Google       15. 4. 2008       35 881×

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 Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres přiveze v září do Prahy špičky světové kryptoanarchie

Hackerský kongres HCPP16 pořádá od 30. září do 2. října nezisková organizace Paralelní Polis již potřetí, a to ve stejnojmenném bitcoinovém prostoru v pražských Holešovicích. Letos přiveze na třídenní konferenci přes 40 většinou zahraničních speakerů – lídrů z oblastí technologií, decentralizované ekonomiky, politických umění a aktivismu. Náměty jejich přednášek budou také hacking, kryptoměny, věda, svoboda nebo kryptoanarchie.

Reklama
Reklama
Obrázek ke článku ICT PRO školení zaměřené nejenom na ICT

ICT PRO školení zaměřené nejenom na ICT

Dovolte, abychom se představili. Jsme zaměstnanci společnosti ICT Pro, profesionálové v oblasti poskytování komplexních ICT služeb. Neboli služeb spojených s informačními a komunikačními technologiemi, které dnes - ve 21. století - tvoří  nedílnou součást běžného provozu všech moderních firem.

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 © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý