A napokban jelent meg az új, 1.4-es verzió jQuery JavaScript fejlesztői környezetből, ezért úgy gondoltam ideje egy bejegyzésben megemlékeznem róla nagy vonalakban. Mi az a jQuery? Mire jó? Használjuk vagy ne használjuk?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

- jQuery.com

Láttátok a főoldalon a portfólióm részt? Nagyjából egy óra alatt megvolt, a nulláról. Vagy a Webidea legördülő menüit? Fél óra. Sorolhatnám az ehhez hasonló példákat, vagy írhatnék a végtelen felhasználási lehetőségről, de ezzel sokan foglalkoztak már, így inkább egy kicsit az általános működésről és a jQuery User Interface-ről, azaz a jQuery-hez fejlesztett grafikus segédkörnyezetről írnék.

A jQuery a(z egyik) leghasznosabb JavaScript fejlesztői környezet, amivel valaha dolgom volt. Ez a mondat bátran hagyhatja el számat, mert a cucc használata annyival megkönnyíti a webfejlesztési tevékenységem, mint például a Google a böngészést. Nagy szavak, de mindjárt meggyőzlek benneteket. Nagyjából egy éve használom, ez idő alatt rengeteg hasznos információt megtanultam róla: az alapvető működést, a programozást egyszerűsítő funkcióit; a “hogyan”-ra és a “hol”-ra jöttem rá. Nem állítom, hogy nincsenek még nekem is kisebb sötét foltok, de azért már elég jól eligazodom benne. Tekintsük át, hogy mit tud ez az 50 kbyte-os kis JS library.

Az első és talán legfontosabb tulajdonsága a DOM megváltozott kezelésében van. Amikor egy JavaScript alkalmazást írsz és sok HTML elemre kell hivatkozni és azokkal operálni, elég nehézkes és egy idő után átláthatatlan lesz a kód. Tegyük fel, hogy egy űrlapot kezelsz éppen és a benne lévő 3 <label> színét szeretnéd lecserélni, mert a felhasználó elfelejtette kitölteni a mezőket. Az űrlap:

Első mező:

Második mező:

Harmadik mező:

Ezt sima JS-ben így csinálod:

document.getElementById("elsomezo").style.color = 'red';
document.getElementById("masodikmezo").style.color = 'red';
document.getElementById("harmadikmezo").style.color = 'red';

Míg jQuery-ben:

$('label#elsomezo, label#masodikmezo, label#harmadikmezo').css('color', 'red');

Melyik tűnik egyszerűbb és elegánsabb megoldásnak? Innen már csak azt kell elképzelni, hogy ha egy három soros kódon ennyit tudtunk egyszerűsíteni, akkor mi lesz a 4-500 soros JS alkalmazásokkal!

A második, szintén fontos tulajdonság a beépített effektek létezése. Egy sor beírásával tűnheteted el, hozhatod elő, csukhatod be és nyithatod ki a HTML elemeket, összesen 9 beépített effekt áll rendelkezésre. Ezeken túl használható még az alap animáló függvény, amiben beállíthatod, hogy milyen módon mozogjon egy elem, például az alaphelyzetből egy elfehéredéssel csukódjon össze, miközben a betűmérete is folyamatosan csökken. Egy rövid demonstráló példa:

Kattints rám, hogy eltűntessem/előhozzam az alábbi bekezdést-t

Csukj be, nyiss ki!

A forrása pedig:

$('a.pelda').click(function(){
$('blockquote.pelda').slideToggle();
});

Ugye, hogy milyen egyszerű? Vajon mennyi idő lenne ezt megírni szimpla JavaScripttel?

A jQuery önmagában egy olyan számtalan extra tulajdonsággal rendelkező eszköz, amit minden webfejlesztőnek ismernie kéne, hogy sokkal sokszínűbb, interaktívabb és használhatóbb weboldalakat készíthessenek vele. Az 1.4-es verzió megjelenésével pedig újabb lehetőségeket adtak a kezünkbe: a változtatások dokumentációja 16 teljesen új függvényt és több tucat egyéb fejlesztést tartalmaz.

Térjünk rá a jQuery UI-re. Mint már említettem, ez a jQuery-hez fejlesztett grafikus környezet: itt jön képbe az interaktív weboldal, hiszen olyan extrákat tesz hozzá ez a kis plugin az alap programhoz, mint például a mozgatható, az átméretezhető, vagy a rendezhető sorrendű HTML elemek. Ezen felül jó néhány kis widget (dátum választó, felugró ablak kezelő, csúszka és egyebek) valamint számtalan felturbózott jQuery effekt áll rendelkezésére a fejlesztőnek.

Melyik a meggyőzőbb?

A jQuery UI hasznos kiegészítő társa a jQuery-nek, mindenképpen ajánlott egy komolyabb portál elkészítéséhez, de akár a saját weboldalon is hasznos lehet, főleg mivel a plugin letöltésénél teljesen személyre szabható, hogy melyik funkciókat szeretnénk a UI-n belül használni, így nem kell a felesleges függvények letöltésével terhelni a szervert.

A kérdés tehát nem az, hogy a webfejlesztőknek használnia kéne-e a jQuery-t, hanem az, hogy feltegyék-e mellé a jQuery UI-t is. Az 1.4-es fejlesztői környezet már annyira sokrétű és fejlett, hogy aki nem is gondolkodott el a használatán, az pont olyan, mint aki szándékosan levágja a fél karját, csak hogy megnehezítse a saját dolgát. Aki jobban el akar mélyedni a jQuery-ben, annak ajánlom a teljes dokumentációt és a különböző tutorialokat.

Tagek: javascript, jquery, jquery ui, tutorial, ui

A bejegyzés Tuesday, January 19th, 2010 22:06:53 időpontban publikálták a(z) javascript kategóriában. A bejegyzés RSS 2.0 feed-je. A bejegyzéshez hozzászólhatsz, vagy hivatkozhatsz rá a saját oldaladon.