MooTools: Виборка

Я доволі давно познайомився з цим фреймворком. Більше того, це перший JavaScript фреймворк, з яким я працював. За весь час своєї практики в JavaScript'і я користувався багатьма бібліотеками і фреймворками, але все ж, MooTools я вважаю найзручнішим. Може він не такий лаконічний як jQuery, може в нього нема такого сильного UI як в ExtJS, але він дуже зручний, саме для програміста. Хочу тут поділитися своїми знаннями з енетрівцями.

Почнемо з найпростішого, і одночасно, з найвикористовуванішого, з виборки.

Функція Долара ($).

Пригадаємо, як ми робимо виборку на чистому яваскрипті:

// вибираємо елемент по його ідентифікатору
var el = document.getElementById('element-id');

// використовуемо його
el.innerHTML = "selected";

Тепер подивимось, як це робиться з допомогою MooTools:

// вибираємо елемент по його ідентифікатору
var el = $('element-id');

// використовуемо його
el.set('html', 'selected');

Вийшло трошки лаконічніше. Але це не все, ви напевне звернули увагу, що при використанні вибраного елемента ми використали нестандартну функцію set. Справа в тому, що функція $ не тільки вибирає елемент по його ідентифікатору, але й доповнює новими методами, так, наприклад, ми з легкістю можемо 'підсвітити' вибраний елемент, з допомогою метода highlight:

// підсвічуємо раніше вибраний елемент
el.highlight();

Про ці методи ми поговиромо пізніше.

Варто повідомити, що розробники, починаючи версії MooTools 1.2.3, для того щоб уникнути конфліктів з іншими фреймворками (а ми знаємо, що функція $ є і у jQuery, і у Prototype, і у інших), ввели так званий safe-dollar mode, тобто переіменували $ в document.id(), і рекомендують використовувати саме цю назву для розробки плагінів. Не переживайте, $ нікуда не пропала: якщо MooTools завантажившись не знайде іншої функції з цією назвою (читайте: не знайде іншого завантаженого фреймворку), то поверне $ її функціонал.

Функція Подвійного Долара ($$)

Окрім виборки по ідентифікатору, до якої так звикли, програмуючи на чистому яваскрипті, в арсеналі MooTools є функція, яка реалізовує більш широкий функціонал, а саме, так звані CSS-селектори. Це $$. Подивимось приклади:

// вибираємо елемент по ідентифікатору
$$('#element-id').highlight();

// вибираємо одночасно 3 елемента по ідентифікаторах
$$('#elem1, #elem2, #elem3').highlight();

// вибираємо всі елементи з класом className
$$('.className').highlight();

// вибираємо всі div з класом cls
$$('div.cls').highlight();

Кожен раз функція повертає колекцію елементів, тому, здавало б ся, ідентичні, наступні способи виборки, насправді такими не є:

// вибираємо одночасно 3 елемента по ідентифікаторах
$$('#elem1, #elem2, #elem3').highlight();

// також вибираємо 3 елемента по їх ідентифікаторах, обгортаєм їх в масив, але виклик методу highlight видасть помилку
[$('elem1'), $('elem2'), $('elem3')].highlight();

Думаю, ви вже здогадалися чому так. Якщо ні, то поясню: створюючи масив конструкцією [], ми створюємо звичайний масив, а от $$ повертає вже розширений новими методами масив.

Виборка певних елементів, колекцій по їх ідентифікаторах і їх класах, це ще не все що вміє $$. Ось інші, більш складні, приклади з поясненями:

// вибираємо всі відзначені елементи input
$$('input[chacked="chacked"]').highlight();

// і видаляемо всі невідзначені
$$('input[chacked!="chacked"]').destroy();

// або так
$$('input[name="el"][chacked="chacked"]').highlight();

Як бачите, при виборці можна перевіряти значення любого параметру, для перевірки використовуються кілька операцій:

• '=' : еквівалентно
• '*=': включае
• '^=' : починається з
• '$=' : закінчується на
• '!=' : не еквівалентно
• '~=' : включае, але виділене пробілами ((class="a b c") $$('div[class~=a]') для прикладу)
• '|=' : включае, але виділене '-' (те ж саме, тільки замість пробілів - дифіз)

Інші функції.

Як ми вже знаємо, $ і $$ повертають розширені новими методами об`єкти, 2 з яких дозволяють проводити виборку всередені вже вибраного(их) елемента(ів):

// повертає перший знайдений елемент
$('element-id').getElement('a');

// повертає колекцію знайдених елементів
$('element-id').getElements('a');

Обидва методи як параметер приймають CSS-селектор.

Якщо енетрівців цікавить цей фреймворк, я продовжу писати. Також хочу порадити підписатися під деякі твіттер-аккаути:
@mootools
@mooaddict
@mootooled
@mootoolified
Ну і мій:
@slikjay