MooTools - 选择器

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

基本选择器 ($)

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

<div id = "body_id">

</div>

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

语法

//选择 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，请使用以下语法−

语法

//页面中的所有div
$$('div');

如果要选择具有相同id名称的多个div，请使用以下语法−

语法

//选择id为'id_name'的元素和所有div
$$('#id_name', 'div');

getElements()

getElements()方法与getElement()方法类似，该方法根据条件返回所有元素。您可以使用元素名称(a、div、输入)来选择这些集合，也可以使用特定元素类名称来选择同一类的元素集合。

使用运算符包含和排除结果

MooTools 支持用于优化选择的不同运算符。您可以在 getElements() 方法中使用所有这些运算符。这些运算符中的每一个都可用于按名称选择输入元素。

查看下表。它定义了 MooTools 支持的不同运算符。

基于元素顺序的选择器

MooTools 选择器在元素选择中遵循特定的顺序。选择器主要遵循两种顺序;一个是偶数，另一个是奇数。

注意 −此选择器从 0 开始，因此第一个元素是偶数。

偶数顺序

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

语法

// 选择所有偶数 div
$$('div:even');

奇数顺序

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

语法

// 选择所有奇数 div
$$('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');
            
            // 将每个元素的 title 属性设置为
            // 将其文本改为小写
            $$('ul > li').each(function(item){
                item.set('title', item.get('text').toLowerCase());
            });
            
            // 用户输入时调用的函数
            var filterList = function(){
                var value = input.value.toLowerCase();
                $$('li').setStyle('display','none');
                
                // 检查 title 属性是否包含用户输入的内容
                $$('ul > li[title*=' + value + ']').setStyle('display','');
            };
            
            // 实现此操作
            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>

您将收到以下输出 −

输出