A jQuery Alapok című oktató sorozat segítségével bevezetést nyerhetünk a jQuery JavaScript program könyvtár használatába. Megtanulhatjuk a rendszer alap szintű használatát, valamint megtudhatjuk hogy miért ilyen hatékony.
A jQuery népszerűsége az egyszerűségében és a használhatóságában rejlik. Ahhoz, hogy kijelöljünk az oldalunkon egy elemet nincs más dolgunk, mint használni a CSS-ben megszerzett, kijelölőkkel kapcsolatos tudásunkat. A CSS-ben használatos kijelölők mindegyikét alkalmazhatjuk egy-egy jQuery kijelölésben. JavaScript-ben a getElementById() eljáráson kívül – ami az ideális esetben csak egy eredményt ad vissza – ciklust kellett alkalmaznunk, hogy megtaláljuk a tömbünkben a megfelelő elemet. A jQuery-ben véget vetettek a nehézkes kijelölésnek és igyekeztek a lehető legintuitívabb megoldásokat alkalmazni, sikerrel!
Általános kijelölők
Ahogy korábban említettem, kijelölés során nincs más dolgunk, mint használni a CSS kijelölőket a megfelelő módon, nézzünk példákat!
- $(“p”) – Bekezdés elemek kijelölése.
- $(“#box”) – A box id-vel rendelkező elem kijelölése.
- $(“div#box”) – A box id-vel rendelkező div elem kijelölése.
- $(“.box”) – A box class tulajdonsággal rendelkező elem kijelölése.
A keretrendszer kihasználja a CSS 1-3 nyújtotta kijelölési lehetőségeket, így a CSS ismeretében gyorsabban tudunk átállni a használatára. Gyorsabban tudunk létrehozni számunkra ésszerű kijelöléseket.
Példával illusztrálva egy kijelölés a következőképpen néz ki, a css() eljárás alkalmazásával:
$(function() {
$("body").css("background", "#ccc");
});A fenti kóddal a body háttérszínét világos szürkére állítjuk. A kódot a ready() eljárás rövidített változatán belül helyezzük el, mivel a kód a dokumentumunk head részében helyezkedik el, így meg kell várnunk, amíg az letölt.
A kijelölés során egy jQuery objektumot kapunk vissza, amiben megtalálható a kijelölt elem/elemek. A hangsúly az elemeken van, hiszen, ha egy oldalon kijelöljük csak a p tag-eket – amikből általában több van – akkor mindegyik p tag és tartalma bekerül az objektumunkba. Tehát, ha lefuttatjuk a következő kódrészletet és megnézzük a fejlesztő eszközünk console panelját, akkor a visszakapott objektumban megtaláljuk az előzőleg elhelyezett összes p taget, azok tartalmát és adatait.
<p>Helló!</p> <p>Szia!</p> <p>Üdv!</p>
$(function() {
var p = $("p");
console.log(p);
});
Fontos: A visszakapott adatok megjelenítése böngészőtől függően, eltérően jelenhet meg!
Ha módosításokat akarok végrehajtani egy ilyen objektumon, felmerül a kérdés, hogy hogyan is járjuk be. Szerencsénkre a jQuery erre is egy egyszerű megoldást biztosít, ha egy olyan kijelölőre alkalmazunk egy utasítást, amiből több van egy oldalon, akkor a program ciklus szerűen bejárja azokat és alkalmazza a változtatásokat.
$(function() {
var p = $("p");
p.css("background", "red");
});Jól látható, hogy a kijelölő elemeit eltároltuk a p változóban. A jelenlegi oldalon 3 p elem van, így amikor a következő sorban alkalmazzuk a css() eljárást, a jQuery mind a 3 elemre alkalmazza a belső ciklusa segítségével.
jQuery pseudo kijelölők
Már tudjuk, hogy kijelölőként alkalmazhatjuk az összes CSS kijelölőt, beleértve a pseudo kijelölőket is, azonban a jQuery plusz megoldásokat is nyújt a kijelölések során a saját pseudo kódjainak a segítségével. A kijelölések során a jQuery egyik legnagyobb előnye, hogy az általunk beírt kijelölőt nem csak egyszerűen át veszi a CSS-ből, hanem a keretrendszer figyel arra is, hogy a korábbi böngészőkben is működjön. A saját pseudo kijelölőivel olyan dolgokat is megvalósíthatunk, amiket a CSS-el nem, vagy csak nehezen. A teljes listát megtekinthetjük a hivatalos dokumentációban!
Példaként nézzük meg az :even és az :odd, vagyis a páros és páratlan kijelölőket.
<table> <tbody> <tr> <td>Sor 1</td> </tr> <tr> <td>Sor 2</td> </tr> <tr> <td>Sor 3</td> </tr> <tr> <td>Sor 4</td> </tr> </tbody> </table>
$("table tr:even").css("background", "#444");
$("table tr:odd").css("background", "#aaa");Adott egy négy soros táblázat. Az :even és :odd jQuery pseudo kijelölők segítségével egyszerűen elkülönítjük a páratlan és páros sorokat az egyedi háttérszín segítségével.
This kijelölő
A this kulcsszóval, valamilyen kontextusban a legtöbb programozási nyelvben találkozhatunk. A használatuk általában teljesen egyezik is. JavaSciprt ben a this kulcsszó egy olyan speciális változó, amivel hivatkozhatsz az aktuális elemre, amivel dolgozol.
Egy egyszerű példával illusztrálva a dolog, a következőképpen néz ki:
$(function() {
var p = $("p");
p.click(function() {
$(this).css("background", "blue");
});
});A fenti kódnál a HTML rész a korábban megadott 3db bekezdés. A bekezdés elemekhez hozzáadtunk egy kattintás eljárást, ezen belül pedig ugyan ehhez az elemhez – a this kulcsszó segítségével – egy css() eljárást.
Cache – avagy a jQuery gyorsítótárazás
JavaScript-ben az egyik legnagyobb erőforrás problémát a DOM bejárása okozza. Minél többször lépünk be, keresni a DOM-on belül, annál jobban lelassítjuk a kódot. Erre kínál megoldást a cachelés/gyorsítótárazás néven ismert megoldás, melynek a lényege, hogy a többször felhasznált kijelölők eredményét eltároljuk egy változóban, így elkerülve, hogy a következő használatnál a program újra bejárja a szerkezetünket.
Tehát, lassú megoldásnak tekinthető az alábbi:
$(function() {
$("p").css("background", "red");
$("p").css("color", "white");
});Míg a következő verzió sokkal gyorsabb működést biztosít:
$(function() {
var p = $("p");
p.css("background", "red");
p.css("color", "white");
});Természetesen minél többször jelöljük ki az adott szakaszt, annál jobban lassítjuk a kód lefutását. Ilyen kis mértékben még talán elnézhető, de nagyobb kódrészleteknél már látható eredményt produkálhat.
Összefoglalás – jQuery Alapok – Kijelölők
A jQuery talán legkényelmesebb szolgáltatása/újítása a kijelölők használata, nagyon egyszerűen beletanulhatunk. Az összes CSS kijelölő és a jQuery saját pseudo kódjainak köszönhetően bármit kitudunk jelölni. Kiemelendő, hogy a jQuery-ben használt CSS kijelölők a régebbi, olyan böngészőkben is működnek, amik alap esetben nem támogatják CSS-ben azt, mivel a keretrendszer készítői figyeltek a kompatibilitásra, így biztosak lehetünk benne, hogy egy újabb CSS3-as kijelölő működni fog IE7 alatt is, amennyiben jQuery kódsorunkban azzal hivatkozunk egy adott elemre.