Kurs Mootools 1.2 (part 1) – selectors
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); }) |
2 komentarzy grudzień 18th, 2008