Selektory, Animace a Ajax – jQuery příklady (část 2)

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

Doufám, že z prvního článku jste si odnésli základní znalosti o knihovně jQuery, které by měli stačit k dnešnímu článku. Přišel čas se podívat na složitější a praktičtější příklady a techniky. Jquery se používa nejen pro ukázování a nebo zmizení obsahu, jak to bylo v prvním článku, ale i pro jiné účely, dnes rozebereme některé z nich.

V dalším příkladu se podívame na některé selektory, metody animace, a na jednoduchý Ajax příkaz. Pro každý příklad bude přípravena ukázka.

Několik příkladu selektorů.

Už víme, že výběr elementů pomocí jQuery je podobný výběru v CSS. Například, potřebujeme vybrat všechny odstavce v konkrétním bloku. Na to nám bude stačit tento kód:

<script type="text/javascript">
$(function(){
      $(
'#my_div p').click(function(){
      
//Zde Váš kód
      
});
      });
</script>

Toto se krásně hodi pro jednoduchý výběr a manipulaci. Teď se podívame na některé vnořené funkci jQuery.

Metoda:first

Přípusťme, že potřebujeme vybrat jen první odstavec konkretního textového bloku a změnit jeho styl. Můžeme přidat tomuto odstavci třídu, ale co když nemůžeme nebo nechceme toto dělat? Tady nám pomůže metod jQuery :first. Takhle to můžeme realizovat:

<script type="text/javascript">
$(
'#dummy_section p:first').css('color''blue'); 
//vybereme textovy blok s id
//dummy_section a prvni odstavec 
</script>
Vše je velice jednoduché, jdeme dál.

Metoda :not

Metoda :not se používa pro výběr konkrétních prvků, které neobsahují jiné elementy. Jinými slovy, máme neuspořádaný seznam s několika prvky. Chceme vybrat jenom ty elementy, které NEmají třídu special_class. Uděla se to takto:

<script type="text/javascript">
$(
'#dummy_section ul li:not(.special_class)').css('color''red');
//vybere blok s id dummy_section, pak prvky li, ktere nemaji tridu
//special_class a zmeni jejich barvu 
</script>

Metoda :not může být velmi platná při práci s vnějšími souborami a s různýma API.

Metoda :eq()

Touto metodou můžeme vybrat jakýkoliv prvek v bloku. Potřebujete jenom zadát jeho pořadové číslo. Když bysme potřebovali vybrat 3 odstavec v bloku, pak to úděláme následovně:

p:eq(2)

Proč dva? Protože číslování se začána od 0.

Podívame se na příklad:

<script type="text/javascript">
$(
'#dummy_section p:eq(2)').css('color''green');
//vybrat blok s id dummy_section a odstavec treti a zmenit barvu 
</script>
Určitě se podívejte na ukázky všech příkladu.

Odkazy na oficiální dokumentaci.

Jednoduchá animace.

V jQuery mimo jíž nám známé efekty hide() a show() existuje ještě velice zajímavá metoda animate(). Tato metoda nám umožňuje vybrat praktický jakýkoliv druh animace, a stanovit jeji dobu trvání.

Efekt “lehkého strkání odkazu"

Při namíření mýši, odkaz se bude hýbat. Připusťme, že máme neuspořádaný seznam a chceme, aby odkaz se pohnul doprava při namíření. Udělame to takhle:

<script type="text/javascript">
$(
'ul li a').hover(function() { //mys je na odkaze
      
$(this).stop(true,true).animate({ paddingLeft'10px' }, 200); 
    
//posun se doprava o 10px rychlosti 200ms 
      
}, function() { //mys je mimo odkaz
      
$(this).stop(true,true).animate({ paddingLeft}, 200);
    
//vrat se zpatky
});
</script>
stop(true,true) zastavi jiné animace, jestli je něco puštěno.

Efekt pro obrázek při namíření.

Ještě jeden příklad metody animate(). Máme obrázek a chceme, aby pří namíření na něj se něco dělo. Nechť obrázek má průzračnost rovnou 80%, při namíření mýši průzračnost se změní na 100% za určitou dobu. Toto se může hodit u banneru nebo galerii. Uděla se to tak:

<script type="text/javascript">
$(
'.hover_image img').css('opacity'0.8).hover(function(){
//prirad pruzracnost 0.8 obrazku s tridou hover_image
//a pri namireni na nej
      
$(this).stop().animate({opacity1}, 500);
//zmen pruzracnost na 100%
      
}, function(){
//mys mimo obrazek
      
$(this).stop().animate({opacity0.8}, 500);
//Vrat pruzracnost 80%
      
});
</script>

Určitě se podívejte na ukázky!!!

Jednoduchý Ajax.

V poslední části článku se podívame na Ajax pomocí jQuery. Pro tento příklad budeme mít vnější(externí) subor vnejsi.html s nějakým obsahem, který potřebujeme ukázat jenom jestli člověk zmačkne tlačítko. To znamená, že se nahraje jen při zmačknutí tlačítka, tím pádem se sníži rozměr stránky.
vnejsi.html

<p>This is an external HTML
 file loaded via AJAX
super 
simple with jQuery
!</p>

<
p>At vero eos et accusamus et 
iusto odio dignissimos ducimus
 qui blanditiis
....</p>

jQuery skript:
<script type="text/javascript">
$(
'p.load_it a').click(function(){
//pri kliknuti na odkaz v odstavci s tridou load_it
      
$('#demo_content').load('external_file.html');
//do bloku s id demo_content se nacte externi soubor
      
return false;
      });
</script>
A to je vše co potřebujeme pro nahrávání externího souboru pomocí jQuery.

Podívejte se na ukázku!!!

Dál budeme pokračovat s více příklady. Děkuji za pozornost, hezký zbytek dne.
Zdroj: www.spyrestudios.com

Systém Orphus
Napište komentář.
Celkem komenrářů(42)
Michaelbeege - 2018-07-30  05:25:50
 kamagra oral jelly 100mg how to use
buy kamagra oral jelly
kamagra oral jelly 100mg price in pakistan
[url=https://www.kamagrajellyk.com/]kamagra oral jelly[/url]
kamagra 100mg 7 tablets
Charlesmah - 2018-07-14  11:43:27
 comprar viagra generico espaГ±a envio 24 horas
generic viagra
generic viagra availability date
[url=http://viagrapipls.com/]viagra generic[/url]
viagra prices retail usa
http://viagrapipls.com/
viagra price costco canada
Haroldwok - 2018-07-13  20:06:32
 kamagra 100mg
buy kamagra 100mg
kamagra oral jelly how to use video
[url=https://www.kamagradax.com/]kamagra 100mg[/url]
kamagra 100 chewable
Robertevodo - 2018-07-13  07:51:51
 kamagra gold 100mg side effects
kamagra 100mg
the kamagra store coupon
[url=https://www.kamagrapos.com/]kamagra oral jelly[/url]
effectiveness of cialis vs viagra vs levitra vs kamagra
DavidTix - 2018-07-13  04:28:34
 buy kamagra 100mg oral jelly uk
kamagra oral jelly
kamagra oral jelly review uk
[url=https://www.kamagrajellyk.com/]kamagra jelly[/url]
kamagra gold 1200din
Twoja kamagra pl forum - 2018-03-30  03:36:20
 super kamagra opinie forum
kamagra 100 gold upotreba
kamagra kopen amsterdam winkel
[url=http://kamagradxt.com/]kamagra 100mg side effects[/url]
kamagra oral jelly reviews
http://kamagradxt.com/
kamagra jelly ingredients
Kamagra plus forum - 2018-03-28  23:52:17
 erfahrungsbericht kamagra oral jelly wirkung
buy kamagra 100 mg
kamagra reviews
[url=http://kamagradxt.com/]kamagra bezorgen amsterdam[/url]
super kamagra opinie forum
http://kamagradxt.com/
kamagra oral jelly 100mg for sale
JustSugs - 2017-12-23  10:06:30
 Doxycycline No Pres Online.Rs Pastillas Cialis Tadalafil [url=http://costofcial.com]cialis[/url] Kamagra Oral Jelly Ingredients Buy Doxycycline Ireland Prix Levitra Generique Female Cialis cialis Cytotec Vaginal Cialis Levitra Apotheke Buy Viagra Canada Effetti Collaterali Cialis Transaminasas Propecia Generico Can I Buy Nexium Online http://costofcial.com - cialis Zyvox Amoxicillin Cialis Levitra Viagra Viagra Livraison Express
Ronweix - 2017-11-29  19:45:22
 Prix Du Kamagra Pfizer Cialis Y Tadalafil Propecia Precio Cialis Levitra [url=http://orderviapills.com]viagra[/url] Comment Acheter Priligy
Ronweix - 2017-11-29  19:45:21
 Prix Du Kamagra Pfizer Cialis Y Tadalafil Propecia Precio Cialis Levitra [url=http://orderviapills.com]viagra[/url] Comment Acheter Priligy
Ronweix - 2017-11-29  19:45:20
 Prix Du Kamagra Pfizer Cialis Y Tadalafil Propecia Precio Cialis Levitra [url=http://orderviapills.com]viagra[/url] Comment Acheter Priligy
Ronweix - 2017-11-29  19:45:19
 Prix Du Kamagra Pfizer Cialis Y Tadalafil Propecia Precio Cialis Levitra [url=http://orderviapills.com]viagra[/url] Comment Acheter Priligy
Jeffpoonia - 2017-11-24  13:28:22
 Need To Order Tegratol Buying Antibiotics On The Inte
et Order Accutane Online From Canada [url=http://cheapestcial.com ]cialis[/url] Anyone Buy Viagra Off Radio Commercial
Jeffpoonia - 2017-11-24  13:28:21
 Need To Order Tegratol Buying Antibiotics On The Inte
et Order Accutane Online From Canada [url=http://cheapestcial.com ]cialis[/url] Anyone Buy Viagra Off Radio Commercial
Jeffpoonia - 2017-11-24  13:28:20
 Need To Order Tegratol Buying Antibiotics On The Inte
et Order Accutane Online From Canada [url=http://cheapestcial.com ]cialis[/url] Anyone Buy Viagra Off Radio Commercial
Jeffpoonia - 2017-11-24  13:28:15
 Need To Order Tegratol Buying Antibiotics On The Inte
et Order Accutane Online From Canada [url=http://cheapestcial.com ]cialis[/url] Anyone Buy Viagra Off Radio Commercial
Ronweix - 2017-11-22  20:22:26
 Buy Provera [url=http://via75mg.com]viagra[/url] Viagra Prescription Needed
Ronweix - 2017-11-17  19:18:55
 Cheap Retin A [url=http://levitrial.com]usda approved generic levitra[/url] How To Get Cialis In Canada Brand Prednisone Online
Ronweix - 2017-11-17  19:18:54
 Cheap Retin A [url=http://levitrial.com]usda approved generic levitra[/url] How To Get Cialis In Canada Brand Prednisone Online
Ronweix - 2017-11-17  19:18:52
 Cheap Retin A [url=http://levitrial.com]usda approved generic levitra[/url] How To Get Cialis In Canada Brand Prednisone Online
[1] [2] [3] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.