MooTools-选择器 - 芒果文档

📌 相关文章

📜 MooTools-选择器

📅 最后修改于: 2020-10-22 06:28:11 🧑 作者: Mango

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

基本选择器（＆dollar;）

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

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

句法

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

getElement（）

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

多重选择器（＆dollar;＆dollar;）

＆dollar;＆dollar;用于选择多个元素并将这些多个元素放入数组中。从该数组中，我们可以以不同的方式操作，检索列表并对其进行重新排序。看一下下面的语法。它定义了如何从网页上的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支持的不同运算符。

Operator	Description	Example
= (equal to)	Select input element by its name.	$(‘body_wrap’).getElements (‘input[name = phone_number]’);
^= (starts with)	Select input element by comparing its starting letters of the name.	$(‘body_wrap’).getElements (‘input[name^=phone]’);
$= (ends with)	Select the input element by comparing its ending letters of the name.	$(‘body_wrap’).getElements (‘input[name$ = number]’);
!= (is not equal to)	De-select the input element by is name.	$(‘body_wrap’).getElements (‘input[name!=address]’);
*= (Contains)	Select the input element which contains particular letter pattern.	$(‘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选择器可以做到这一点。使用选择器，我们可以将事件添加到文本框中。事件侦听器将从文本框中选择数据，然后从列表中进行检查。如果它在列表中，则列表显示过滤的结果。看一下下面的代码。


      
      
      
   
   
   
      
      
         C
         Cpp
         Java
         JavaScript
         Hadoop
         Hive
         CouchDB

您将收到以下输出-

输出