 Základní informace o jQuery  Jak začít?  Syntaxe  Efekty / události  JQuery UI  Praktické příklady

 JavaScriptový framework (knihovna)  Vydána v roce 2006  John Resig  Zpracováváno na straně klienta  Free open source

 verze › S podporou starších prohlížečů (IE 6 – 8)  verze › Bez podpory IE 6 - 8

 Kompatibilita v prohlížečích  Jednodušší syntaxe oproti JS

 JavaScript › getElementById(„id“) › getElementsByTagName(„p“)  JQuery › $(„selektor“)

 1. stažení aktuální verze jQuery  2. import knihovny do stránky  3. import jednotlivých skriptů

  1) komprimovaná verze › produkční  2) nekomprikovaná verze › vývojová

 1. způsob  2. způsob (Google AJAX libraries API)  3. způsob

 Vytvoření skriptu prvni.js  Import skriptu

 Označení využívání jQuery › JQuery.trim(promenna) = $.trim(promenna)  Určení selektoru › $(this).hide() – skrytí aktuálního elementu › $(„p“).hide() – skrytí všech odstavců › $(„.trida“).hide() – skrytí všech elementů s třídou „trida“ › $(„#identifikator“).hide() – skrytí elementů s identifikátorem „identifikator“  Tvorba proměnných › var promenna = $ („.tabulka“) – uložení elementu s třídou tabulka do proměnné

Metoda get / setPopis text() / text(„text“)Vrací /nastavuje text html() / html(„ Hello “)Vrací /nastavuje html val() / val(„value“)Vrací /nastavuje hodnotu (např. z textboxu) attr() / attr("href"," om/jquery"); Vrací /nastavuje hodnotu atributu MetodaPopis append(„appended text“)Přidání textu na konec prepend(„preppended text“)Přidání textu na začátek after(„after text“)Přidání za objekt (obrázek) before(„before text“)Přidání před objekt (obrázek) remove()odstranění elementu addClass(„blue“) / removeClass(„blue“) Přidání / odstranění css třídy

EfektPopis Hide()/show()Zobrazení/skrytí elementu Fade() (fadeIn(), fadeOut(), fadeToggle(), fadeTo()) Postupné zobrazení, či zmizení Slide()Vysunutí Animate()Animace (posun elementu) Stop()Zastavení Callback()Zpětná vazba po vykonání operace Zdroj:

Mouse EventsKeyboard EventsForm EventsDocument / window events clickkeypresssubmitload dblclickkeydownchangeresize mouseenterkeyupfocusscrool mouseleaveblurunload Zdroj:

 Metoda load() › $(selector).load(URL, data, callback); › Načte data ze serveru a uloží je do elementu  Metoda get() › $.get(URL, callback);  Metoda post() › #.post(URL, data, callback)  Praktické příklady: › ax_get_post.asp

  Knihovna s otevřeným zdrojovým kódem  Okamžitě použitelné komponenty  4 kategorie: › Interakce › Ovládací prvky › Efekty › Pomocné nástroje  Možnost stylování  K dispozici motivy vzhledů

 Dialog  Datepicker  Autocomplete  Progressbar  Slider

 Resizable  Draggable  Droppable  Sortable  Selectable

 Blind  Explode  Fold  Pulsate  Shake  Slide

 Tabulka  Zobrazení / skrytí elementu  Rozbalovací nabídka  Validace formuláře  Fotogalerie  Nabídka (klouzání)

   MARGORÍN, M. jQuery bez předchozích znalostí. Brno : ISBN  BAŠE, O. jQuery pro neprogramátory. Brno : ISBN 