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ářů(44)
Kamagra oral jelly india - 2018-03-30  02:39:24
 buy kamagra oral jelly usa
kamagra use
kamagra 100mg oral jelly wirkung
[url=http://kamagradxt.com/]kamagra oral jelly how to use[/url]
kamagra novi sad
http://kamagradxt.com/
is the kamagra store legit
Kamagra 100 gold upotreba - 2018-03-28  23:01:58
 kamagra 100mg reviews
[url=http://kamagradxt.com/]kamagra reviews users[/url]
kamagra oral jelly made in india
kamagra kopen in de winkel utrecht
kamagra jelly
http://kamagradxt.com/
kamagra com
JustSugs - 2018-01-02  13:02:35
 Synthroid Online No Rx Viagra Omeprazole Interaction [url=http://costofcial.com]cheap cialis[/url] Levitra Contraindicaciones Promethezene Without Prescription Cialis 10 Mg 4 Comprimidos Precio Baclofene Pharmacie En Ligne Comment Pouvez cialis Malegra Dxt No Prescription Cheap Lasix Order Promethazine 25 Mg Tablet Cialis 20 Mg Lilly Deutschland Antabuse http://costofcial.com - cialis buy online Cialis 20 Ml Find Cheapeast Elocon 5g Worldwide Website Saturday Delivery Viagra E Cialis Problemi
Ronweix - 2017-11-29  13:42:46
 Dosage Dog Uti Keflex Propecia Trial Offer Robinaxol [url=http://tadalaf20mg.com]cialis buy online[/url] Xenical Diet Pill Online From Canada Viagra Decouverte Cialas
Ronweix - 2017-11-29  13:42:45
 Dosage Dog Uti Keflex Propecia Trial Offer Robinaxol [url=http://tadalaf20mg.com]cialis buy online[/url] Xenical Diet Pill Online From Canada Viagra Decouverte Cialas
Ronweix - 2017-11-29  13:42:44
 Dosage Dog Uti Keflex Propecia Trial Offer Robinaxol [url=http://tadalaf20mg.com]cialis buy online[/url] Xenical Diet Pill Online From Canada Viagra Decouverte Cialas
Ronweix - 2017-11-29  13:42:43
 Dosage Dog Uti Keflex Propecia Trial Offer Robinaxol [url=http://tadalaf20mg.com]cialis buy online[/url] Xenical Diet Pill Online From Canada Viagra Decouverte Cialas
Jeffpoonia - 2017-11-23  23:29:01
 Canadian Pharmacy Flagyl Online Drugstore [url=http://genericcial.com ]cialis[/url] Pediatric Amoxicillin Dose Cialis Levitra Ohne Rezept
Jeffpoonia - 2017-11-23  23:29:00
 Canadian Pharmacy Flagyl Online Drugstore [url=http://genericcial.com ]cialis[/url] Pediatric Amoxicillin Dose Cialis Levitra Ohne Rezept
Jeffpoonia - 2017-11-23  23:28:59
 Canadian Pharmacy Flagyl Online Drugstore [url=http://genericcial.com ]cialis[/url] Pediatric Amoxicillin Dose Cialis Levitra Ohne Rezept
Jeffpoonia - 2017-11-23  23:28:57
 Canadian Pharmacy Flagyl Online Drugstore [url=http://genericcial.com ]cialis[/url] Pediatric Amoxicillin Dose Cialis Levitra Ohne Rezept
Ronweix - 2017-11-21  14:55:11
 Isotretinoin 20mg Prix Cialis 5mg Cpr 28 Order Lasix [url=http://cheapviafast.com]viagra[/url] Cephalexin Yeast Infections Cheapest 200mg Viagra
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
[1] [2] [3] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.