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:

 



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

0Comentarii la "Tutorial MooTools pasul 2 Selectori"

Adauga Comentariu

Mesaj

Trimite