Nos, itt az ideje, hogy végre kőkeményen el kezdjük nyomatni a jQuery-t. Előtte viszont egy nagyon fontos dolgot még tisztáznunk kell: a követelményeket. Pontosabban azt, hogy milyen tudással kell már rendelkeznek (vagy mikbe kell még gyors beleásnod magad), hogy elindulj ebben a témában.

Követelmények:

• Tisztában kell lenned a HTML nyelv alapjaival (struktúrája, tag-ek, attribútumaik, azonosítójuk, osztályok, stb.). Bár merem feltételezni, hogy ezt kipipálhatjuk, mert csak nincs olyan elvetemült, aki úgy akar autót szerelni, hogy motorháztetőt se látott életében.
• Ismerned kell a CSS stílus lapok felépítését is (kiválasztások módjai, formázási tulajdonságok). Gondolom, problémát ez sem jelent, de azért jobb letisztázni :)
• Ezeken kívül programozói tudásra is szükséged lesz. Ha a JavaScript alapjaival még nem vagy tisztában, biztos egy valagnyi cikket találsz róla a neten (hogy kell beágyazni, alapvető funkciók, stb.). Amennyiben még soha életedben nem programoztál, akkor egy kicsit jobban bele kell ásnod magad, de a dolog még akkor sem reménytelen.

Most, hogy ezeket mind rendre tisztáztuk, már tényleg nincs más hátra, mint előre. Kezdetnek vegyük is elő azt a kis függvényt, amit az előző cikkben alkalmaztunk:

$('#box').fadeIn(500);

Mit is jelent ez a rövidke kifejezés? A "$" jel az elején jelzi, hogy egy jQuery hívásról van szó (egyszerűbb, mintha mindig ki kellene írogatnunk, hogy "jquery"), a zárójelben utána pedig paraméterként megadjuk neki, hogy melyik elemről van szó a weboldalunkon (ez ugye most a "box" id-vel ellátott DIV-ünk). Ezután jön, hogy milyen hatást szeretnénk erre gyakorolni, jelen esetben a "fadeIn" függvényt hívjuk meg, ami az előtűnésért felelős és bemenő paraméterként megadjuk neki, hogy 500 ms alatt menjen végbe a folyamat. Készülj fel, hogy gyakran fogsz ehhez hasonló kifejezéseket pötyögni, úgyhogy jól jegyezd meg :) Ha pedig eleget emésztgetted már, akkor haladjunk tovább...

Szelektorok

Már megszoktuk CSS-ben a módszert, amivel megmondjuk az értelmezőnek, hogy mely elemere (vagy elemekre) vonatkozzon a leírásunk. Megadhatunk egy konkrét elemet azonosító alapján, vagy egy  csoportot a megadott osztályra, illetve tag-re hivatkozva, stb. Lényegében ugyanezt az elvet kell alkalmaznunk a jQuery esetében is az objektumok kiválasztásához. A fenti példában is a "#box" kifejezés jelentette, hogy a "box" azonosítójú elemmel szeretnénk kezdeni valamit. Akkor a biztonság kedvéért íme néhány további példa:

• $('.oszt') : az "oszt" nevű osztályhoz tartozó elemekre vonatkozik
• $('a') : az összes linken (tehát "a" tag-ek) hajtsa végre a műveletet
• $('#lista .uj') : a "lista" azonosítójú elemen belüli "uj" osztályba tartozók
• $('#lista li:nth-child(2)') : a "lista"-n belüli a második "li" tag (gyerek)

Nyugi... hamarosan kipróbáljuk ezeket a gyakorlatban is. Felépítünk egy kis HTML-struktúrát, majd azután különböző jQuery-s kijelölésekkel cseszegetjük az elemeket :) Ehhez mondjuk változtassuk a színüket, és így már azt is megismerjük, milyen módon változtathatjuk meg az objektumok CSS tulajdonságait jQery-vel.

A "CSS" függvény

Egy nagyon klassz kis metódus, amivel a kijelölt elemek stíluslapon meghatározott tulajdonságaival vehetjük fel a kapcsolatot. Az irány a bemeneti paraméterek számától függ. Az első paraméter mindig az adott tulajdonság (például: background-color). Ha nem adunk meg másodikat, akkor a függvény visszaadja a szóban forgó tulajdonság épp aktuális értékét, ha pedig megadunk valamit, akkor azzal írjuk felül a régi állapotot. Például: van egy "doboz" nevű DIV-em, ami kezdetben 170 pixel szélességű. Mind a két módon kipróbálom rajta ezt a függvényt:

alert("A doboz mérete: "+$('#doboz').css('width'));
$('#doboz').css('width','500px');
alert("A doboz mérete: "+$('#doboz').css('width'));

Először egy "alert" függvény segítségével kiíratjuk magunknak a "doboz" szélességét: látható, hogy a "css" függvényben csak egy paraméter szerepel, a "width". Így tőle visszatérési értékként megérkezik a szélesség mérete, majd a felugró ablakunkban meg is jelenik a szöveg: "A doboz mérete: 170px". A második sorban viszont már kettő bemenő paramétert kap a metódus: itt azt jelezzük neki, hogy a "width" tulajdonságot állítsa át "500px"-re, és ekkor bizony a DIV-ünk szemmel láthatóan szélesebbé válik. Végül pedig ugyanazt hajtjuk végre, mint az elején, csak most már ezt az üzenetet kapjuk: "A doboz mérete: 500px". Egyszerű, mint a fogpiszkáló :)

Események

Ejtsünk még pár szót ezeknek a kezeléséről. A jQuery-ben is lehetőségünk adódik arra, hogy meghatározzuk különböző események bekövetkeztekor milyen kód fusson le. Most példaként a két talán leggyakoribb eseményt mutatom be:

Hogy elkerüljük az olyan kellemetlenségeket, mint amikor úgy akarunk szkriptet futtatni egy elemen, hogy az még rendesen be sem töltődött az oldalon, célszerű a dokumentumunk "ready" eseményébe ágyazni a kódunkat. Így már biztosak lehetünk abban, hogy a függvényeink akkor kezdik el csak manipulálni az objektumokat, amikor az oldalunk már készen áll. Ennek az eseménynek a kifejtése így néz ki:

$(document).ready(function(){
    //ide jön a többi kód
});

A második legnagyobb jelenség talán az, amikor rákattintunk valamire. Gondolom mindenki sejti már ennek a nevét... igen! ez a "click" esemény :D és feltételezem, azzal sem árulok el hatalmas újdonságot, hogy szakasztott úgy néz ki, mint az előző. Lássunk egy ilyen kis kódot egy "gomb" id-jű elemre:

$('#gomb').click(function(){
    alert("Megnyomtad a gombot!");
});

Varázslatos... nem igaz? :) Akkor elméletileg ki tudjuk választani a keresett elemeket, ez alapján tudjuk változtatni a "css" tulajdonságaikat, és ezt a variálási folyamatot még akár egéreseményhez is tudjuk kötni... A következő cikkben tehát jöhet végre az a színezős feladat!

Addig is ha érdekel, a "ready" eseményre bekövetkező doboz-szélességet baszkuráló kódot letöltheted itt: KLIKK