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

коментарі:

+1Денис Мінєєв 20.09.2009 08:07
Вітаю з першим матеріалом секції «Програмування». Сподіваюсь, що запал на цьому не скінчиться... :)
+3slik 20.09.2009 08:17
Дякую :) Я ще, памятається, обіцяв написати статтю про використання системи повідомлень в PHP, але вирішив краще обдумати там деякі проблеми, її чекайте пізніше :) Ну і продовження цієї статті також
Чудово, вітаю, так тримати! Зрештою, у вас тепер просто не залишається інакшого вибору — як у автора першої публікації в цій секції, та її, тим самим, фактичного Старійшини :) Погодьтеся, це зобов’язує :)))

Своє ім’я в майбутню історію Енетрі ви вже вписали, тож тепер підтягуйтеся до нас з Денисом на офіційну дошку пошани. Сподіваюся, спільнота Енетрі, на знак вдяки за публікації своїх Авторів, зможе вам в цьому трішки допомогти. Успіхів!
До речі, на Енетрі віднедавна доступна одна корисна комбінація HTML-тегів, спеціально і найбільше призначена для власне для цієї от Професійної секції:
<pre><code>
цитування програмного коду,
</code></pre>
з відбивками моноширинним шрифтом та автоекрануванням всіх можливих вкладених тегів.
Ян Лі 22.09.2009 08:45
// вибираємо всі відзначені елементи input
$$('input[chacked="chacked"]').highlight();
Цікаво, що означає слово "chacked"? :-)
+1Денис Мінєєв 22.09.2009 09:10
вочевидь це помилка, ймовірно малося на увазі checked="checked"
+1slik 22.09.2009 10:38
так, вибачаюся за помилку
+1alex32102 22.09.2009 14:59
дякую. дуже простий і цікавий вступ до вивчення.

додати коментар: