jQuery: Az alapok és az effektek
Mint már az előző postban említettem, egyre többet használom a jQuery-t a honlapok kódolásakor, ezért úgy döntöttem, hogy megpróbálom néhány írásban összefoglalni a nyelv alapjait. Ez az első ilyen cikk, ezért azoknak ajánlom olvasásra, akik még egyáltalán nem foglalkoztak ezzel a kiegészítővel, vagy akik nincsenek tisztában az effektek működésével.
Írásomban összeszedem, hogy miként is működik egy jQuery program és hogy mik a legalapvetőbb effekt utasítások, amiket használni érdemes és kell. Akik egyáltalán nincsenek tisztában a HTML kóddal és az alapvető Javascript nyelvvel, azok először ezeknek nézzenek utána, mert ahhoz, hogy az ember megértsen egy komplexebb nyelvet, jobb ha ismeri annak az alapjait. Persze azért nem kell az Assembly-vel kezdeni! 
A Javascripttől eltérően a jQuery parancsok elég összetettek tudnak lenni, főleg mivel ezt a library-t azért hozták létre, hogy meggyorsítsa, megkönnyítse a webprogramozást, és hogy minél kevesebb sor megírásával lehessen létrehozni minél felhasználóbarátabb oldalakat. Minden parancs így néz ki:
$(DOM elem).valami();
- A $ jel a “jQuery” rövidítése, ez jelzi a JS számára, hogy itt most egy jQuery objektumról lesz szó. Ha mondjuk használtál már Ruby on Rails-t akkor ismerős lehet ez a fajta jelölés. Lényegében ennyi, de érdemes még tudni, hogy a $ helyettesíthető a jquery kiírásával, tehát: jquery(DOM elem).valami();
- A (DOM elem) az a HTML elem amire hivatkozol a jQuery parancsban. Ezen az elemen fog végrehajtódni a meghívott függvény
- A .valami(); a jQuery függvény, amely meghívásra kerül. Lehet ez a legegyszerűbb hide(), ami eltünteti a megnevezett elemet, vagy egy összetett AJAX hívás is.
Tulajdonképpen ez volt a legelrettentőbb rész. Érdemes tudni, hogy egy DOM elemhez több függvény is rendelhető, tehát a $(DOM elem).valami1().valami2(); is nagyon szépen fog működni; és ebben van az igazi potenciál. Most, hogy ezt megértettük nézzünk meg a legegyszerűbb függvényeket: az effekteket.
Effekt függvények
A beépített effekt függvények nagy része a következő felépítéssel működik:
$(elem).effekt([speed, callback]);
- A függvények paraméterei opcionálisak, de közülük a speed, azaz sebesség az amit legtöbbször használni kell. Meg lehet adni ezt ‘slow’, ‘normal’ és ‘fast’ értékeken túl milliszekundumban is (1000 ms = 1 másodperc). Ez lesz az az időtartam, ami alatt a függvény végrehajtódik; ez a lefutási idő.
- A callback, vagyis visszahívás paraméterben megadható, hogy mi történjen miután lefutott a függvény. Például amint véget ér az adott parancs, visszakapjuk egy alert()-ben a számolás értékeit.
Volt, nincs (show(), hide(), toggle())
Szerencsére a jQuery függvényei többsége nevében hordozza a funkcióját is, ezért ha nem is ismered a függvényt, nagyon gyorsan rá lehet jönni a működésére. Így van ez a show() és a hide() parancsoknál is: míg előbbi megjelenít egy rejtett elemet, utóbbi eltünteti a célelemét. Mindkét függvény használható speed és callback paraméterrel és nélküle, de fontos megjegyezni, hogy a sebesség paraméter nélkül csak megjelenik/eltűnik a kiválasztott DOM elem; megadásakor azonban egy kis animációt kap.
A toggle() egy kicsiben eltér a show() és hide() függvényketől, ugyanis ez tulajdonképpen a kettő kombinációja. Paramétereinek megadhatjuk a már ismert speed és callback paramétereket, de egy kifejezést is (pl. osztas++ % 2 == 0, azaz ha az “osztas” változó kettővel történő maradékos osztásának eredménye 0), amely teljesülésekor végrehajtódik az utasítás.
Lássunk is egy rövid példát. HTML kód:
Jelenítsd meg (show) Tüntesd el (hide) Jelenítsd meg és tüntesd el (toggle)
jQuery kód:
$('a#show').click(function() {
$('p.pelda_1').show();
});
$('a#hide').click(function() {
$('p.pelda_1').hide();
});
$('a#toggle').click(function() {
$('p.pelda_1').toggle('slow');
});
A kis programunk mindössze annyit csinál, hogy a megadott linkekre való kattintáshoz (click() függvény [erről egy későbbi postban]) rendel show, hide és toggle effekteket. Itt nézheted meg működés közben a demot. A show és hide nem kapott speed paramétert, míg a toggle-re tettem, csak azért, hogy lássátok, hogy milyen is az.
Csúszkálás (slideDown(), slideUp(), slideToggle())
A slide függvények nagyon hasonlóan működnek a show, hide függvényekhez, lényegében annyiban különböznek, hogy míg az előbbiek a speed megadásával függőleges és vízszintes irányba animálták a függvényt, a slide függvények csak függőleges irányba teszik ezt. Nem ér meg külön példát, a jQuery dokumentációban van róluk bőven leírás, példával.
Eltűnés/feltűnés (fadeIn(), fadeOut(), fadeToggle())
Eljutottunk egyik kedvencemhez: a fadeIn(), fadeOut(), fadeTo() ugyanis az a függvényhármas, amelyiket a legnagyobb előszeretettel használom. Szerintem baromi jól tud kinézni egy jó helyre rakott, szépen animálódó üzenet a usernek, főleg ha az ugyanilyen szépen be is csukódik utána. A fadeTo() a paraméterben kapott értékig csökkenti a függvény láthatóságát, míg a fadeIn() és fadeOut() a megadott sebességgel csökkenti az elem opacity CSS értékét, majd mikor ez elért a 0-hoz, rádob egy “display: none”-t, tehát eltűnteti teljesen, hogy ne foglalja a helyet. Na ez gondokat okozhat néha.
A fade effektek egyik fontos tulajdonsága, hogy míg az eddig megismert függvények folyamatosan “nyitják ki” a célobjektumot, ezzel lentebb tolva/fentebb húzva az alatta és körülötte lévő elemeket; a fade az animáció befejeztével és kezdetekor a DOM elem elfoglalja a megfelelő méretű helyét és így tűnik el(ő). Ez azt jelenti, hogy ha egy oldal közepén lévő elemet animálsz meg fade-del, akkor az animációs idő egy időpillanatában ugrani fog egyet az oldal magassága/szélessége, erre pedig figyelni kell mert zavaró lehet!
A fade-hez készített példában az eltüntetendő elem után raktam egy másikat, hogy lássátok miről beszéltem pontosan. Megoldásként vagy azt javaslom, hogy olyan elemeknél használjátok a függvényt, amik nincsenek körülvéve sok másik elemmel, vagy CSS-sel pozicionáljátok be az elemet egy felsőbb rétegre.
A központi effekt (animate() és stop())
Az összes eddig felsorolt effekt függvény visszavezethető egy központi animációs függvényre, az animate()-re. Ez az amivel mi magunk is létrehozhatunk hasonló mozgásokat a DOM elemekre, csupán egy kis CSS tudás kell hozzá. Egyszerűen az animate() paraméterei között meg kell adnunk, hogy mely CSS tulajdonságokat változtassa meg a függvényünk; például a 400px széles és magas <p> csökkenjen 200×200-ra, a láthatósága pedig legyen fele:
$('a#animald').click(function() {
$('p.pelda_3').animate({width: "200px", height: "200px", opacity: 0.5}, 1500);
});
Itt a kipróbálható példa. Az animate() az egyik legfontosabb effekt, hiszen ezzel nagyon komplex animációkat hozhatunk létre, de vannak korlátok; a háttérképet például csak vízszintesen lehet animálni, ami kicsit idegesítő tud lenni, szerencsére azonban van erre egy plugin.
Feltűnhet, hogy a példában alkalmaztam a stop() függvényt az animate() előtt (a függvények összefűzhetőek, mint már említettem!); ez annyit csinál, hogy megállítja az éppen zajló animate()-et, így adva szabad utat a következő animáló függvénynek. A stop()-ról van egy egészen jó példa a jQuery dokumentációban.
Mára ennyi. Következő alkalommal megnézünk egy-két fontos esemény-függvényt (pl. rákattintás, fókuszba kerülő elemek) és néhány selectort (ezekkel tudunk bizonyos elemekre hivatkozni és kezelni jobban a DOM elemeket). Addig is gyakoroljatok ezekkel! Ha valami nem világos, nyugodtan kérdezzetek a hozzászólásoknál!
Comments
January 22, 2010 3:15 pm
most, hogy már napok óta mélyen elmerültem a jquery-kódokban, láttam csak, hogy az api.jquery.com-on is aszem fadeIn()-nel jönnek be a kommentek ha elérsz a görgetésben addig, marha jól néz ki. professzor úr, mit gondol, nem veszélyes dinamikusan betölteni oldalrészleteket? mi van ha valahol simán le van tiltva a javascript? mik erről a tapasztalatai? kérjük meséljen:D:D
//fasza tutroial!
February 1, 2010 9:33 pm
Hát én soha az életben nem vettem még figyelembe, hogy egy usernek le van tiltva a javascript. Akinek le van tiltva szerintem, az ne csodálkozzon, hogy nem jelenik meg neki rendesen az oldal, ugyanolyan mintha valaki IE6-ot használ és csak néz hogy csomó minden milyen ronda, közben csak ő a hülye. Szerintem az ilyen esetekre nem kell optimalizálni, de persze be lehet tenni egy alap hibaüzenetet, amit a javascript töröl ha engedélyezve van (.hide()); ez megoldás lehet.
February 6, 2010 6:19 pm
Manapság tényleg elgondolkodtató, hogy ki nem használ javascriptet, azonban például firefoxhoz is van olyan beépülő, hogy noscript, ami tiltja a js-t ahol nem engedélyezzük. De valószínűleg aki ilyet használ az tudja hogy miért nem működik rendesen a megtekintett weboldal (vagy nem
).
Olyan cikk lesz, hogy hogyan írjunk saját plugint?
March 21, 2010 11:28 am
Hm, azért figyeljünk már azokra is akik nem tudják megnyitni a js-s oldalakat. Ezer meg ezer olyan ember van aki nem ért annyira a géphez, régebbi a böngészője, (v. még win98at használ
, és egy cég esetében ez mind elvesztett ügyfélnek számít, ha csak azért nem vásárol mert nem gördült le a menü… a wapozókról meg ne is beszéljünk..
March 21, 2010 11:53 am
Természetesen, ha egy olyan weboldalt készítesz, ahol fontos a legördülő menü/akármilyen Javascriptes dolog, jobb az adott problémát másként körüljárni (pl: CSS legördülő menü), de azért legyünk reálisak, a Win98 és a WAP szinte már nem létezik, teljesen elenyésző. El kell dönteni, hogy ki a célközönséged és annak megfelelően kell kialakítani az oldalt.
Nem lehet mindenkinek jó oldalt csinálni, vagyis lehet, de annak nagyon borsos ára van. Én pl ha IE6-ra kell optimalizálni egy oldalt, 50% felárat kérek, mert kb ennyi idő megy el azzal, hogy ott is működjön megfelelően minden. Ha csak azt nézed, hogy milyen platformokon néz ki teljesen másként egy oldal, akkor láthatod, hogy a JS hiány a legkevesebb: még az IE6-7-8 is teljesen inkonzisztens egymással, pedig ugyanazon cég termékei.
February 18, 2010 8:09 pm
köszi
sok sok ilyen leírást méééég 
March 13, 2010 4:49 pm
Áh el sem hiszem hogy végre találtam egy ilyen leírást.
Sok hasonlót még. Az oldal könyvjelzőzve
March 31, 2010 7:54 pm
Jó, de hova kell beírni a JQuery kódokat?
April 1, 2010 12:11 pm
Hát pont úgy, mint a JavaScript kódot, <script> és </script> közé. Ha függvényeket készítesz, azt lehet bárhol, de ha az oldal betöltésekor lefutó kódot akarsz, akkor azt $(document).ready(function() { …. ide … }); közé.
April 1, 2010 6:52 pm
Köszönöm. És inline (sorközi) nincs? Vagy ha hozzá akarom rendelni a JQuery kódot egy eseményhez, akkor azt hogyan tehetem meg? Mintha láttam volna valahol span közé betéve JQuery kódot, nem igazán értem, hogy az mi akar lenni…
April 1, 2010 7:00 pm
A <script> taget oda teszed a forrásban ahová szeretnéd (sok esetben a body vége elé teszik), szóval teheted spanok közé, bár sok értelme nincs. Max akkor, ha egy email címet írsz ki vele, mert akkor ott kell meghívni a scriptet, ha egy sima document.write-os scripted van.
April 1, 2010 6:54 pm
Ja igen, és bookmarkletek készítésénél is felhasználható a JQuery?
April 1, 2010 7:01 pm
Arról nem tudok, szerintem arra jobb a sima JS. Keverhető a kettő ugyanis nyugodtan
Pl így: http://labnol.blogspot.com/2006/01/add-to-favorites-ie-bookmark-firefox.html
April 1, 2010 8:03 pm
Nagyon kedves vagy, most már csak arra lennék kíváncsi, hogy például onclick eseményhez hogyan rendelek hozzá JQuery kódot?
April 1, 2010 8:07 pm
Kiválasztod az adott elemet (id vagy class alapján) és adsz rá egy click eseményt, valahogy így:
$(‘a.class’).click(function() { … ide jön a kód … });
De ezekről írok egy bejegyzést a közeljövőben
April 7, 2010 3:25 am
Egy kérdés, Jquery-vel lehet szövegmezőket lekerekíteni? Találtam egy cornerz kiegészítőt, ami hasonló képpen működik, de nem sikerült működdésre bírnom.
)
Ha tud valaki működő megoldást, az legyen oly kedves megosztani. (esetleg egy bejegyzés róla?
April 7, 2010 9:14 pm
A szövegmezők lekerekítéséhez én nem feltétlen használnék jQuery-t, hiszen mind a webkites böngészők (Safari, Chrome), mind a Firefox tudja CSS-ből is csinálni a dolgot:
input {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Ha IE-ben is le akarod kerekíteni, az bonyolultabb, de akkor inkább egy háttért használj az input mezőknél
April 12, 2010 9:55 am
Őszintén szólva, azért kell a Jquerys megoldás, mert e107 CMS-hez készítek témát. Nem minden tbox-ot tudnék így helyre rakni, de mit lehessen tudni. A másik amiért a jquery életképesebb az a böngészőfüggőség. A felkínált megoldásod tökéletes (lessz talán egy év múlva). Sokan használnak még régebbi verziós FF-t na meg az undok IE, szóval ha nem muszály nem kavarok bele. De köszönöm, azért a válaszod nagyon hasznos volt.
April 18, 2010 9:37 am
Kedves Zoltán!
Nemrég beépítettem a jQuery-t egy weblapba. Szeretném megoldani, hogy a képekhez egyenként lehessen kommentet írni, sajnos azonban nehézséget okoz számomra a forráskód átlátása.
Azt szeretném Öntől megkérdezni, hogy tud-e módot az aktuálisan, nagyban megjelenő kép fájlnevének lekérdezésére?
April 18, 2010 2:50 pm
Ádám, szerintem nyugodtan tegeződjünk.
Nem tudom, pontosan hogy jeleníted meg a képfájlokat nagyban (lighbox, vagy simán egy oldalon), de az “attr” függvény segíthet. Nagyjából így:
var src = $(‘img.nagykep’).attr(‘src’);
Így az ‘src’ változóba bekerül az aktuális .nagykep class-ú kép elérési útja. Remélem ilyesmire gondoltál, ha nem, nyugodtan írd le, hogy miről van szó pontosan és megpróbálok segíteni.
April 18, 2010 5:09 pm
Szerintem a legjobb lenne, ha megnéznéd miről beszélek. A címet elküldtem e-mailben.
April 30, 2010 10:29 pm
Üdv !
Egy apró problémába ütköztem. Kezdem egész jól érteni a Jquery működését, de Opera alatt valamiért (néha) nem akar működni. Az opera hibakonzol szerint szintax hiba van. Különböző plugineknél is hasonló jelenséget tapasztaltalet(dropshadow, slider, scrollbar). Nem sikerült rájönnöm a hiba okára. A böngészővel is lehet gond, de ha volna esetleg javaslat vagy ötlet azt megköszönném.
April 30, 2010 11:16 pm
Szia
Sajnos Operával nem igazán foglalkoztam soha, ezért nem tudom mi lehet a hiba forrása, de nézz körbe fórumokon, hátha akad valahol válasz. Ha nem, akkor próbálgasd úgy, hogy a különböző pluginokat kiszedegeted egyesével, és nézed, hogy változik a hiba.
May 9, 2010 2:56 am
Nem tudom mi okozhatott gondot, de már megoldódott…nem csináltam semmit. Ilyen könnyen mennyen minden probléma megoldása
Azért a választ köszönöm.
June 2, 2010 11:52 pm
Azt meg tudod mondani (esetleg megoldással) hogy az animate elemmel miért keletkezik néha egy “ugrás” az animációban?
Konkrétabban egy margin-t és padding-ot is tartalmazó DIV elemre próbálgattam ezt az alap függvényt: $(“div”).animate({“height”: “toggle”, “opacity”: “toggle”}, “slow”);
A probléma: becsukódásnál az animáció végén, nyitódásnál az elején az alatta lévő content ugrik egyet, míg a sima slideToggle effekt nagyon szépen működik. (a teszt Chrome Mac alatt volt)
June 6, 2010 4:01 pm
Hello!
Lenne némi problémám a jQuery-vel, amit nem tudtam magamtól kisakkozni egyelőre, bár lehet csak rossz nyomon jártam eddig, és a programozási alapjaim is gyenge lábakon állnak sajnos. Adott két div (300px és 600px szélesek) egymás mellett, az bal oldaliban toggle()-t használok egy terméklista elemeinek legördítésére, amin ha egy termék nevére rákattint az ügyfél, a nagyobbik divben, szintén toggle() és php include segítségével megjelenik maga az információ. Az aktív termék nevét a bal divben kiemeltem más háttérszínnel (addClass), hogy egyértelmű legyen.
Hogy tudnám megoldani, hogy:
#1: ha terméket váltok, automatikusan ne az éppen nyitva lévő termékinfó alá, hanem annak a helyére nyíljon az új…
#2: …és ezt kövesse a bal oldalon a kiemelés is?
Jelenleg favágó módon van összetákolva a dolog (minden elem clickjére megírtam, hogy a többi elem CSS tulajdonságait állítsa alaphelyzetbe), de mivel egy elég terjedelmes listáról van szó, nem érzem jónak ezt a módszert.
Minden segítségért előre is köszi!
June 6, 2010 4:31 pm
Mindkettőtöknek válaszoltam chaten, szóval todo kipipálva
June 25, 2010 12:45 pm
Hello,
Örülök, hogy megtaláltam ezt az oldalt, nemrég óta ismerkedek a jQueryvel.
Egyelőre nem sok saját kódot írtam, inkább plugineket használok.
A kérdésem, hogy a $(document).ready(function (){} hányszor lehet használni egy oldalon?
Most találtam egy jquery.magnifier.js fájlt ami kattintásra kinagyít egy képet, viszont ebben már van egy $(document).ready(function (){}
Működik minden, de eddig azt hittem ez a main függvény mint a C programozási nyelvben.
June 28, 2010 9:25 pm
Szerintem végtelenszer használható (nyilván nem célszerű), de az biztos, hogy nem olyan mint a C-ben a main
Viszont, használhatsz még nyugodtan $(window).load(function() { … }); függvényt is! Hajrá
July 1, 2010 6:45 pm
OK, kösz
gyakorlok tovább
November 5, 2011 8:50 am
“Zoltan
February 1, 2010 9:33 pm Reply
Hát én soha az életben nem vettem még figyelembe, hogy egy usernek le van tiltva a javascript. Akinek le van tiltva szerintem, az ne csodálkozzon, hogy nem jelenik meg neki rendesen az oldal, ugyanolyan mintha valaki IE6-ot használ és csak néz hogy csomó minden milyen ronda, közben csak ő a hülye. Szerintem az ilyen esetekre nem kell optimalizálni, de persze be lehet tenni egy alap hibaüzenetet, amit a javascript töröl ha engedélyezve van (.hide()); ez megoldás lehet.”
Jó hozzáállásod van neked is, hallod-e! Közben csak ő a hülye – én pedig azt mondom, az a magát kókler barom fejlesztőnek mondó ürge a hülye és húgyagyú barom, aki ezt így kijelenti. Ha fel sem fogod, hogy te vagy a seggnyaló a júzerek felé, akkor imho takaroggyá’ kapálni és számítógép közelébe se férkőzzél. Nincs rád szükség!