MooTools-セレクター

セレクターは、HTML要素を選択するために使用されます。インタラクティブなWebページを作成する場合は常に、そのWebページからデータまたはアクションを選択する必要があります。セレクターは、要素からのHTMLリクエストを介してデータを受信するのに役立ちます。

ベーシックセレクター($)

ザ・ $MooToolsの基本的なセレクターです。これを使用して、IDでDOM要素を選択できます。たとえば、次の名前のHTML要素(divなど)があるとします。body_id

<div id = "body_id">

</div>

このdivを選択する場合は、次の構文を使用します-

構文

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

getElement()

getElement()は、基本セレクター($)を拡張するメソッドです。要素IDを使用して選択を絞り込むことができます。getElement()は単一の要素のみを選択し、複数のオプションがある場合は最初の要素を返します。クラス名を使用して、要素の最初の出現を取得することもできます。ただし、要素の配列は取得されません。

マルチセレクター($$)

$$は、複数の要素を選択し、それらの複数の要素を配列に配置するために使用されます。その配列から、さまざまな方法でリストを操作、取得、および並べ替えることができます。次の構文を見てください。Webページ上の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()メソッドに似ています。このメソッドは、基準に従ってすべての要素を返します。どちらでも使用できますelement name (a, div, input) それらのコレクションまたは特定の要素を選択するには class name 同じクラスの要素のコレクションを選択するため。

演算子を使用して結果を含めたり除外したりする

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セレクターは要素選択の特定の順序に従います。セレクターは主に2つの順序に従います。1つは偶数で、もう1つは奇数です。

Note −このセレクターは0から始まるため、最初の要素は偶数です。

注文さえ

この順序で、セレクターは偶数の順序で配置されている要素を選択します。次の構文を使用して、HTMLページ内のすべての偶数divを選択します。

Syntax

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

奇数順

この順序で、セレクターは奇数の順序で配置された要素を選択します。次の構文を使用して、HTMLページ内のすべての奇数divを選択します。

Syntax

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

Example

次の例は、セレクターがどのように機能するかを示しています。Webページにテキストボックスとテクノロジのリストがあるとします。テキストボックスにその名前を入力してリストから1つのテクノロジーを選択すると、入力に基づいてフィルター処理された結果がリストに表示されます。これは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>

次の出力が表示されます-

Output