jQuery alapok

jQuery alapok

A jQuery az egyik legelterjedtebb JavaScript programkönyvtár. Rengeteg oldal használja, és sok JavaScript keretrendszer épül rá. A követezőkben nagyon röviden azt szeretném bemutatni, hogy mi is ez a jQuery, miért jó, és mire lehet használni. A leírás olvasása alapvető HTML és CSS és JavaScript ismereteket igényel. Ezekre nem térek majd ki külön, mert nagyon elnyújtaná a bejegyzést.

Ha egy mondatban kellene meghatározni, akkor azt mondanám, hogy a jQuery olyasmi mint a CSS, csak itt nem designt rendelünk az egyes HTML elemekhez, hanem működést. Az elemek kijelöléséhez ugyanazokat a szelektorokat használhatjuk, mint CSS esetén, és az így kijelölt elemeket manipulálhatjuk, eseménykezelőket aggathatunk rájuk, lekérdezhetjük az értéküket, vagy valamilyen más működéssel láthatjuk el. Hamarosan mutatok példákat is, de gyorsan nézzük át, mik ennek az egésznek az előnyei:

- Ahogyan a CSS esetén elválik a design a HTML kódtól, ugyanúgy leválasztható a jQuery segítségével a működés is az elemekről. (Ez véleményem szerint néha hasznos, néha nem, de ebbe most ne menjünk bele.)
-  A jQuery-s működés elrejti előlünk a böngészők közötti különbséget. Amire adott esetben többféle elágaztatott JavaScript-re lenne szükség, az jQuery-ben egyetlen hívással megoldható. A jQuery egyébként (tudtommal) az összes ismert nagy böngészőt támogatja, ide értve a desktop és mobil változatokat is.
- Sok mindent sokkal egyszerűbb megoldani jQuery-ben, mint tiszta JavaScript-ben, ráadásul nagyon egyszerűen lehet hozzá új funkciókat adni pluginek formájában, és rengeteg plugin elérhető hozzá a weben. Köztük olyan komplex dolgok is, mint wysiwyg editor, adattáblák, tree komponens, miegymás.

No, akkor nézzük is, hogy megy mindez a gyakorlatban. Ha jQuery-t szeretnénk használni, akkor ugye egy script tag-el be kell hivatkozni. Ezt két módon tehetjük meg. Vagy letöltjük a jQuery aktuális változatát, és azt használjuk, vagy CDN-ről hivatkozzuk be. A CDN egy fix hely a weben, ahol az aktuális változat megtalálható. A legismertebb ilyen CDN a Google féle (http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js). Ennek az az előnye, hogy innen a böngésző egyszer letölti a JavaScript kódot, és utána cache-eli. Mivel sokan használják így a jquery-t, ezért jó esetben már valószínűleg cache-elve van a böngészőben, így mikor a mi weblapunk töltődik be, ezt már nem kell újra letölteni. Olyan baromi nagy különbség amúgy nincs a két megoldás közt, csak érdekesség.

Ha behivatkoztuk a lib-et, elkezdhetjük használni. Készítsünk egy kis HTML olalt, amin van egy gomb (button tag). Rakjunk erre egy eseménykezelőt, ami klikkelésre kiír valami üzenetet. Ez így néz ki:

$('button').click(function(){
  alert('Hello World');
})

Láthatóan nem valami bonyolult. A jQuery-re a $ fv.-el tudunk hivatkozni, aminek paramétere egy css szelektor. Ezek ugyanazok a jelölések, amit css esetén használunk az elemek kijelölésére. Tehát a $('button') jelen esetben azt jelenti, hogy minden button elem-re vonatkozzon a kijelölés. Ezt ki is próbálhatjuk. Rakjunk be még egy gombot az oldalra. Így akármelyikre gyomunk, meg fog jelenni az alert. A $ jel helyett használhatjuk a jQuery nevet is, de olyat is láttam, ahol jq-t használtak. Tehát a $('button'), a jQuery('button') és a jq('button') ugyanazt jelölik. Ha kijelöltük az elemet, akkor jöhetnek az azon végzett műveletek. Jelen esetben a click, ami egy eseménykezelőt helyez az adott elemre. Most nézzünk egy olyan példát, ahol nem eseménykezelőt rakunk az elemre, hanem valamilyen manipulációt végzünk rajta.

$('button').css('font-weight', 'bold');

Ez a sor az összes gomb font-weight tulajdonságát bold-ra állítja, tehát minden gomb felirata vastagon lesz szedve. A jQuery hívásokat láncolhatjuk is, így:

$('button').css('font-weight', 'bold').click(function() {
  alert('!!!');
})

Persze kettőnél sokkal több hívás is követheti egymást, így egész komplex működéseket egész egyszerűen írhatunk le. Ha egy eseménykezelőben az aktuális elemre akarunk hivatkozni, azt a this kulcsszóval tehetjük meg. A this ez esetben a HTML objektumot jelöli, így ha jQuery-s műveletet akarunk rajta végezni, akkor $()-be kell rakni. Erre itt egy példa:

$('button').click(function() {
  $(this).hide('slow');
});

Ez így annyit csinál, hogy ha megnyomjuk a gombot, akkor szépen animálva elrejti azt. De ez alapján elrejthetünk/megjeleníthatünk komplett formokat, stb.

Eddig ugye minden esetben a gombok mindegyikére vonatkozott az adott művelet. Ha pontosabban ki szeretnénk jelölni a célt, akkor használjuk a szokásos css szelektorokat. Adjunk az egyik gombnak egy 'gomb' class-t. Erre a $('.gomb') -al hivatkozhatunk. Így csak a 'gomb' osztályú elemekre fog hivatkozni az adott hívás. Ha egy adott elemet akarunk kijelölni, akkor adjunk neki valami id-t. Ha 'gomb' id-t adunk neki, akkor a css-hez hasonlóan $('#gomb') -al hivatkozhatunk rá. De persze mennek a bonyolultabb szelektorok is. Pl. az item class-u li elemeken belüli gomb class-u gombok, stb.

Amivel még gyakran találkozni, az a $('document').ready esemény, ami jQuery-ben az onload megfelelője. Tehát amit ide írunk, az akkor fog végrehajtódni, ha már teljesen betöltődött az oldal. Amolyan ökölszabályként elmondható, hogy érdemes a teljes jQuery kódot ebbe írni, valahogy így:

$( document ).ready(function() {
  $('button').click(function() {
    $(this).hide('slow');
  });
  ...
});

Hát, indulásnak kb. ennyi szerintem elég. Rengeteg példát találni weben, és a jQuery honlapján (http://jquery.com/). Igény esetén készülhet hasonló leírás egy egy témáról, de mivel a jQuery eszközkészlete elég szerteágazó, írjátok le, hogy pontosan melyik része érdekel, és ha azzal a résszel kapcsolatban van tapasztalat, azt szívesen leírom.

#blog   #jquery