MooTools - 选择器

选择器用于选择 HTML 元素。无论何时您想要创建交互式网页，都需要从该网页中选择一些数据或操作。选择器帮助我们通过 HTML 请求从元素接收数据。

基本选择器（$）

$ 是 MooTools 中的基本选择器。使用它，您可以通过其 ID 选择 DOM 元素。例如，假设您有一个名为 body_id 的 HTML 元素（例如 div）。

<div id = "body_id">

</div>

如果您想选择此 div，请使用以下语法：

语法

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

getElement( )

getElement() 是扩展基本选择器 ($) 的方法。它允许您使用元素 ID 细化选择。getElement() 仅选择单个元素，如果有多个选项，则返回第一个。您还可以使用类名获取元素的第一个出现。但它不会获取元素数组。

多选器（$$）

$$ 用于选择多个元素并将这些多个元素放入数组中。从该数组中，我们可以以不同的方式操作、检索和重新排序列表。请查看以下语法。它定义了如何从网页上的 HTML 元素集合中选择所有 div 元素。

语法

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

如果您想选择所有 div，请使用以下语法：

语法

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

如果您想选择具有相同 id 名称的多个 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 开始，因此第一个元素是偶数。

偶数顺序

在此顺序中，选择器选择以偶数顺序排列的元素。使用以下语法选择 HTML 页面中的所有偶数 div。

语法

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

奇数顺序

在此顺序中，选择器选择以奇数顺序排列的元素。使用以下语法选择 HTML 页面中的所有奇数 div。

语法

// 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>

您将收到以下输出：

输出

打印页面