Tutorial MooTools pasul 2 Selectori

In acest tutorial ne vom ocupa de metode de a selecta elemente html, practic baza motivelor pentru care MooTools este atat de folosit. Pana la urma, pentru a putea crea o experienta interactiva cu ajutorul elementelor html, trebuie intai sa reusesti sa le selectezi.

Functia '$' este selectorul de baza in MooTools. Acesta are un scop dual, de a face un element in Internet Explorer sa preia toate metodele sale, dar mai ales cu ajutorul sau poti selecta un element al DOM-ului dupa ID, asa cum puteti vedea in exemplul urmator:

 

 //selecteaza elementul cu id-ul css "elementulMeu"
$('elementulMeu');

'.getElement();' extinde '$', permitand rafinarea selectiei. De exemplu, se poate selecta id-ul "elementulMeu", apoi prima ancora "ancora1", dupa cum puteti vedea mai jos.'.getElement();'nu selecteaza decat un singur element si il va returna doar pe primul, daca exista mai multe optiuni. Daca adaugi o clasa cu aceasta functie, vei avea doar prima aparitie a unui element cu numele acelei clase, nu o matrice cu toate. Pentru a selecta mai multe elemente vom folosi functia '.getElements();' pe care o detaliem mai jos.

//selecteaza prima ancora "ancora1" in cadrul elementului cu id-ul "elementulMeu"
$('elementulMeu').getElement('a'); 
 
//selecteaza elementul cu id-ul "ancora_speciala" in cadrul elementului cu id-ul "elementulMeu"
$('elementulMeu').getElement('#ancora_speciala'); 
 
//selecteaza primul sub-element cu clasa "clasa_ancora_speciala" in cadrul elementului cu id-ul "elementulMeu"
$('elementulMeu').getElement('.clasa_ancora_speciala');

Codul HTML:

 


        ancora1
        ancora2
        ancora speciala
        ancora speciala
        ancora speciala2

'$$' ne ofera posibilitatea sa selectam rapid mai multe elemente si le plaseaza intr-o matrice. Poti selecta elemente dupa nume (ex. div, a, img) sau dupa id.

Exemple:

$$('a'); //returneaza toate elementele ancora de pe pagina .
$$('a', 'b'); //returneaza toate elementele ancora si tagurile bold de pe pagina.
$$('#ElementulMeu'); //Returneaza o matrice cu toate tagurile ancora avand id-ul 'ElementulMeu'.
$$('##ElementulMeu a.ClasaMea'); //returneaza o matrice cu toate tagurile ancora avand clasa 'ClasaMea' in cadrul elementului din DOM cu id-ul 'ElementulMeu'.

'.getElements();' este similara cu '.getElement();', doar ca returneaza toatele elementele ce indeplinesc un criteriu, plasandu-le intr-o matrice. Aceasta functie poate fi folosita ca si cea anterioara.

MooTools suporta mai multi operatori ce permit in continuare rafinarea selectiilor. Acestia pot fi folositi in cadrul .getElements(); si pot include sau exclude anumite rezultate. MooTools suporta mai multi operatori, fiecare putand fi folosit pentru a selecta un element de input dupa nume:

• '=': is equal to - operatorul 'egal'
  

   
  
  //selecteaza inputul cu numele "numele_meu"
  $('elementulMeu').getElements('input[name=numele_meu]');
  
  

• '*=': contains - operatorul 'contine'
  

   
  
  //selecteaza inputul cu numele ce contine 'ele_me'
  $('elementulMeu').getElements('input[name*=ele_me]');
  
  

• '^=': starts-with - operatorul 'incepe cu'
  

   
  
  //selecteaza inputul cu numele ce incepe cu"numele"
  $('elementulMeu').getElements('input[name^=numele]');
  
  

• '$=': ends-with - operatorul 'se termina cu'
  

   
  
  //selecteaza inputul cu numele ce se termina cu "meu"
  $('elementulMeu').getElements('input[name$=meu]');
  
  

• '!=': is not equal to - operatorul 'diferit'
  

   
  
  //selecteaza inputul cu numele diferit de "numele_tau"
  $('elementulMeu').getElements('input[name!=numele_tau]');
  
  

• '~=': contained in a space separated list - operatorul 'continut intr-o lista separata de spatiu'
  

   
  
  //selecteaza inputul cu numele ce contine "mele me"
  $('elementulMeu').getElements('input[name~=mele me]');
  
  

• '|=': contained in a hyphen separated list - operatorul 'continut intr-o lista separata de cratima'
  

   
  
  //selecteaza inputul cu numele ce contine "mele-me"
  $('elementulMeu').getElements('input[name|=mele-me]');
  
  

Pseudo-selectori

• even - acest selector poate fi folosit pentru a alege elemente ordonate par. Selectorul incepe de la 0, deci primul element va fi intotdauna unul par.
  

   
  
  // selecteaza toate divurile pare
  $$('div:even');
  
  

   
  
  Even
  
  Odd
  Even
  
  Odd
  
  

• odd - acest selector poate fi folosit pentru a alege elemente ordonate impar.
  

   
  
  // selecteaza toate divurile impare
  $$('div:odd');
  
  

   
  
  Even
  Odd
  
  Even
  Odd
  
  
  

• getParent(); - acest selector poate fi folosit pentru a alege 'parintele unui element'.
  

   
  
  // selecteaza parintele elementului cu id-ul 'id_copil'
  $('id_copil').getParent();
  
  

   
  
   
      
  Text
  
  
  

Identic pot fi folositi selectorii:

• first-child -folosit pentru a alege primul copil al unui element

   
  
  // selecteaza primul copil al unui element td
  $$('td:first-child');
  
  

• last-child -folosit pentru a alege ultimul copil al unui element

   
  
  // selecteaza ultimul copil al unui element td
  $$('td:last-child');
  
  

• only-child -folosit pentru a alege singurul copil al unui element

   
  
  // selecteaza unicul copil al unui element td
  $$('td:only-child');
  
  

Pentru mai multe detalii, cititi tutorialele de pe site-ul MooTools.

Alex B.