jQuery: Alapok

Írta: | 2011. március 26. | kategóriák: Alapok, JavaScript, Programozás

Miután sikeresen letöltötted a jQuery keretrendszert, itt az ideje, hogy tovább lépj! Mint minden más JavaScript állományt, ezt is a <script type=”text/javascript”></script> tag-ekkel tudod a HTML oldaladba ágyazni.

Kezdjük azzal, hogy mivel amíg a DOM nincs felépítve nem szabad JavaScript kódot futtatni, mert elronthatja az oldal szerkezetét, ha a félig felépített DOM-ot akarod szerkeszteni (vagy egyszerűen JavaScript hibát ad, ha például egy elemet elszeretnél rejteni, de az még nincs a DOM-ba bekerülve, így nem található). Ez egy általános JavaScript probléma, a jQuery megoldása viszont egyszerű!

$(document).ready(function(){ alert('igen!'); });

A $ -val érheted el a jQuery-t. Létezik egy konfliktus mentes indítása is, amennyiben más keretrendszereket is használsz práhuzamosan vele: jQuery.noConflict(). Ez esetben ennek az utasításnak kell az elsőnek lenni és utána a “jQuery” szóval éred el a keretrendszert. Egy nagyon nagy segítség tud lenni még az is, hogy egy függvénybe teszed a jQuery-vel kapcsolatos kódrészletet, aminek egy paramétere van, a dollár jel, illetve átadod meghíváskor neki a jQuery-t. Két nagy előnye van: 1) nem kell a noConflict-tal foglalkozni és 2) mégis tudsz hivatkozni rá egy karakterrel, pl. a dollár karakter.

(function($) {
$(document).ready(function(){ alert('igen!'); });
})(jQuery);

A jQuery-nek, ezentúl értsd $ -nek, több féle paramétert is átadhatsz. Amennyiben egy függvényt adsz át az ugyan azt jelenti, mintha a ready() függvényt hívnád meg az adott függvénnyel, mint paraméter. Ha egy karakterláncot adsz át, akkor ő azt egy szelektor-ként fogja kezelni, így választhatsz ki tetszésszerű elemeket a DOM-ból: egyszerűen!

Példának jeléül, hogyha egy Alma ID-jú elemet akarok kinyerni a DOM-búl, mindössze annyi a dolgom, hogy átadok egy string-et a jQuery-nek, hogy “#Alma”. Mint azt észrevehetted, a lekérés nyelvezete nagyban hasonlít a CSS-hez. # – ID, a pont az osztály és így tovább.

var alma = $("#Alma");

Megtörténhet az is, hogy éppen nincs egy Alma elem a DOM-ban. Ezt hogy tudod meg, kérdehetnéd. Egyszerű, megnézed hogy a visszatérített objektum (mindig egy objektumot térít vissza a jQuery lekérés, akkor is, ha nem találta meg a keresés tárgyát) hossza nagyobb mint nulla vagy sem. Amennyiben az eredmény nulla, nem létezik a keresett elem.

if( $("#Alma").length ) {
  alert('Finom alma!');
} else {
  alert('Nincs tobb alma');
}

A következő leírásban részletesebben is megismerkedhetsz a lekérésekkel és a DOM bejárásával.



Értékeld a bejegyzést!

tag-ekkel tudod a HTML old...">
Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres



Jó kis sorozat lesz, garutla :). Eddig prototype-ot használtam, de miután rászántam magam, hogy kipróbáljam, azóta csak istenítem a fejlesztőket, write less do more 😀

Tas 2011. március 27. - 12:21

Lesz folytatás, vagy a cikk írója is még csak az alapokat tanulja?

titok marad 2011. június 6. - 12:10

Szia Marad!

… igen, egyelore meg tanulok 😉

Amint idom lesz, elkeszul a kovetkezo nehany resz is. Sajnalom a kimaradast.

Avatar Tupacko
2011. június 6.
12:32

Érdelek a tutorial

Attila 2012. április 20. - 14:15