Tutorial jQuery VII – manipulare DOM & Live events

Î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&lt;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>');
});

Încearcă și tu!

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;
})

Încearcă și tu!
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;
})

Încearcă și tu!

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

7 Comentarii

Adaugă un comentariurăspuns pentru

Link-urile în context sunt binevenite. Comentariile fără nume/email valid sunt șterse.
PS: Comentariul NU este editabil.

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