j Query Tom Krejcar Jan Drnek Obsah Zkladn

j. Query Tomáš Krejcar Jan Drnek

Obsah � Základní informace o j. Query � Jak začít? � Syntaxe � Efekty / události � JQuery UI � Praktické příklady

Co je j. Query? � Java. Scriptový framework (knihovna) � Vydána v roce 2006 � John Resig � Zpracováváno na straně klienta � Free open source

Aktuální verze � verze 1. 11. 0 › S podporou starších prohlížečů (IE 6 – 8) � verze 2. 1. 0 › Bez podpory IE 6 - 8

Výhody � Kompatibilita v prohlížečích � Jednodušší syntaxe oproti JS

Kdo využívá j. Query (1/2)

Kdo využívá j. Query (2/2)

Java. Script vs. j. Query - Výběr elementu � Java. Script › get. Element. By. Id(„id“) › get. Elements. By. Tag. Name(„p“) � JQuery › $(„selektor“)

Jak začít? � 1. stažení aktuální verze j. Query � 2. import knihovny do stránky � 3. import jednotlivých skriptů

1. Stažení aktuální verze � www. jquery. com � 1) komprimovaná verze › produkční � 2) nekomprikovaná verze › vývojová

2. Import do webové stránky � 1. způsob � 2. způsob (Google AJAX libraries API) � 3. způsob

3. Import jednotlivých skriptů � Vytvoření � Import skriptu prvni. js skriptu

Syntaxe $(selektor). metoda() � Označení využívání j. Query › 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é

Manipulace s obsahem Metoda get / set Popis text() / text(„text“) Vrací /nastavuje text html() / html(„<b>Hello</b>“) Vrací /nastavuje html val() / val(„value“) Vrací /nastavuje hodnotu (např. z textboxu) attr() / Vrací /nastavuje hodnotu atributu attr("href", "http: //www. w 3 schools. com/j query"); Metoda Popis 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 add. Class(„blue“) / remove. Class(„blue“) Přidání / odstranění css třídy

Efekty Efekt Popis Hide()/show() Zobrazení/skrytí elementu Fade() (fade. In(), fade. Out(), fade. Toggle(), fade. To()) Postupné zobrazení, či zmizení Slide() Vysunutí Animate() Animace (posun elementu) Stop() Zastavení Callback() Zpětná vazba po vykonání operace Zdroj: www. w 3 schools. com/jquery/default. asp

Události Mouse Events Keyboard Events Form Events Document / window events click keypress submit load dblclick keydown change resize mouseenter keyup focus scrool blur unload mouseleave Zdroj: www. w 3 schools. com/jquery/default. asp

j. Query a AJAX � 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: › http: //www. w 3 schools. com/jquery_ajax_ge t_post. asp

j. Query UI http: //www. jqueryui. com � 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ů �

Ovládací prvky � Dialog � Datepicker � Autocomplete � Progressbar � Slider

Interakce � Resizable � Draggable � Droppable � Sortable � Selectable

Efekty � Blind � Explode � Fold � Pulsate � Shake � Slide

Praktické příklady � Tabulka � Zobrazení / skrytí elementu � Rozbalovací nabídka � Validace formuláře � Fotogalerie � Nabídka (klouzání)

TABULKA

Tabulka (. html)

Tabulka (. css)

Tabulka (. js)

SKRYTÍ ELEMENTU

Skrytí elementu (. html)

Skrytí elementu (. css)

Skrytí elementu (. js)

ROZBALOVACÍ NABÍDKA

Rozbalovací nabídka (. html)

Rozbalovací nabídka (. css)

Rozbalovací nabídka (. js)

FORMULÁŘ

Formulář (. html)

Formulář (. js)

FOTOGALERIE

Fotogalerie (. html)

Fotogalerie (. css)

Fotogalerie (. js)

NABÍDKA (KLOUZÁNÍ)

Nabídka (. html)

Nabídka (. css)

Nabídka (. js)

Zdroje � www. w 3 schools. com � www. wikipedia. com � MARGORÍN, M. j. Query bez předchozích znalostí. Brno : 2011. ISBN 978 -80 -251 -3379 -8 � BAŠE, O. j. Query pro neprogramátory. Brno : 2012. ISBN 978 -80 -251 -3750 -5 � www. jaknajquery. cz

Děkujeme za pozornost!