Jak začít s jQuery (část 1)

 2012-01-25 00:00:00
 Dmitry Burobin

Určitě jste slyšeli o knihovně Javascriptu, ktera se nazýva jQuery. Co je skutečně jQuery?

Jak usnadnit život webmasteru? Jquery dělá psaní Javascriptu zajímavějším a snadnějším. Pomocí této knihovny mnozi poměrně těžké aspekty Javascriptu se dají lehce vnořit do jakékoliv aplikace.

V dnešním článku Vám povím, jak začit používat jQuery a napišeme si první příklad.

Co je jQuery?

jQuery je velice jednoducha v ovládaní knihovna Javascriptu(někteří ji nazývaji frameworkem). Má spoustů možnosti například: pozorování DOM (objektový model dokumentu), přidávání krásných efektů a animaci, velice jednoduché Ajax techniky. Na hlavní stránce knihovny jQuery je nejvíce přesná definice:

jQuery je rychlá a lakonická knihovna, která ulehčuje zpracování události, animaci a interakci s Ajax pro rychlejší vývoj webu, jQuery byl vyvinut proto, aby změnil metody psaní JavaScript kódu.

Přednosti jQuery

Pojďme se podívat na některé výhody a vlastnosti daného frameworku:

  • - podstatně ménší množstvi kódu v porovnání s JavaScriptem, což znamená ménší čásové náklady a lépe čitelný kód.
  • - Daleko snadnějí se da pochopit kód v porovnání s JavaScriptem.
  • - Velice podrobná a pohodlná dokumentace a aktivní spolek, vždy připravený poskytnout pomoc, když jeto nutný.
  • - Použití Ajax je jednodušší. Budete potřebovat jenom 5 řádku kódu (někdy i míň) pro vytvoření jednoduchého Ajax požádávku.
  • - Obrovské množstvi plaginů, pomocí kterých je možné udělaz skoro vše.
  • S jQuery je zábava =)

Jak začít?

První věc, kterou musíte udělat, je stáhnout nejnovější verzi knihovny jQuery z oficiálního webu , ZDE, . Pak uložit ji na svůj server a mezi značkami head napsat odkaz na tento soubor:

<script type="text/javascript" src="/jquery.js"></script>

Je dokument připraven?

Pro realizaci našého prvního jQuery skriptu, potřebujeme umístit všechen náš kód do funkce. Tato funkce bude provedená za úplné připravenosti DOM (doslovně když ¨dokument bude připraven¨). Všiměte si, že tato je velice podobné známé události ¨onload¨ v JavaScriptu, ale není to totéž. Podívame se na příklad:

$(document).ready(function(){
    
//Kód zde
});

Tímto říkame jQuery vykonat jakýkoliv kód uvnitř funkce, za úplné připravenosti DOM. Toto má svoji výhodu, nehledě na to, že může být pro některé nepochopitelné. Hlavně, použitím této konstrukce úplně oddělujeme JavaScript a HTML. Za druhé, nepotřebujeme čekat na úplnoé načtení stránky, stači nám když se načte DOM.

Pro liné kodéry, a pro ty kteři počítaji s každým symbolem, můžeme zkrátit kód na:

$(function(){
    
//Kód zde
});

Váš první skript v jQuery.

Už víme, jak se odkazovat na knihovnu, taky už trošku rozumíme funkci document.ready. Teď napišeme jednoduchý skript.

Udělame stránku s textem a citátem na konci. Chceme, aby citát byl vidět jenom, když si člověk zmáčkne tlačítko. Takže stránka bude vypadat takto:

<h1>Příklad</h1>
<
p>Lorem ipsum dolor sit ametconsectetur
 adipiscing elit
Aliquam nisl turpis
laoreet convallis varius quishendrerit lobortis odio.</p>
<
p>Ut lobortis egestas massa vitae bibendum
Maecenas convallis augue tempor urna
 tristique placerat auctor tellus adipiscing
. </p>
<
p><a href="#" class="button">Stiskneteaby se objevil citát.</a></p>
<
blockquote id="my_quote"><p>:"Nulla facilisi. Proin congue enim
 pharetra leo consectetur non posuere odio suscipit.
 Ut sapien magna, porta id convallis nec, rutrum ac justo. "
</p></blockquote>
a jQuery kód, který se bude nacházet mezi značkami head:
<script type="text/javascript">
$(
document).ready(function(){
      var 
myQuote = $('#my_quote'); //Zapise hodnotu citatu do promenne
      
myQuote.hide();            //schova citat
      
$('.button').click(function(){ //pri zmacknuti tlactka
      
myQuote.show(500);            //ukaze citat
      
});
      });
</script>

Určitě se podívejte na ukázku toho jak to funguje.
Projdeme detailně celý kód.
  • - Jak jíž bylo řečeno, umístime celý kód uvnitř funkce $document.ready().
  • - Dál přiřázujeme id našého citátu (my_quote) proměnné myQuote. Teď máme přístup k citátu s id my_quote.
  • - Pak schovame citát pomocí JavaScriptu. Použijeme na to metodu jQuery hide.
  • - Dál oznamujeme jQuery, že při zmačknutí tlačítka, který má třídu button, je nutné ukázat citát. Taktéž jsme zadali časový interval 500ms tudíž půl sekundy (1000ms = 1sekunda).
  • - A to je vše. Při zmačknutí tlačítka za 0.5sekundy se objeví citát. Jednoduché ne?
Děkuji za pozornost, ať se Vám daři!
Zdroj: www.spyrestudios.com
Systém Orphus
Napište komentář.
Celkem komenrářů(32)
Ronweix - 2017-11-17  13:38:44
 Wo Bekomme Ich Viagra Her Orlistat 120mg Online No Script Commander Cialis Viagra [url=http://ciali40mg.com]online pharmacy[/url] Where Can I Buy Cheap Flagyl With No Prescription Online Celexa
Ronweix - 2017-11-17  13:38:43
 Wo Bekomme Ich Viagra Her Orlistat 120mg Online No Script Commander Cialis Viagra [url=http://ciali40mg.com]online pharmacy[/url] Where Can I Buy Cheap Flagyl With No Prescription Online Celexa
Ronweix - 2017-11-17  13:38:42
 Wo Bekomme Ich Viagra Her Orlistat 120mg Online No Script Commander Cialis Viagra [url=http://ciali40mg.com]online pharmacy[/url] Where Can I Buy Cheap Flagyl With No Prescription Online Celexa
Ronweix - 2017-11-17  13:38:41
 Wo Bekomme Ich Viagra Her Orlistat 120mg Online No Script Commander Cialis Viagra [url=http://ciali40mg.com]online pharmacy[/url] Where Can I Buy Cheap Flagyl With No Prescription Online Celexa
Ronweix - 2017-10-29  19:08:32
 Cialis One Day Generico [url=http://levibuying.com]levitra without a script[/url] Cialis Per Posta Get Generic Bentyl No Doctor Medicine Overseas Price Break 25 Mg Viagra
Ronweix - 2017-10-26  02:12:29
 Cheap Safe Non Prescription Viagra Levitra 20 Mg Effetti Collaterali [url=http://bestviaonline.com]viagra[/url] Cialis Vente Como Conseguir Cytotec En Usa
Ronweix - 2017-10-26  02:12:28
 Cheap Safe Non Prescription Viagra Levitra 20 Mg Effetti Collaterali [url=http://bestviaonline.com]viagra[/url] Cialis Vente Como Conseguir Cytotec En Usa
Ronweix - 2017-10-26  02:12:28
 Cheap Safe Non Prescription Viagra Levitra 20 Mg Effetti Collaterali [url=http://bestviaonline.com]viagra[/url] Cialis Vente Como Conseguir Cytotec En Usa
Ronweix - 2017-10-22  02:30:41
 Zithromax Available In Canada Cephalexin Doesn'T Clear Up Infection Completely [url=http://buygenericvia.com]viagra prescription[/url] Amoxicillin Facts
Ronweix - 2017-10-15  21:24:20
 Swelling From Amoxicillin Reaction Cialis Preisvergleich Bestellen Cialis San Marino [url=http://viaonlineusa.com]viagra online pharmacy[/url] Amoxicillin Capsule Zithromax For Rabbits Priligy San Pablo
Ronweix - 2017-10-14  12:53:41
 Best Buy Direct Bentyl Drugs [url=http://howmuchisvia.com]viagra[/url] Vente De Clomid Sans Ordonnance
Ronweix - 2017-10-12  16:19:29
 Best Non Prescription Pharmacy Reviews Boil Amoxicillin [url=http://cheapvia50mg.com]buy viagra[/url] Cost Of Levitra At Cvs 360 Cialis Rezept Gunstig Kaufen Viagra Delivered To Po Box
Ronweix - 2017-10-12  16:19:28
 Best Non Prescription Pharmacy Reviews Boil Amoxicillin [url=http://cheapvia50mg.com]buy viagra[/url] Cost Of Levitra At Cvs 360 Cialis Rezept Gunstig Kaufen Viagra Delivered To Po Box
Ronweix - 2017-10-12  16:19:28
 Best Non Prescription Pharmacy Reviews Boil Amoxicillin [url=http://cheapvia50mg.com]buy viagra[/url] Cost Of Levitra At Cvs 360 Cialis Rezept Gunstig Kaufen Viagra Delivered To Po Box
Ronweix - 2017-10-12  16:19:26
 Best Non Prescription Pharmacy Reviews Boil Amoxicillin [url=http://cheapvia50mg.com]buy viagra[/url] Cost Of Levitra At Cvs 360 Cialis Rezept Gunstig Kaufen Viagra Delivered To Po Box
Ronweix - 2017-10-06  03:00:53
 Cheap Viagra Europa [url=http://cialtobuy.com]cialis price[/url] Indomethacin Online Order No Rx Usa Buy Dexamethasone Online
Ronweix - 2017-10-06  03:00:52
 Cheap Viagra Europa [url=http://cialtobuy.com]cialis price[/url] Indomethacin Online Order No Rx Usa Buy Dexamethasone Online
Ronweix - 2017-10-06  03:00:52
 Cheap Viagra Europa [url=http://cialtobuy.com]cialis price[/url] Indomethacin Online Order No Rx Usa Buy Dexamethasone Online
Ronweix - 2017-10-06  03:00:51
 Cheap Viagra Europa [url=http://cialtobuy.com]cialis price[/url] Indomethacin Online Order No Rx Usa Buy Dexamethasone Online
Ronweix - 2017-10-03  07:40:48
 Dutasteride Duagen Bph Want To Buy In Inte
et [url=http://realviaonline.com]viagra[/url] Prescribed Ciprodex Otic And Amoxicillin
[1] [2] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.