Tutorial de baza jQuery

[BABILONIA]

Folosesc jQuery de putin timp și pot să zic că ma pricep binisor , adica pot să spicuiesc câte ceva util pentru începători. Inițial am vrut să pun o listă de tips&tricks, m-am hotarat sa pun un tutorial în câteva episoade. Așadar, să începem !

[size=150]Ce este jQuery?[/size]

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.

[size=150]De ce să folosești jQuery și nu altceva?[/size]

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).

[size=150]Ce face jQuery?[/size]

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

[size=150]Ce trebuie să știu pentru a folosi jQuery?[/size]

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 [Trebuie sa fiti inscris si conectat pentru a vedea acest link]. Astfel, vei putea face diverse încercări fără a fi nevoie de modificări ale sursei, salvare, refresh [Trebuie sa fiti inscris si conectat pentru a vedea acest link]. [Trebuie sa fiti inscris si conectat pentru a vedea acest link].

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.

[size=150]Selectori[/size]

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 :

Fișierele externe sunt păstrate î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ă 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.