Учебники

MooTools — Селекторы

Сентябрь 8, 2018

Селекторы используются для выбора элементов HTML. Всякий раз, когда вы хотите создавать интерактивные веб-страницы, вам нужно выбрать некоторые данные или действия на этой веб-странице. Селекторы помогают нам получать данные через HTML-запрос от элементов.

Основной селектор ($)

$ Является основным селектором в MooTools. Используя это, вы можете выбрать элемент DOM по его идентификатору. Например, предположим, что у вас есть элемент HTML (например, div) с именем body_id . 

<div id = "body_id">

</div>

Если вы хотите выбрать этот div, используйте следующий синтаксис —

Синтаксис 

//selects the element with the ID 'body_id'
$('body_id');

getElement ()

getElement () — это метод, расширяющий базовый селектор ($). Это позволяет уточнить ваш выбор, используя идентификатор элемента. getElement () выбирает только один элемент и возвращает первый, если есть несколько опций. Вы также можете использовать имя класса, чтобы получить первое вхождение элемента. Но он не получит массив элементов.

Множественный селектор ($$)

$$ используется для выбора нескольких элементов и размещения этих нескольких элементов в массиве. Из этого массива мы можем манипулировать, извлекать и упорядочивать список различными способами. Посмотрите на следующий синтаксис. Он определяет, как выбрать все элементы div из коллекции элементов HTML на веб-странице.

Синтаксис 

<div>
   <div>a div</div>
   <span id = "id_name">a span</span>
</div>

Если вы хотите выбрать все div, используйте следующий синтаксис —

Синтаксис 

//all divs in the page
$$('div');

Если вы хотите выбрать несколько div с одним и тем же именем, используйте следующий синтаксис —

Синтаксис 

//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');

getElements ()

Метод getElements () аналогичен методу getElement (). Этот метод возвращает все элементы в соответствии с критериями. Вы можете использовать либо имя элемента (a, div, input) для выбора этих коллекций, либо имя конкретного класса элемента для выбора коллекции элементов того же класса.

Включить и исключить результаты с операторами

MooTools поддерживает различные операторы, используемые для уточнения вашего выбора. Вы можете использовать все эти операторы в методе getElements (). Каждый из этих операторов может использоваться для выбора элемента ввода по имени.

Посмотрите на следующую таблицу. Он определяет различные операторы, которые поддерживает MooTools.

оператор Описание пример
= (равно) Выберите элемент ввода по его имени. $ (‘body_wrap’). getElements (‘input [name = phone_number]’);
^ = (начинается с) Выберите элемент ввода, сравнивая его начальные буквы имени. $ (‘body_wrap’). getElements (‘input [name ^ = phone]’);
$ = (заканчивается на) Выберите элемент ввода, сравнив его конечные буквы имени. $ (‘body_wrap’). getElements (‘input [name $ = number]’);
! = (не равно) Отмените выбор элемента ввода по имени. $ (‘body_wrap’). getElements (‘input [name! = address]’);
* = (Содержит) Выберите элемент ввода, который содержит определенный шаблон букв. $ (‘body_wrap’). getElements (‘input [name * = phone]’);

Селекторы на основе порядка элементов

Селекторы MooTools следуют определенному порядку в выборе элементов. Селекторы в основном следуют двум порядкам; один четный, а другой странный.

Примечание. Этот селектор начинается с 0, поэтому первый элемент является четным.

Четный заказ

В этом порядке селектор выбирает элементы, расположенные в четном порядке. Используйте следующий синтаксис, чтобы выбрать все четные элементы div на вашей HTML-странице.

Синтаксис 

// selects all even divs
$$('div:even');

Нечетный порядок

В этом порядке селектор выбирает элемент, размещенный в нечетном порядке. Используйте следующий синтаксис, чтобы выбрать все нечетные дивы на вашей HTML-странице.

Синтаксис 

// selects all odd divs
$$('div:odd');

пример

В следующем примере показано, как работает селектор. Предположим, на веб-странице есть текстовое поле и список технологий. Если вы выберете одну технологию из списка, введя это имя в текстовое поле, в списке отобразятся отфильтрованные результаты, основанные на ваших данных. Это возможно с помощью селектора MooTools. Используя селектор, мы можем добавить событие в текстовое поле. Слушатель событий выберет данные из текстового поля и проверит их из списка. Если он есть в списке, то в списке отображаются отфильтрованные результаты. Посмотрите на следующий код. 

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready',function(){
            var input = $('filter');
            
            // set the title attribute of every element
            // to it's text in lowercase
            $$('ul > li').each(function(item){
               item.set('title', item.get('text').toLowerCase());
            });
            
            // the function we'll call when the user types
            var filterList = function(){
               var value = input.value.toLowerCase();
               $$('li').setStyle('display','none');
               
               // check the title attribute if it contains whatever the user is typing
               $$('ul > li[title*=' + value + ']').setStyle('display','');
            };
            
            // make it happen
            input.addEvent('keyup', filterList);
         });
      </script>
   </head>
   
   <body>
      <p><input id = "filter" type = "text" /></p>
      <ul>
         <li>C</li>
         <li>Cpp</li>
         <li>Java</li>
         <li>JavaScript</li>
         <li>Hadoop</li>
         <li>Hive</li>
         <li>CouchDB</li>
      </ul>
   </body>
   
</html>

Вы получите следующий вывод —

Выход

47
Share: