Folosesc jQuery de mai bine de un an şi pot să zic că am ajuns la un nivel la care pot să spicuiesc câte ceva util pentru începători. Iniţial am vrut să pun o listă de tips&tricks, dar la sugestia unor amici m-am hotărât să fac un soi de tutorial împărţit în câteva episoade. Aşadar, să începem !

Ce este jQuery?

La fel ca Prototype, MooTools, Dojo, jQuery este o librărie javascript ce te scuteşte 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 situaţiilor.

De ce să foloseşti jQuery şi nu altceva?

Pentru că e SIMPLU şi e documentat bine. Prima librărie folosită a fost prototype împreună cu scriptaculous. Pentru că la momentul respectiv nu ştiam mare lucru despre javascript (nu că acum aş ştii ), am trecut obligat-forţat la jQuery deoarece nu găseam un plugin (sau ceva de genul asta ). Dintre toate librăriile cu care am avut ceva tangenţe, documentaţia jQuery mi se pare cea mai bine pusă la punct dintre toate, ceea ce-i conferă un avantaj important. Spre exemplu, am încercat să folosesc MooTools 1.1, dar mi-am cam prins urechile în documentaţia de atunci (bine, nici nu mi-am bătut capul prea mult).

Pe lângă toate acestea, în jurul librăriei s-a strâns o comunitate impresionantă de utilizatori, contribuitori şi… plugin-uri. Plugin-urile sunt mici (sau mari!) scripturi ce extind capabilităţile jQuery (sunt plugin-uri pentru drag & drop, submiterea unui formular prin ajax, galerii de imagini etc).

Ce face jQuery?

jQuery îţi oferă posibilitatea de a îndeplini cu uşurinţă următoarele task-uri:

• Schimbi sau ştergi conţinutul unei pagini întregi sau doar a unei porţiuni din pagină;
• Animaţii;
• 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ă. De multe ori spun că nu ştiu decât jQuery, nu şi Javascript

Ce trebuie să ştiu pentru a folosi jQuery?

Pe scurt, trebuie să cunoşti puţin CSS. Ok, ce legătură are CSS-ul cu Javascript? În mod normal, nu prea are nicio legătură, dar folosind jQuery, treaba stă un pic diferit. Asta deoarece modul de selectare al elementelor este identic cu cel din CSS.

Un selector CSS arată cam aşa:

#header {
 height:100px
}

Acelaşi rezultat îl poţi obţine folosind jQuery:

jQuery('#header').css(height, 100);

Foloseşte firebug. Astfel, vei putea face diverse încercări fără a fi nevoie de modificări ale sursei, salvare, refresh Exemplul 1. Exemplul 2.

Trebuie să scrii jQuery la începutul fiecărei „propoziţii”? Well… În mod normal da. Pentru a păstra compatibilitatea cu alte librării (da, poţi folosi prototype şi jQuery pe aceeaşi pagină!) este recomandat să foloseşti jQuery ca prefix. Altfel, poţi folosi funcţia `$` întâlnită în mai toate librăriile cunoscute (desigur, cu efecte diferite), având acelaşi rezultat:

$('#header').css(height, 100);

Oricum, începător fiind, presupunem că nu vei avea nevoie de mai multe librării.

Selectori

Spuneam mai sus că jQuery are aproximativ aceeaşi sintaxă folosită şi în CSS. Din fericire, este un pic mai evoluată (acceptă cam toate pseudo-clasele implementate în css3!) ceea ce cu siguranţă îţi va face viaţa mai uşoară în multe situaţii. Pentru teste, voi folosi un cod “dummy“, luat de pe html-ipsum.com şi uşor modificat. Tot codul javascript (ca şi codul CSS de altfel) este recomandat să fie într-un fişier extern din două motive importante :

1. Fişierele externe sunt păstrate în cache
2. Î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ă colorăm tot ce este cu bold în roşu. În CSS:

strong {
 color:red
}

Acelaşi lucru îl putem realiza folosind jQuery:

$('strong').addClass('rosu');

Am folosit o clasă în defavoarea unei proprietăţi CSS deoarece, în cazul în care vrei să schimbi vreun atribut (fie culoare, fie altceva), să nu fie necesară editarea fişierului javascript.

Ok, ţi-am arătat cum selectezi un ID, ţi-am arătat cum selectezi un tag, dar cum selectezi un element cu o anume clasă? Păi… Fix la fel ca în CSS:

$('.changeThis').addClass('verde')

Putem fi ceva mai expliciţi de atât:

$('strong.changeThis').addClass('verde')

Sau chiar:

$('p strong.changeThis').addClass('verde')

Totuşi, în urma unor teste, am ajuns la concluzia că cel mai rapid selector este cel mai simplu (adică primul, unde nu se specifică nimic altceva decât clasa, id-ul sau tag-ul).

În momentul când foloseşti un selector ce nu este #id, tot ce urmează după punct (adică toate comenzile) se aplică tuturor elementelor găsite. Astfel, în primul exemplu, tuturor elementelor strong li se va aplica clasa .rosu. Dar ce facem dacă vrem să modificăm doar un anumit element fără să folosim clase/id-uri? Ne jucăm cu alţi selectori!

Pentru a selecta doar primul strong poţi folosi

$('strong:first')
//sau
$('strong:eq(0)')

Primul exemplu este destul de explicit. Al doilea însă este mai puţin. Este oarecum evident că selectează elementul cu numărul X, dar… de ce ZERO? Cam în orice limbaj de programare, numerotarea începe de la zero. Javascript nu este mai prejos, prin urmare, în cazul în care în pagină sunt cinci elemente strong, numerotarea lor va fi de la 0 la 4. Aşadar, primul este zero. Simplu, nu?

În acelaşi mod te poţi folosi din plin de selectorii ierarhici:

$('ul:eq(0) > li').addClass('red');

Pentru a adăuga o clasă doar copiilor direcţi din prima listă.

Pentru început zic că este suficient. În zilele următoare, în măsura timpului liber, voi scrie despre efecte, event-uri, Ajax şi alte bunătăţuri ce sunt prin jQuery.

Dacă nu ai înţeles sau ceva nu ţi-a ieşit, te invit să laşi un comentariu în care să explici ce şi cum. Accept şi comentarii de felicitare