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() 是扩展基本选择器 ($) 的方法。它允许您使用元素 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() 方法与 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>

您将收到以下输出 -

输出