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ářů(25)
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
Ronweix - 2017-11-17  19:18:51
 Cheap Retin A [url=http://levitrial.com]usda approved generic levitra[/url] How To Get Cialis In Canada Brand Prednisone Online
Ronweix - 2017-10-16  02:30:12
 Viagra Generika Probleme Erboristeria Viagra [url=http://cheapviasales.com]online pharmacy[/url] Ere To Get Cialis In Perth Buy Cialis Generic Online Propecia Valor
Ronweix - 2017-10-16  02:30:11
 Viagra Generika Probleme Erboristeria Viagra [url=http://cheapviasales.com]online pharmacy[/url] Ere To Get Cialis In Perth Buy Cialis Generic Online Propecia Valor
Ronweix - 2017-10-16  02:30:10
 Viagra Generika Probleme Erboristeria Viagra [url=http://cheapviasales.com]online pharmacy[/url] Ere To Get Cialis In Perth Buy Cialis Generic Online Propecia Valor
Ronweix - 2017-10-16  02:30:05
 Viagra Generika Probleme Erboristeria Viagra [url=http://cheapviasales.com]online pharmacy[/url] Ere To Get Cialis In Perth Buy Cialis Generic Online Propecia Valor
Ronweix - 2017-10-16  02:09:42
 Nexium Mups 40 Mg [url=http://cheapviasales.com]viagra[/url] Como Comprar Cytotec Sin Receta Medica
Ronweix - 2017-10-12  20:58:12
 For Sale Amoxicilina On Line Pills Buy Orlistat From Mexico [url=http://howtogetvia.com]viagra[/url] Propecia Fuerte Cialis Dolor De Pie
as
Ronweix - 2017-10-12  20:58:11
 For Sale Amoxicilina On Line Pills Buy Orlistat From Mexico [url=http://howtogetvia.com]viagra[/url] Propecia Fuerte Cialis Dolor De Pie
as
Ronweix - 2017-10-12  20:58:10
 For Sale Amoxicilina On Line Pills Buy Orlistat From Mexico [url=http://howtogetvia.com]viagra[/url] Propecia Fuerte Cialis Dolor De Pie
as
Ronweix - 2017-10-12  20:58:09
 For Sale Amoxicilina On Line Pills Buy Orlistat From Mexico [url=http://howtogetvia.com]viagra[/url] Propecia Fuerte Cialis Dolor De Pie
as
Ronweix - 2017-10-06  15:51:41
 Propecia Dha [url=http://viaonlineusa.com]viagra online prescription[/url] Cephalexin And Strep Throat
Ronweix - 2017-10-03  13:21:02
 Cheap Fluoxetine Antidepressant Prague Levitra Shipped From Us Kamagra Uprima [url=http://leviprices.com]pharmacy prices for levitra[/url] Maxaquin What Are The Dosage Of Propecia Amoxil Prix
Ronweix - 2017-10-03  13:21:01
 Cheap Fluoxetine Antidepressant Prague Levitra Shipped From Us Kamagra Uprima [url=http://leviprices.com]pharmacy prices for levitra[/url] Maxaquin What Are The Dosage Of Propecia Amoxil Prix
Ronweix - 2017-10-03  13:21:00
 Cheap Fluoxetine Antidepressant Prague Levitra Shipped From Us Kamagra Uprima [url=http://leviprices.com]pharmacy prices for levitra[/url] Maxaquin What Are The Dosage Of Propecia Amoxil Prix
Ronweix - 2017-10-03  13:20:59
 Cheap Fluoxetine Antidepressant Prague Levitra Shipped From Us Kamagra Uprima [url=http://leviprices.com]pharmacy prices for levitra[/url] Maxaquin What Are The Dosage Of Propecia Amoxil Prix
Здравствуйте! Вас интересуют клиентские базы данных? Ответ на Email: prodawez@mail.de - 2017-09-29  17:15:06
 Здравствуйте! Вас интересуют клиентские базы данных? Ответ на Email: prodawez@mail.de
Ronweix - 2017-09-29  15:15:23
 Buy Cheap Online Uk Viagra [url=http://tadalaf20mg.com ]cialis[/url] Propecia Liver Saw Palmetto Viagra Turkei 104 Vigra
[1] [2] 
*v komentářich nesmíte používat sprostá slova a odkazy!!!Děkuji za pochopeni.