rss

jQuery pro začátečníky: metody a efekty

2. 10. 2008

V minulém díle jsme se naučili vybrat si prvek v HTML stránce, jaký se nám zamane. Ukázali jsme si už i jednu metodu hide(), která nám vybraný prvek schová. Metoda hide() patří mezi efekty. Pojďme si o ní říct něco víc a ukažme si několik dalších efektů.

Schovávání a zobrazování prvků

To se často hodí, je dobré třeba schovat část menu, aby nebylo příliš velké a měli jsme stránky přehlednější, ale využití je nespočet. Určitě jste si třeba všimli, jak Adam ve své jQuery zkoušečce schovává a zobrazuje nápovědu.

K prostému skrytí nebo zobrazení prvku použijeme metody hide() nebo show(). Pokud do závorky napíšete počet milisekund, prvek se schová pomaleji tak, že začne mizet odspodu. To jste mohli vidět v příkladech z minulého článku.

jQuery umí prvek i nechat rozplynout, použijte na to metodu fadeOut(). Vyzkoušejte. Stejným způsobem zobrazíte prvek zpět metodou fadeIn(). Opět můžete do závorky napsat počet milisekund a efekt mizení tak prodloužit.

Do třetice způsobů, jak nechat něco schovat nebo zobrazit, patří dvojice metod slideDown()slideUp(), opět můžete vyzkoušet.

Přepínáme

To, že jQuery nám opravdu šetří práci, nám předvede i následující sada metod. Vemte si situaci, kdy chcete něco schovávat a zobrazovat klikáním na stejný prvek. Za normálních okolností musíte zjitit, jestli to co chcete schovat nebo zobrazit je zobrazeno (abyste to schovali) nebo schováno (abyste to zobrazili). jQuery to udělá za vás, stačí použít metodu toggle(). Ta prvek zobrazí nebo schová podle toho, jestli je schován nebo zobrazen :)

Zatím ale neumíme metodu spustit ve chvíli, když se na něco klikne (to budeme umět až v příštím článku). Proto si tuto metodu předvedeme jenom tak, že ji spustíme dvakrát za sebou. Vyzkoušejte. Jak můžete vidět, metoda nejdřív prvek zobrazí a pak skryje, podle toho, v jakém stavu byl prvek předtím.

jQuery umí mnohem více efektů, můžete jich docílit například metodou animate(), která má však již složitější nastavení, ovšem pěkně zdokumentované, takže pokud to někoho zajímá, může si s ní hrát.

Metody pro manipulaci s obsahem

Efekty máme za sebou a teď se podíváme na metody, které já osobně velmi často využívám. Slouží k manipulaci s obsahem v HTML stránce. Například chci do nějakého odstavce přidat nějaký text nebo naopak zjistit, jaký text odstavec obsahuje.

Metodou text() zjistíme textový obsah nějakého prvku. Třeba odstavce. Zjištěný obsah si můžeme uložit hned do nějaké proměnné:

var obsah = $("#muj_odstavec").text();

Metoda text() umí do nějakého prvku text i vložit, stačí ten text napsat do závorek:

$("#muj_odstavec2").text('Nový obsah odstavce');

Takto tedy můžeme například zkopírovat obsah jednoho odstavce do odstavce druhého:

var obsah = $("#muj_odstavec").text();
$("#muj_odstavec2").text(obsah);

Vyzkoušejte

Stejným způsobem můžeme manipulovat i s HTML, a to použitím metody html(). Rozdíl mezi metodami text()html() můžete vidět na tomto příkladu. Všimněte si, že metoda html() přenesla jak text, tak HTML, kdežto metoda text() pouze text.

Pokud byste v cílovém odstavci už nějaký text měli a chcete pouze připojit další text, použijte metody append() (připojí na konec) nebo prepend() (připojí na začátek):

$("#muj_odstavec").append(' Toto se připojí na konec odstavce');
$("#muj_odstavec").prepend('Toto se připojí na začátek odstavce ');

Vyzkoušejte

Metod je v jQuery samozřejmě mnohem víc. Jejich prozkoumávání však už nechám na vás, protože tenhle návod vás měl jen nakopnout, ukázat o čem asi tak jQuery může být. Názorná dokumentace jQuery, kde najdete i názorné příklady vás určitě nenechá ve štychu. Pokud tedy chcete umět víc, zkuste ji letmo projít. K dnešnímu tématu jde hlavně o kategorie manipulaceefekty.

Snad jste pořád v obraze, protože příště pojedeme zase dál. Podíváme se na jednu velmi důležitou věc, a tou jsou události.

Seriál jQuery pro začátečníky


Komentáře

BlackSUN

Doplnil bych ještě odkaz na "něco jako dokumentaci", kterou používám já, když něco potřebuji. Nemusí být kompletní a není pro poslední verzi jQuery. http://visualjquery.com/1.1.2.html

Jan Menšík

Moc fajn serial, doufam ze si i v dalsich dilech udrzi stejnou uroven.

Martin

Moc užitečný seriál. Děkuji.

Ondřej

Výborný seriál, jen tak dál. Skvělý nápad je hlavně ta zkoušečka.

Důša

Musím říci, že dneska jsem se poprvé podíval na jQuery a hned jsem ho naučil používat, je to opravdu snadná a velmi užitečná věcička :-), Díky za dobré návody.

S pozdravem a přáním hezkého dne Dušan Jenčík.

martin

Prvý krát čítam tieto vynikajúce návody, avšak je to použiteľné aj v Opere? (napr. pomalé miznutie textu v IE to išlo bez problému, ale v Opere sa príklad zjaví, uskutoční sám bez toho aby som klikal na tlačítko ?Spustit?. Opakujúci klik nič nespraví. A ani keď zmením počet milisekúnd, už to nereaguje?????, ale v IE ano.)

ronny

Pěkný seriál, chtěl bych ale upozornit na chybičku u Vyzkoušejte u metody FateOut(); je tam špatně odkaz.

Radim24

Pěkný článek. Mimochodem, nemohl by jste mi někdo poradit s metodou v Jquery? Teprve začínám a nevím si s tím rady. http://diskuse.jakpsatweb.cz/index.php??

sakren

je to fajn seriál pro začátečníky.. Já patřím mezi ně a chtěl jsem se zeptat, proč když použiji např. ?var obsah = $(?#nejakaTex­tarea").text();" uloží se do proměné pouze defaultní hodnota, kterou do textarea vložím přímo v HTML a neuloží se tam hodnota, kterou napíši přímo na stránkách? Jak to mohu uložit do proměné.

medhi

sakren [10]: Protože do proměnné obsah se ta hodnota vloží ve chvíli, kdy se stránka načte. A v tu chvíli obsahuje ta textarea pouze ten výchozí text. Ve cvhíli, kdy do toho píšeš nějaký text, se už to přiřazení hodnoty do proměnné neprovádí, skript jakoby spí. Musel bys znova zavolat při napsání nějakou funkci, kde bys toto přiřazení znovu provedl.

sakren

je to fajn seriál pro začátečníky.. Já patřím mezi ně a chtěl jsem se zeptat, proč když použiji např. ?var obsah = $(?#nejakaTex­tarea").text();" uloží se do proměné pouze defaultní hodnota, kterou do textarea vložím přímo v HTML a neuloží se tam hodnota, kterou napíši přímo na stránkách? Jak to mohu uložit do proměné.

pepek

proste diky:)

Makeš

To sakren [12]: : Vyřešíš to pomocí volání metody val(). Příkládám i příklad s rozdílem: http://jquery.jslab.net/zkousecka/#?

Autora bych chtěl upozornit na překlep v URL adrese ve 4. odstavci (chybná subdoména ? jq.jslab místo jquery.jslab)

Jerry

Ahoj, chci se zeptat na jednu věc. Pokud chci vytvořit menu, kde bude pár hlavních odkazů a při kliknutí na nějaký z nich se vysunou pododkazy (které, aby se tam vešly, posunou zbylé odkazy pod nimi dolů). Šlo by to nějak pomocí fadeIn popř. prostě show nebo slideDown? Jak ale udělám to, že při dalším kliknutí na stejný odkaz, pododkazy zase zajedou zpět? Děkuji za radu. Jsem začátečník.


Archiv