📜  MooTools-选择器

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


选择器用于选择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支持的不同运算符。

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

您将收到以下输出-

输出