jQuery alapok 3
A cikk elején pár példát írok még az elemek lekérdezésére, aztán megnézzük hogyan lehet eseményeket rendelni hozzájuk. Mókás lesz!
Ismétlés
Egy egyszerű html szerkezet:
1. 2. 3. 4. 5. 6. 7. 8. | <div> <ul> <li class="paratlan"><a href="http://67developer.hu">Első link</a></li> <li><a class="paros" href="http://telekikoli.hu">Második link</a></li> <li><a class="paratlan" href="http://pacher.hu">Harmadik link</a></li> </ul> <a class="paros" href="http://szekcsoiskola.hu">Negyedik link</a> </div> |
És most jöjjenek a szűrő feltételek, alatta pedig az elemek amiket visszaadnak:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. | $('a') //megkapjuk mind a négy linket $('ul a') //az első 3 link $('.paros') a második és negyedik link $('ul li .paros') //Második link, a negyediket azért nem adja, mivel olyan dolgokat keresünk amik listán belül vannak és rendelkeznek paros classal $('.paratlan') //első <li> elem, és harmadik link $('a.paratlan') //a harmadik linket kapjuk vissza, ezt lejjebb kifejtem bővebben |
Az utolsó szűrőnél figyeljük meg, hogy a paratlan osztály az elsőnél a “li” elemhez, a harmadiknál az “a” elemhez van megadva. Ezért mikor lekérdezzük azokat az elemeket amik rendelkeznek “paratlan osztállyal, nem meglepő módon egy “li” és egy “a” elemet kapunk vissza.
Az utolsó példában pedig az történik, hogy azokat az “a” elemeket kérjükl le, melyeknek osztálya paratlan. FONTOS hogy az a után nincs space, így mondjuk meg a jQuerynek, hogy az osztály konkrétan az adott elemre vonatkozik.
Események hozzárendelése
Lássunk néhány eseményt a teljesség igénye nélkül, amit hozzárendelhetünk valamelyik elemhez:
- click – kattintás
- mouseover – egér az elem fölé kerül
- mouseout – eget lehúzzuk az elemről
- change – megváltozik egy input tartalma
A következő példában egy “div”-hez rendelünk egy click eseményt, és ha rákattintunk, akkor ki alertlünk valamit.
1. 2. 3. 4. 5. 6. 7. 8. | <div id="katt"> Egyetemi hallgató vizsgázik. Szakad róla a víz, iszonyú gondban van. A professzor kedvesen - Segíthetek egy kisegítő kérdéssel? - Óóóó, igen professzor úr, köszönöm - így a diák. - Nos? </div> |
1. 2. 3. | $('#katt').click(function(){ alert('Sikerült'); }) |
Emlékszünk a # után megadhatjuk annak az elemnek az id-jét amit vissza szeretnénk kapni. ehhez az elemhez hozzákapcsolunk egy .click() eseményt, majd ennek paraméterként egy függvényt adunk. Ne ijedjünk meg a .click(function(){ … }) szerkezettől, ha még nem láttunk ilyent, mindössze annyi történik, hogy nem írunk egy külön függvényt amit majd itt meghívunk, hanem helyben állítjuk elő.
Ha a .click() -nek nem adjuk meg paraméterként a függvényt, akkor meghívja az eseményt. Így például egy elemnre kattintva meghívhatjuk egy másik elem már definiált .click()függvényét. Íme egy példa:
1. 2. 3. 4. | <div id="zold">Ettől zöld lesz</div> <div id="kek">Ettől kék lesz</div> <div id="masik_zold">Ettől is zöld lesz lesz</div> <div id="szinez">Ezt színezzük</div> |
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. | //a #zold divre kattintva a szinez betűszine zöld lesz $('#zold').click(function(){ $('#szinez').css('color','green'); }); $('#kek').click(function(){ $('#szinez').css('color','blue'); }); //a #masik_zold-re kattintva meghívódik a #zold-ön definiált click függvény $('#masik_zold').click(function(){ $('#zold').click(); }); |
Mutatok egy hasznos példát is, talán nem lesz annyira bonyolult. Azt szeretnénk, ha egy input mezőbe gépelve, mellette megjelenne, hogy hány
karaktert írtunk eddig be. Az esemény amit használunk a keyup, ami akkor fut le, ha egy lenyomott billentyűt felengedünk.
Lehetőségünk lenne még használni a keydown() eseményt azonban ha hosszan nyomva tartunk egy billentyűt akkor a karakterszám mindig csak a lenyomott billentyű első karakteréi lévő karakterek számát tükrözné. Harmadik lehetőség a change() használata, viszont ő csak akkor fut le, ha az adott elem elveszti a focust, azaz kikattintunk az input mezőből.
1. 2. | <input id="szoveg" type="text" /> <span id="karakter"></span> |
1. 2. 3. 4. 5. 6. 7. | //ha a #szoveg inputban a lenyomva tartott billentyűt felengedjük $('#szoveg').keyup(function(){ //a karakterszam változó értéke, a #szoveg hossza lesz, a this-ről bővebben a példa végén karakter_szam = $(this).length(); //a #karakter tartalma a karakterszam értéke lesz $('#karakter').html(karakter_szam); }) |
Amivel eddig nem találkoztunk az a $(this). Mondhattam volna a példában azt is, hogy $(‘#szoveg’).length(), viszont akkor megint bejárta volna az egész dokumentumot, hogy megkeresse ezt az elemet. Így viszont mivel közvetlenül ezen az elemen belüli függvényben vagyunk, a $(this) pontosan őt adja vissza.
Nézzünk egy páldát, ahol talán jobban átjön mikor mit jelent a $(this):
1. 2. 3. 4. | <ul> <li>Valami</li> </ul> <div id="egyesek">Egyesek füveznek, én fázom...</div> |
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. | //a linkre kattintva $('ul li').click(function(){ //megváltozik a szövege $(this).text('Valami más'); //egyesek div fölé húzva az egeret, zöld lesz a szövege $('#egyesek').mouseover(function(){ $(this).css('color','green'); }) //ha pedig levisszük róla az egeret, kékre vált $('#egyesek').mouseout(function(){ $(this).css('color','blue'); }) }) |
Remélem így már látszik, hogy a $(this) mindig lokális, az #egyeseken belül már arra vontakozik, és nem a linkre.
Összegzés
Ha valami nem érthető, szóljatok nyugodtan. A példa és a letölthető forrás sokat segíthet a megértésben.
