Eljött az első igazi gyakorlásunk ideje. Az első cikkben már emlegetett kis programot fogjuk megírni. A cél, hogy használat közben is megtekintsünk pár kijelölési módot, alkalmazzunk a szelektált elemekre függvényhívásokat (jelen esetben a CSS-módosítást), és ezek végrehajtását mind valamilyen eseményhez kössük.

<h3 id="cim1">Az első lista</h3>
<ul id="lista1" class="lista">
    <li class="li1">Az első lista első eleme</li>
    <li class="li2">Az első lista második eleme</li>
    <li class="li3">Az első lista harmadik eleme</li>
    <li class="li1">Az első lista negyedik eleme</li>
    <li class="li2">Az első lista ötödik eleme</li>
</ul>
<h3 id="cim2">A második lista</h3>
<ul id="lista2" class="lista">
    <li class="li1">A második lista első eleme</li>
    <li class="li2">A második lista második eleme</li>
    <li class="li3">A második lista harmadik eleme</li>
    <li class="li1">A második lista negyedik eleme</li>
    <li class="li2">A második lista ötödik eleme</li>
</ul>
<input type="button" id="gomb" value="Színezés"/>

Szerepeljen ez a kódrészlet a HTML-ükben. Gyorsan fussuk át, mit is alkot ez a kialakítás: áll 2 darab H3-as címsorból, amik különböző "cim1" és "cim2" azonosítóval rendelkeznek. Mindkettő alatt szerepel egy "lista" osztályba tartozó UL felsorolás, amiknek az id-jük viszont szintén eltérő. Ezeken belül pedig LI elemek sorakoznak hármasával különböző osztályokba sorolva ("li1, "li2" és "li3"). Alul pedig van egy gombunk, aminek megnyomására össze-vissza fogjuk színezni ezeket.

Jöhet akkor a szkript írása

Nem lenne egy hátrány, ha a színezések nem egyszerre, hanem minden gombnyomásra külön történnének, hogy jobban átláthassuk egyenként, mi is történik. Ennek érdekében kellene nekünk egy változó, amiben eltárolunk egy értéket, amit minden gombnyomáskor növelünk és aktuális értéke alapján döntjük el, hogy melyik függvény végrehajtása a soron következő.

var x=1;

Ez a szkriptünk legelső sora. Felvettünk egy "x" változót, aminek kezdetben az értéke 1 (tehát a legelső színezési függvény az egyes szám esetében hajtódik végre, a második meg majd - növelés után - a 2 esetében, és így tovább). Akkor most közöljük a jQuery-vel hogy klikkelési eseményt kérünk a gombunknak.

$('#gomb').click(function(){
    //ide jön majd a többi kód
});

Lássuk, mi jön az egéreseményünk függvényének a belsejébe... Itt ugye megnyomtuk a gombot és el kell döntenünk, hogy melyik feladat végrehajtása következik (ezért is vezettük be az "x" változót). Ide én egy "switch" szerkezet alkalmazását tartom célszerűnek. Egy rövidke kis emlékeztető: a SWITCH megvizsgál egy megadott értéket (ami esetünkben az "x" változó értéke lesz) és attól függően a megadott esetekhez leírt programrészek hajtódnak végre. A különböző eseteket a CASE kulcsszavakkal jelöljük, amelyeket követő kódrészlet lezárására a BREAK parancs szolgál (ez jelzi, hogy eddig fut a végrehajtás). Tehát valami ilyesmi következik:

switch(x){
    case 1:
        //ezt csinálja, ha X egy
        break;
    case 2:
        //ezt csinálja, ha X kettő
        break;
    //és így tovább...
}

Akkor nézzük végig a lépéseket egyenként, amiket futtatni fogunk. A legelső kódocska így fog kinézni:

$('h3').css('background-color','black');
$('h3').css('color','white');

Tehát a "h3" típusú elemek háttérszínét feketévé varázsoljuk, a betűszínük pedig fehér lesz. Ez a dokumentumon belül minden "h3"-ra vonatkozik.

$('#cim2').css('background-color','gray');

A második lépésben viszont már azt kérjük, a "cim2" azonosítóval rendelkező elem (ez a második "h3") háttérszíne legyen szürke. Ez rajta kívül mást nem fog érinteni.

$('#lista1 li').css('background-color','yellow');

Itt azt akarjuk, hogy a "lista1" azonosítójú objektumon belüli "li" elemek háttere változtassuk sárgára. Ekkor a program csak az első listát veszi figyelembe, viszont ez annak az összes "li" tagjára érvényesülni fog.

$('.li3').css('background-color','lime');

Most úgy variálunk még a dolgokon, hogy a "li3" osztályba tartozóakat rikító zöldre festjük. Ilyenből mindkét listában van egy, így az első "ul" egyik sárga hátterű "li"-je is átvált, valamint a második "ul" egyik "li" eleme is erre vált át.

$('#lista2 .li1').css('background-color','aqua');

Most a "li1" osztályba tartozó tagok háttérszínét nyomjuk át szép világoskék árnyalatba, de csak a "lista2" id-jű elemen belülre vonatkoztatva. Az első listában is szerepelnek ilyen osztállyal címkézett tagok, de emiatt a megkötés miatt ez rájuk nem lesz hatással.

$('#lista1 li:nth-child(2)').css('color','red');

Hogy legyen ilyen is... Az első lista második "li" típusú tagjának (gyermekének) a betűszíne legyen vörös. Ez gondlom egyértelmű, hogy mit fog művelni.

$('body').css('background-color','silver');

Ez az utolsó, nyugi :) Még megkoronázzuk az egészet egy világosszürkére festéssel a "body" főelemre vonatkozóan. Ekkor már szép színes lesz a dokumentumunk.

Akkor most ezeket bele kell ágyaznunk a SWITCH szerkezetünkbe, ami tehát 7 esetből fog felépülni. Még ezek után ne felejtsük el a parancsot, ami az "x" értékét minden gombnyomás esetén növelni fogja 1-gyel. Hogy minden totál tiszta legyen, itt látható a teljes szkript:

var x=0;
$('#gomb').click(function(){
    switch(x){
        case 1:
            $('h3').css('background-color','black');
            $('h3').css('color','white');
            break;
        case 2:
            $('#cim2').css('background-color','gray');
            break;
        case 3:
            $('#lista1 li').css('background-color','yellow');
            break;
        case 4:
            $('.li3').css('background-color','lime');
            break;
        case 5:
            $('#lista2 .li1').css('background-color','aqua');
            break;
        case 6:
            $('#lista1 li:nth-child(2)').css('color','red');
            break;
        case 7:
            $('body').css('background-color','silver');
            break;
    }
    x++;
});

Azért itt már egész jók vagyunk, most már írtunk egy picit összetettebb kódot is :) Próbáld meg te is működésre bírni. Ha esetleg mégis valami nem akarna stimmel, itt megtalálod az én kódomat: KLIKK

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