Tutorial jQuery – I

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 :D ), 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 :P

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 :D

42 de Comentarii

Cristian Ciofu a scris

Asta trebuie citit. Am mai avut eu tentative de a invata jQuery, dar din diverse motive am amanat de fiecare data :))

Acum ar fi cazul, nu?

Bravo si… asteptam si alte parti :D

rashid a scris

Foarte misto inceputul.
Dar uite cum iti faci tu de lucru, ma apuc sa-l invat si cand am o problema n-o sa mai caut pe google, o sa te intreb pe tine :D

„google it you moron!” -> „ionut staicu it you moron!”

:D

Staicu Ionuț Bogdan a scris

io n-am inteles nimic, pen’ ca n-am lucrat cu asa ceva. da’ arata juicy.

Am intenționat să fac un tutorial pentru începători. Dacă n-ai înțeles nimic înseamnă că n-am reușit. Cred că va trebui să rescriu o parte din el.

Asta trebuie citit. Am mai avut eu tentative de a invata jQuery, dar din diverse motive am amanat de fiecare data :))

Uite, acum e momentul potrivit :)

Inca un tutorial bun. Il astept pe cel de Ajax :)

Pentru ajax va trebui să aștepți cel mai mult :D

xDetective a scris

Foarte bine explicat. Pai ma daimon nici eu nu am nicio treaba cu javascript sau alte minunatii. Ideea tutorialului tocmai asta e. Pentru inceput te invata cu ce se mananca, apoi se intra in amanunte…

ionel a scris

MooTools e superior din multe puncte de vedere: functionalitate mai multa si definita mai bine ca jQuery plus calitatea uniforma – in contrast jQuery are putina functionalitate in core si diversele pluginuri sunt scrise de terti si au calitate de multe ori indoielnica.

Giuco a scris

Interesant. Nu am mai lucrat cu el. Ma bucur ca am aflat de el. Poate pui si o lista cu niste linkuri utile, adunate asa in experienta ta cu jQuery.

xDetective a scris

si dak nu stiu CSS?? “Pe scurt, trebuie să cunoști puțin CSS”

Din moment ce nu stii CSS, inveti, iar apoi incepi sa vezi cu ce se mananca si jQuery. Tu cand incepi sa construiesti o casa construiesti mai intai acoperisul? Subsol: css/html , temelie jquery si tot asa

jsprogrammer a scris

buna treaba
—————-
javascript este cel mai bun decat actionscript care da mari batai de cap. in plus,daca sunt frameworkuri precum jquery,prototype etc atunci viata e mai frumoasa . :P

Staicu Ionuț Bogdan a scris

Mulțumesc de comentariu. Poate data viitoare folosești un nume real? :)

Javascript, chiar dacă are destule asemănări cu AS are o diferență majoră: AS nu are probleme de compatibilitate cross browser: ai flash, n-ai dureri de cap. Cu toate astea, prefer javascript/jQuery :D

Kristi a scris

Salut. Vreu si eu sa ma folosesc de jQuery dar nu pot crea server :( . Pot sa fac ceva pentru a ma folosi de jQuery fara a crea server ?

cris_p a scris

Foarte fain . Eu scriam o tona de cod javascript pentru a face unele chestii care se fac usor cu aceasta librarie. M-ai convins sa trec la jquery!

Maxi a scris

Interesant tutorialul . acuma stiu mai bine despre ce e vorba in jQuery ca tot e explicat in romana foarte bine . mersi frumos.

accesinterzis a scris

salut, am si eu putin nevoie de ajutorul tau. Sunt incepator in jquery. Vreau ca min-height-ul body-ului sa fie acelasi cu inaltimea monitorului. Mai exact cu inaltimea monitorului dar fara bara windows-ului de jos si fara bara browserului de sus. Cum as putea face asta? :D

Bravo Ionutz ptr idee a scris

Astept chestii si mai interesante.
Eventual ai putea aduaga la tutorialul tau referinte la alte situri ce trateaza aceasta problema-sunt sigur ca ai avea o lista intreaga

LaurP a scris

Va salut !
Faptul ca incercati sa ajutati si pe ceilalti este demn de tot respectul. Cine nu intelege acest lucru … e trist !
Intrebarea mea este urmatoarea (daca ma puteti ajuta ?)
Exemplu: sunt vanzator de imbracamite si am un site de cumparaturi online
-am 10 buc. camasi ,,Larisa” – marimea 36
-am 15 buc. camasi ,,Larisa” – marimea 37
-am 20 buc. camasi ,,Larisa” – marimea 38
etc.
In formularul de comanda (facut in php) vreau sa vada cumparatorul ca am doar 10 buc. din marimea 36, 15 buc. din marimea 37 … etc., iar cand cineva face o comanda cu 1 buc. marimea 37 in stoc sa-mi ramana doar 14 buc. si urmatorul camparator sa poata vedea acest lucru (ca in stoc mai am doar 14 buc. din marimea 37). jQuery poate face acest lucru ??? Sunt incepator in domeniu si de aceea va rog pe dvs. sa ma ajutati.
Va multumesc anticipat.
Respect

Vlad Voicu a scris

LaurP

Nu este ok sa faci cu jquery ceea ce vrei. Rolul jquery, ca defapt rolul la tot Javascript este sa enhance functionality not create it.

Uita-te pe aici: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

în esenta poti face ceea ce ai zis dar extrem de complicat si de nereliable. Javascript este totusi un limbaj de client. Poti rezolva problema cu un minim de php. Tii produsele in baza de date, cand cineva cumpara modifici valoarea. Mereu cand afisezi valoarea o iei din baza de date. Easy as pie.

vladv.

franz a scris

Salut. Eu incerc sa invat jQuery. De cateva zile citesc tutoriale despre jQuery si parca sunt tot la inceput, nu inteleg nimic. Stiu css si html. Intrebarea mea este daca poti sa inveti jQuery fara a sti JavaScript si cat timp iti ia sa pricepi JavaScript la un nivel mediu?

Care este urmatorul pasa dupa ce ai priceput html/css ?

Sunt mai multe intrebai pana la urma dar ti-as fi foarte recunascator daca m-ai ajuta.
Sau poate mai bine ai scrie un tutorial JavaScript/jQuery pentru incepatori :).

Multumesc mult.

Pascanu Dan Adrian a scris

Salut ionut, interesant tutorialul si foarte bine explicat.
Am si eu o intrebare, ca tot sunt la inceput…pot sa pun 2 plugin-uri jQuery in website-ul meu..sa zicem pur si simplu ca vreau sa pun un meniu jquery si un slide jquery.
Eu am incercat asa ceva dar nu se poate…cand adaug meniul nu mai functioneaza slide-ul..si cand sterg slide-ul ..meniul merge si totusi nu inteleg de ce.
Multumesc.

rek a scris

@Pascanu Dan Adrian
Daca nu ma insel eu (nu am mai lucrat de mult cu jquery), din cauza ca scriptul tau de meniu foloseste alta librarie decat cea de slidemenu.

De ex sa presupunem ca meniul are jquery1.2.1.js pe care o si implemetezi prima. Ptr slide folosesti jquery1.2.5.js

Acum fiind ambele implementate se vor anula si browserul va interpreta doar 1 librarie (prima inserata)
E de preferat sa folosesti 1 biblioteca ptr toate.

Inca o data s-ar putea sa ma insel, nu mai stiu exact.

Luci a scris

nu te stresa. eu acuma m-am pus sa invat jQ. si sincer e super fain. nu e usor mai ales daca nu ai avut nici o tangenta cu ceva asemanator daca ai putea posta ceva despre ZEND as fi bucuros. bafta in continuare..

iar pt restul… apreciati gestul ca oricum nu gasedi nici un fel de doc. in domeniula asta in romana numa pe bani multi… asa ca fiti intelegatori, nu toata lumea e capabila sa invete sau nu e capabila sa inteleaga…. nu e nici un stres

antinogel a scris

intradevar f pretentios, adica nimic, probabil ai notiuni f vagi despre termenul tutoril, ca sa nu mai vorbim si despre prezentarea grafica la fiecare expunere, ati impanzit internetul cu tot felul de nulitati si imbecilitati, nu faceti nimic altceva decat sa copiati din diferite surse, dar sunteti asa de tampiti ca nici nu stiti ce copiati

adi a scris

M-ar interesa foarte tare cum ai facut imaginea ta de sus cu RSS
cand tii clik sa coboare
daca mi ai putea spune cum ai facut ti as ramane indatorat

Ionut S a scris

Uite codul folosit de Ionut:

.headRSS {
position:absolute;
right:0;
top:-60px;
background:url(images/4card_128.png) no-repeat left top;
width:128px;
height:128px;
outline:none;
text-indent:-9999px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.headRSS:focus,
.headRSS:hover {
outline:none;
top:-20px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

Calin a scris

Salut foarte bun,tutorialu,am avut tentative cu jquery dar cand am vazut cata documentatie e pe site,nu am stiut de unde sa ma apuc :D. E bun tutorialu

Comentariile sunt închise

Site-ul blog.iamntz.com utilizează cookie-uri. Continuarea navigării presupune acceptarea lor. Mai multe informații.

windows apple dropbox facebook twitter
windows apple dropbox facebook twitter