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 支持的不同运算符。
| 运算符 | 描述 | 示例 |
|---|---|---|
| = (equal to) | 通过名称选择输入元素。 | $('body_wrap').getElements ('input[name = phone_number]'); |
| ^= (以...开头) | 通过比较名称的起始字母来选择输入元素。 | $('body_wrap').getElements ('input[name^=phone]'); |
| $= (以...结尾) | 通过比较名称的结束字母来选择输入元素。 | $('body_wrap').getElements ('input[name$ = number]'); |
| != (不相等to) | 通过名称取消选择输入元素。 | $('body_wrap').getElements ('input[name!=address]'); |
| *= (Contains) | 选择包含特定字母模式的输入元素。 | $('body_wrap').getElements ('input[name*=phone]'); |
基于元素顺序的选择器
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>
您将收到以下输出 −
输出
