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 269×

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 Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Delphi 10.1.2 (Berlin Update 2) – na co se můžeme těšit

Touto roční dobou, kdy je zem pokrytá barevným listím a prsty křehnou v mrazivých ránech, se obvykle těšíme na zbrusu novou verzi RAD Studia. Letos si však ale budeme muset počkat na Godzillu a Linux až do jara. Vezměme tedy za vděk alespoň updatem 2 a jelikož dle vyjádření pánů z Embarcadero se budou nové věci objevovat průběžně, pojďme se na to tedy podívat.

Reklama
Reklama
Obrázek ke článku Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Konference: Moderní datová centra pro byznys dneška se koná už 24. 11.

Stále rostoucí zájem o cloudové služby i maximální důraz na pružnost, spolehlivost a bezpečnost IT vedou k výrazným inovacím v datových centrech. V infrastruktuře datových center hraje stále významnější roli software a stále častěji se lze setkat s hybridními přístupy k jejich budování i provozu.

Obrázek ke článku Konference: Mobilní technologie mají velký potenciál pro byznys

Konference: Mobilní technologie mají velký potenciál pro byznys

Firmy by se podle analytiků společnosti Gartner měly  rychle přizpůsobit skutečnosti, že mobilní technologie už zdaleka nejsou horkou novinkou, ale standardní součástí byznysu. I přesto - nebo možná právě proto - tu nabízejí velký potenciál. Kde tedy jsou ty největší příležitosti? I tomu se bude věnovat již čtvrtý ročník úspěšné konference Mobilní řešení pro business.

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.

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ý