Sunteți pe pagina 1din 6

JQuery

''mai intai trebuie sa faci rost de niste adevaruri,apoi poti sa le denaturezi cat vrei''
(marc twain)

Obiective:

Prezentarea JQuery;
Exemple aplicare;

A) Selectori
B) Event-uri
C) Efecte

1. Descriere pe scurt jQuery


La fel ca Prototype, MooTools, Dojo, jQuery este o librrie javascript ce te scutete de
dureri (mari) de cap ce in de compatibilitate ntre browsere (cross browser). Ca dimensiune este
relativ mic (aprox 20kb dac este packed&gzipped), ceea ce-l face potrivit pentru majoritatea
situaiilor.
jQuery i ofer posibilitatea de a ndeplini cu uurin urmtoarele task-uri:
Schimbi sau tergi coninutul unei pagini ntregi sau doar a unei poriuni din pagin;
Animaii;
Efecte (SlideUp/SlideDown, FadeIn/FadeOut, etc);
Ajax;
Adaugi diverse event-uri (click, hover, over, focus etc) cam pe orice element din pagin;
Reduce la minim codul Javascript din pagin.
Modul de selectare al elementelor este identic cu cel din CSS.
Un selector CSS arat cam aa:

Acelai rezultat l poi obine folosind jQuery:


Trebuie s scrii jQuery la nceputul fiecrei propoziii? Este recomandat s foloseti
jQuery ca prefix. Altfel, poi folosi funcia `$` ntlnit n mai toate librriile cunoscute (desigur,
cu efecte diferite), avnd acelai rezultat:
A) Selectori - jQuery este un pic mai evoluat (accept cam toate pseudo-clasele implementate
n css3!). Pentru teste, se va folosi un cod dummy, luat de pe html-ipsum.com i uor
modificat. Tot codul javascript (ca i codul CSS de altfel) este recomandat s fie ntr-un fiier
extern din dou motive importante :
Fiierele externe sunt pstrate n cache
n cazul n care ai ceva de modificat, nu va trebui s umbli n toate paginile
n codul de mai sus, presupunem c vrem s colorm tot ce este cu bold n rou. n CSS:
CSS
JQery

Am folosit o clas n defavoarea unei proprieti CSS deoarece, n cazul n care vrei s schimbi
vreun atribut (fie culoare, fie altceva), s nu fie necesar editarea fiierului javascript.
Selectarea unui element cu o anume clas:
sau
sau
1

n momentul cnd foloseti un selector ce nu este #id, tot ce urmeaz dup punct (adic
toate comenzile) se aplic tuturor elementelor gsite. Astfel, n primul exemplu, tuturor
elementelor strong li se va aplica clasa .rosu. Dar ce facem dac vrem s modificm doar un
anumit element fr s folosim clase/id-uri? folosim ali selectori!
Pentru a selecta doar primul strong poi folosi

Primul exemplu este destul de explicit. Al doilea ns este mai puin. Este oarecum
evident c selecteaz elementul cu numrul X, (primul element strong este zero si asa mai
departe)
n acelai mod se pot folosi selectorii ierarhici:
Pentru a aduga o clas doar copiilor direci din prima list.
B) Event-uri (nu va fi evenimente ci events/event-uri).
Unul din marile avantaje ale jQuery este c majoritatea efectelor/event-urilor suport
chaining, astfel, cu un singur selector se pot face mai multe lucruri. Altfel spus, cu linia:
Se adaug o clas, se schimb dimensiunea fontului i se schimb opacitatea.
Un event i permite s setezi o interaciune dintre utilizator i pagin. Un click, de
exemplu, este un event. La fel i mouseover, mouseout, keyup, keydown, .a.m.d.
Modul de setare pentru un event este foarte simplu i funcioneaz n spiritul jQuery :
selector CSS:

Unele event-uri accept un stil ceva mai scurt:

n ambele cazuri observi parametrul e. Acesta i ofer acces la cteva variabile:


Printre cele mai importante valori returnate n cazul unui click sau mouseover sunt pageX
i pageY. Acestea i indic poziia cursorului.
Desigur, acest stil nu funcioneaz pentru toate event-urile, ceea ce nseamn c cel mai
sigur s foloseti metoda cu bind(). De fiecare dat, orice event returneaz obiectul this. Acest
obiect este fix elementul pe care este stabilit event-ul. n cazul nostru, h1.
Una din setrile eseniale n cazul n care sunt mai multe elemente i ai event-uri pe
1

se specific nimic altceva dect clasa, id-ul sau tag-ul

fiecare, este stopPropagation(). Se d codul urmtor:

Totul funcioneaz corespunztor, doar c n momentul cnd se face click pe strong se


declaneaz i event-ul de pe p. Soluia este, aa cum am zis, stopPropagation(). Acesta se
folosete n felul urmtor:

Observi c a aprut o nou comand: unbind('click'). Aceasta anuleaz orice alt


bind('click') scris anterior. Dac se folosete doar unbind() (fr niciun alt parametru), se
anuleaz orice alt event setat anterior (fie click, fie mouseover, fie orice altceva).
Un mic amnunt: n cazul n care ai un event pe un link este c trebuie s adaugi un
return false;:

De notat c return false; este chiar la sfrit, altfel tot ce este dup return false; nu va funciona.
De exmplu:

Nu va funciona.
Un alt event foarte important este .ready(). Este important pentru c i permite rularea
unor anumite funcii dup ce se ncarc toat pagina:

ATENIE ! Aceast comand NU va funciona n consol, deoarece documentul este deja


ncrcat. ! $(document) NU are ghilimele.
Aceeai comand, scris puin mai scurt, arat aa:

Eventul ready() se poate aplica i pe imagini, astfel nct poi rula o funcie n momentul
n care o imagine s-a ncrcat. Desigur, nu este recomandat s se foloseasc pe TOATE
imaginile, ci pe o anume imagine.
jQuery permite chaining, astfel, putem seta mai multe event-uri pe un element folosind
un singur selector:

Se observa c al doilea event este hover. Acesta are dou funcii ca parametru: una pentru
mouseover, alta pentru mouseout.
O alt funcie util este trigger. Aceasta, aa cum i spune i numele, permite s
declanezi un event fr ca utilizatorul s fi interacionat n vreun fel. De exemplu:
Simuleaz eventul click pe link.
ATENIE ! Deoarece JS ruleaz n ordinea n care e scris codul, orice trigger trebuie
apelat DUP ce se seteaz un event, altfel neavnd niciun rezultat.
n cazul n care exist elemente introduse dinamic n cod, event-urile NU se aplic i
noilor elemente. Astfel:
Va returna true la click i nu va afia nicio alert. Soluia ar fi un refresh pentru event-uri
sau folosirea plugin-ului livequery.
Comanda one(). Aceasta este aproape identic cu bind() cu diferena c one() este atent
la event-ul respectiv o singur dat. Astfel:

Arat alert doar pentru primul click.


C) Efecte.
Muli folosesc o librrie JS (jQuery, Prototype sau orice altceva) aproape exclusiv pentru
efecte.
jQuery include cteva efecte simple dar majoritatea sunt doar variaii ale unei singure
funcii: animate(). Toate efectele au un parametru pentru o funcie callback. Efectele built-in
sunt:
show() / hide() - folosite fr niciun parametru doar schimb display:none n
display:block sau display:inline (n funcie de tipul elementului) i invers. Cu un
parametru numeric (ex: $('div').show(500) ) va genera un efect de redimensionare i
transparen de durat 500 ms;
slideUp() / slideDown() ascunde/arat un element printr-un efect de alunecare.
Accept ca parametrii: durat, callback i easing (nu tiu cum a putea traduce asta, dar
voi explica mai jos ce face);
toggle() / slideToggle() dac un element este vizibil l ascunde i viceversa. La fel ca la
exemplul anterior, poi specifica durata i o funcie callback;
fadeIn() / fadeOut() schimb opacitatea unui element i i seteaz display:block /
display:none. Parametrii: durat i callback;
fadeTo (durata, opacitate, callback) schimb opacitatea unui element fr a-i afecta
vizibilitatea. Spre deosebire de fadeOut(), fadeTo(300, 0) doar seteaz opacitatea la 0,
fr a ascunde elementul. Este asemntor cu display:none VS. visibility:hidden.
Explicaii
funcia callback ruleaz dup ce efectul este terminat i arat cam aa:
4

sau, se poate folosi i combinaia:

Easing reprezint un calcul matematic ce adaug un efect la efect. n cazul n care


animaia vrei s se desfoare liniar (cu aceeai vitez de la nceput pn la sfrit), nu ai
nevoie de aa ceva. n schimb, dac vrei ca un slideUp s nceap brusc i s se termine ncet,
ar trebui s foloseti plugin-ul ce adaug ceva opiuni n plus (pe lng liniar i swing,
disponibile implicit).
Efecte custom - Astea sunt cele mai drgue deoarece singura limit ine de imaginaia
fiecruia.
Atenie, dac vrei s schimbi poziia unui element, nu uita s-l poziionezi absolut mai nti!
Dimensiunile sunt specificate n pixeli dar, dac le pui n ghilimele, poi specifica unitatea de
msur preferat.

2. Selectori
$('*')
$('#id')
$('tag')
$('.clasa') - clasa css
$('selector, selector') - selector multiplu
$('[atribut=valoare]')
$('input:text')
$('[type=text]')
Lista completa: http://api.jquery.com/category/selectors/
Selectorul returneaza un tablou de obiecte.
.length - dimensiunea acestui tablou.
var obj = $("selector");
obj[0] - obiectul javascript corespunzator obiectului jquery daca acesta se refera la un singur
obiect
$("selector").css("atribut_css", "valoare");
$("selector").attr("atribut_html", "valoare");
$("selector").attr("atribut_html");
$("selector").removeAttr("atribut_html");

Exemple realizate.

Resurse
1. http://docs.jquery.com
2. http://thor.info.uaic.ro/~alaiba/mw/index.php?title=Introducere_%C3%AEn_biblioteca_Javas
cript_jQuery
3. http://blog.iamntz.com/2030/tutorial-jquery-vii-manipulare-dom-live-events.ionut