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