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( )

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()

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>

您將收到以下輸出：

輸出

列印頁面