În afară de toate efectele drăguțe de care este capabil, jQuery mai știe și alte lucruri mult mai importante și utile. Printre acestea sunt funcțiile de manipulare a DOM-ului.
Prin manipularea DOM (Document Object Model) se poate modifica structura paginii parțial sau chiar în totalitate. Astfel, putem adăuga, șterge sau copia elemente în funcție de necesități. Utilizare practică: AJAX, galerii de genul lightbox, drag&drop, etc. Pentru a demonstra cum funcționează câteva din funcțiile de manipulare a DOM, am făcut un mic exemplu în care elementele sunt adăugate dinamic, după încărcarea paginii. Codul HTML inițial este următorul:
<ul class="clearfix" id="manipulation"></ul> <ul id="status"></ul>
Adăugăm în prima listă cinci elemente (a doua listă este un fel de consolă care – la click – ne arată câte elemente conține prima listă):
for(i=0;i<5;i++){ $(document.createElement('li')).appendTo($('#manipulation')); }
Apoi, pentru fiecare LI
adăugăm un span
la mouseover și îl ștergem la mouseout. Desigur, puteam să-l arătăm/ascundem, dar am vrut doar să arăt cam cum funcționează manipularea. De asemenea, la click, se va injecta un alt LI
imediat după elementul curent. Toate event-urile sunt live (voi explica un pic mai jos care e treaba cu ele) :
$('#manipulation').find('li:not(span)').live('click',function(e){ $(document.createElement('li')).append('<a href="#">x</a>').hide().insertAfter($(this)).show(500) }).live('mouseover', function(){ $(this).append('<span>CLICK!</span>'); }).live('mouseout', function(){ $(this).find('span').remove(); });
Adăugăm și un event la #status
ce ne arată la click câte elemente sunt în prima listă:
$('#status').click(function(){ $(this).append('<li>Elemente în listă: '+$('#manipulation').find('li').length+'</li>'); });
Live events§
Un aspect important al elementelor modificate după încărcarea paginii îl reprezintă evet-urile. Sau, mai bine spus, nepropagarea acestora. Exemplu:
<ul> <li>Element listă</li> <li>Element listă</li> <li>Element listă</li> </ul> <a href="#">Adaugă element</a>
$('li').bind('click',function(){ alert('Ai făcut click pe elementul nr.'+($('ul li').index(this)+1)); }) $('a').bind('click', function(){ $('ul').append('<li>Element listă nou</li>'); // adaugăm un element nou, la sfârșitul listei return false; })
Va funcționa doar pentru elementele existente la încărcarea paginii. Elementele adăugate ulterior nu vor avea niciun event. Până la versiunea 1.3 a jQuery, existau două soluții:
1) re-binduirea event-ului. Asta presupunea unbind
pentru eventurile existente pe elemente => timpi mari de execuție
2) folosirea plugin-ului ‘livequery’.
În versiunea 1.3 a jQuery pluginul sus amintit a fost integrat în librărie (la fel cum s-a întâmplat și cu dimension plugin). Astfel, codul de mai sus devine:
$('li').live('click',function(){ alert('Ai făcut click pe elementul nr.'+($('ul li').index(this)+1)); }); $('a').bind('click', function(){ $('ul').prepend('<li>Element listă nou</li>'); // adaugăm un element nou, la sfârșitul listei return false; })
Funcția live
funcționează la fel ca funcția bind
cu câteva diferențe:
- Event-urile disponibile sunt: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup
- Event-urile sunt „bind-uite” pentru toate elementele, inclusiv cele ce se adaugă ulterior în DOM
- Event-urile live nu se propagă ca și cele clasice, astfel încât e.stopPropagation() nu funcționează*
*Fiind o funcție nouă în jQuery 1.3, nu este documentată suficient iar livequery am folosit doar ocazional. Și cum nici nu am avut problema asta și nici nu există o soluție în manual, nu știu cum s-ar putea rezolva. Cel puțin pentru moment.
Următorul tutorial este despre… AJAX Va urma… Nu știu când. Probabil în una-două săptămâni.
IMPORTANT!§
M-ar ajuta foarte mult dacă primesc feedback de la începători. Vreau să știu dacă explic bine și pe înțelesul tuturor, deoarece, având o oarecare experiență îmi este destul de greu să-mi dau seama cât de accesibil este începătorilor.
Tu deja esti la al saptelea tutorial, din pacate nu te-am urmarit de la inceput.Dar overall, cred ca explici bine, cu bucata de cod si exemplul clar, sa inteleaga toti.
Poți oricând să mă ajungi din urmă
Mulțumesc pentru tutorialele de JQuery! Sînt foarte utile!
misto tutoriale… le-am citit si eu si mi se par bine explicate… nu stiam nici o boaba de jquery… acum fix o boaba stiu
Ceea ce înseamnă că… Mi-am atins scopul! Mă bucur că te-am ajutat
Mulțumesc pentru tutoriale. Pe mine au reușit să mă clarifice la unele chestiuni (.live & .bind).
Š¢ine-o tot așa !
Multumesc. Informatia este foarte utila, explicatiile – bine formulate si destul de usor de asimilat chiar si pentru un incepator.