MooTools - 选择器

MooTools选择器 - 从简介，安装，程序结构，选择器，使用数组，函数，事件处理，DOM操作，样式属性，输入过滤，拖放，正则表达式，期刊，滑块，可排序，手风琴，工具提示开始学习MooTools选项卡式内容，类，Fx.Element，Fx.Slide，Fx.Tween，Fx.Morph，Fx.Options，Fx.Events。

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

基本选择器($)

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

如果要选择此div，请使用以下语法 :

语法

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

getElement()

getElement()是扩展基本选择器($)的方法.它允许您使用元素ID优化您的选择. getElement()仅选择单个元素，如果有多个选项，则返回第一个元素.您还可以使用类名来获取元素的第一个匹配项.但它不会得到一系列元素.

多重选择器($$)

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

语法

   a div
   a span

如果要选择所有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]');
！=(不等于to)	取消选择in把元素按名称.	$('body_wrap').getElements('input [name！= address]');
* =(包含)	选择包含特定字母花样的输入元素.	$('body_wrap').getElements('input [name * = phone]');

选择器基于元素顺序

MooTools选择器遵循元素选择中的特定顺序.选择者主要遵循两个命令;一个是偶数，另一个是奇数.

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

偶数顺序

按此顺序，选择器选择放入的元素一个偶数的订单.使用以下语法选择HTML页面中的所有偶数div.

语法

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

奇数订单

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

语法

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

示例

以下示例显示了选择器的工作原理.假设网页上有文本框和技术列表.如果您通过在文本框中输入该名称从列表中选择一项技术，则列表会根据您的输入显示过滤结果.使用MooTools选择器可以实现这一点.使用选择器，我们可以向文本框添加事件.事件侦听器将从文本框中选择数据并从列表中进行检查.如果列表中有，则列表会显示已过滤的结果.看看下面的代码.

                                    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);         });                     
               C
         Cpp
         Java
         JavaScript
         Hadoop
         Hive
         CouchDB

您将收到以下输出 :

输出