blog-programisty.pl

Kurs Mootools 1.2 (part 1) – selectors

grudzień 18th, 2008

Witam,

Prędzej czy później, każdy programista piszący kod w javascript zacznie szukać framework’a dla tego języka. Obecnie największą popularnością cieszą się JQuery i PrototypeJS. Ja wybrałem jednak Mootools, nie jest tak wielki (czytaj “ciężki”) jak wymienione wcześniej, a daje nam całkiem spory zasób funkcji, które ułatwią i przyspieszą programowanie w javascript.

W pierwszej części kursu zajmę się selektorami, czyli funkcjami, które zwracają obiekt lub tablicę obiektów w/g wyznaczonych przez nas kryteriów.

Zamiast żmudnego wklepywania document.getElementById('id') wystarczy wpisać $('id') by uzyskać ten sam efekt. Funkcja $ zwraca więc pojedynczy element, jeśli chcemy wyszukać kilka elementów możemy użyć $$ lub getElements. Obie funkcje jako parametry przyjmują maskę po której nastąpi szukanie, przy czym funkcję getElements wywołuje się na obiekcie i zwraca ona elementy znajdujące się w obiekcie.

Czas na przykłady:

//wszystkie elementy <div> na stronie
$$('div');
 
//wszystkie elementy <div> i <span> na stronie
$$('div', 'span');
 
//wszystkie radio buttony należące do formularza o id="id_formulaza"
$('id_formularza').getElements('input[type=radio]');
 
//wszystkie elementy <span> których id zaczyna się od "prefix"
$$('span[id^=prefix]');
 
//wszystkie elementy <span> których id kończy się na "sufix"
$$('span[id$=sufix]');

Przydatne również mogą okazać się selektory first, last i contains:

//pierwszy element w <tr>
$('tr:first-child');
 
//ostatni element w <tr>
$('tr:last-child');
 
//wszystkie divy zawierające tekst "szukany"
$$('div:contains("szukany")');

Oczywiście na tak pobranych elementach możemy wywoływać różne funkcje, np:

$$('div').setStyle('color', '#FF0000');

lub skorzystać z iteratora each i wykonywać złożone operacje na każdym elemencie, np:

$$('input[type=text]').each(function(element){
  if (element.value == 0)
    alert(1);
  else
    alert(2);
})

Kategoria: javascript