MooTools - Селекторы

Селекторы используются для выбора элементов 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 (). Этот метод возвращает все элементы в соответствии с критериями. Вы можете использовать либоelement name (a, div, input) чтобы выбрать эти коллекции или конкретный элемент class name для выбора коллекции элементов одного класса.

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

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

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

Оператор	Описание	пример
= (равно)	Выберите элемент ввода по его имени.	$ ('body_wrap'). getElements ('input [имя = номер_телефона]');
^ = (начинается с)	Выберите элемент ввода, сравнив его начальные буквы имени.	$ ('body_wrap'). getElements ('ввод [имя ^ = телефон]');
$ = (заканчивается на)	Выберите элемент ввода, сравнив его конечные буквы имени.	$ ('body_wrap'). getElements ('ввод [имя $ = число]');
! = (не равно)	Отмените выбор элемента ввода по имени.	$ ('body_wrap'). getElements ('ввод [имя! = адрес]');
* = (Содержит)	Выберите элемент ввода, который содержит определенный буквенный узор.	$ ('body_wrap'). getElements ('ввод [имя * = телефон]');

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

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

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

Даже порядок

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

Syntax

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

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

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

Syntax

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

Example

В следующем примере показано, как работает селектор. Предположим, на веб-странице есть текстовое поле и список технологий. Если вы выберете одну технологию из списка, введя это имя в текстовое поле, то в списке будут показаны отфильтрованные результаты на основе ваших введенных данных. Это возможно с помощью селектора 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>

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

Output