Mootoolsを始めましょう

このチュートリアルでは、今日最も人気のあるJavaScriptフレームワークの1つであるMootoolsを紹介しています。 Mootools（私のオブジェクト指向ツール

）は、Internet Explorer 6、Firefox、Opera、およびChromeと互換性があります。 Mootoolsは、コンパクトでモジュール式でオブジェクト指向のように設計されています。 Mootoolsは、中程度から高レベルのJavaScriptプログラマー向けに設計されているため、深く掘り下げる前に十分な経験があることを確認してください。

コアポイント

Mootools（代表者

私のオブジェクト指向ツール
• ）は、コンパクトでモジュール式でオブジェクト指向のJavaScriptフレームワークです。 Internet Explorer 6、Firefox、Opera、およびChromeと互換性があり、中程度から高レベルのJavaScriptプログラマー向けに設計されています。 このフレームワークには、要素セレクター、domreadyイベント、要素作成、イベントバインディング、ブラウザー検出などの機能が含まれています。要素セレクターは、ID、クラス、または属性モードを介して要素を選択する操作を簡素化します。 DOMReadyイベントは、DOMがロードされた直後に実行され、スクリプトの実行が高速化されます。イベントバインディングにより、特定のイベントが発生したときにコードの実行が可能になりますが、ブラウザー検出はユーザーのブラウザに基づいた条件付きコードで便利に記述されます。
Mootoolsは非常にカスタマイズ可能で、開発者が使用するコンポーネントを選択および変更できるようになります。これにより、スクリプト効率が向上し、パフォーマンスが向上します。また、他のJavaScriptライブラリとの互換性を提供し、一貫したコードパフォーマンスのために異なるブラウザ間の違いを正規化するブラウザー抽象化と呼ばれる機能を提供します。
• Mootoolsを入手してくださいMootoolsを取得するのはとても簡単です。 Mootoolsは、Coreなどと呼ばれる2つの部分に分かれています。 Coreには、フレームワークのコアクラスとモジュールが含まれており、アプリケーションの要件に従って含めることができる追加のクラスが含まれています。 Mootoolsには、コアなどをカスタマイズする強力なビルダーページがあります。 Mootools Coreの現在の安定したバージョン（執筆時点）は1.4.5以上1.4.0.1です。

  要素セレクター

  JavaScriptフレームワークの最も基本的な操作の1つは、要素を選択することです。 Mootoolsは、Slickをセレクターエンジンとして使用します。 Mootoolsは、さまざまな種類のセレクターをサポートしています。このセクションでは、最も便利で重要なセレクターのいくつかについて説明します。

  id で要素を選択します

  純粋なJavaScriptでIDで要素を選択する場合は、verbose

  構文を使用する必要があります。 Mootoolsは、他の多くのJavaScriptフレームワークと同様に、この操作を短縮するために

  を使用します。あなたのコードは最終的に次のように見えます：

  同じページにMootoolsやその他のライブラリ（jQueryなど）を含めると、問題が発生します。これを克服するために、Mootoolsは、要素を選択する別の方法としてdocument.getElementById('id_of_element') $クラスで要素を選択します

  var element = $('id_of_element');

  これにより、特定のクラスを持つ一連の要素が返されます。個々の要素を取得するには、以下に示すように配列を反復する必要があります。

  var element = $('id_of_element');

  属性モードを介して要素を選択します

  次の例では、IDとクラスの属性が特定のパターンから始まる要素を選択します。

  var element = document.id('id_of_element');

  同様に、次の例は、IDとクラスの属性が特定のパターンで終了する要素と一致します。

  $$('.class_name').each(function(ele){
    console.log(ele);
  });

  domReadyイベント

  domreadyは、ウィンドウオブジェクトにのみバインドできるイベントです。 DOMReadyは、DOMがロードされた直後に実行されます。これは、おそらく他のすべてのリソースがロードされるのを待つwindow.loadイベントよりもはるかに早いです。 domreadyとwindow.loadの比較について詳しく読むことをお勧めします。次の例では、DOMREADYを使用して、DOMをクエリする前にロードするのを待っています。

  $$('[id^=id_start_]').each(function(ele){
    console.log(ele);
  });
  
  $$('[class^=class_start_]').each(function(ele){
    console.log(ele);
  });

  要素作成

  Mootoolsは、新しいHTML要素を作成し、それらをDOMに挿入できます。 Mootoolsで新しいHTML要素を作成するのは非常に簡単です。たとえば、次のコードは新しいDiv要素を作成します。

  $$('[id$=_end_id]').each(function(ele){
    console.log(ele);
  });
  
  $$('[class$=_end_class]').each(function(ele){
    console.log(ele);
  });

  前のコードは新しい要素を作成しますが、DOMに注入しません。インジェクションを実行するには、adopt()メソッドを呼び出す必要があります。次の例は、これを行う方法を示しています。

  window.addEvent('domready', function(){
    if(document.id('id_of_element'))
    {
      alert('Element Exists');
    }
  });

  このコードを実行すると、ボディタグを終了する前に追加された新しいDIVを確認できます。

  イベントバインディング

  イベントバインディングにより、特定のイベントが要素で実行されるとコードが実行されます。クリック、ダブルクリック、およびホバーは、一般的なイベントの例です。独自のカスタムイベントを作成することもできますが、これはこの記事の範囲を超えています。 Mootoolsイベントのバインディングの例として、次のコードは、単純なクリックイベントハンドラーを要素に追加します。

  var new_div = new Element('div', {'class': 'new_div'});

  動的に作成された要素にイベントを追加することもできます。次のコードは、クリックハンドラーを動的に作成した要素に追加します。

  var new_div = new Element('div', {'class': 'new_div'});
  
  $$('body').adopt(new_div);

  ブラウザ検出最後になりましたが、Mootoolsを使用したブラウザ検出です。これは、ユーザーのブラウザに基づいて条件付きコードを記述する場合に必要です。 Mootoolsは、ページが読み込まれたときに入力される

  オブジェクトを提供します。次の例では、Switchステートメントを使用して現在のブラウザを識別します。

  Browser

  document.id('id_of_ele').addEvent('click', function(){
    console.log('I was just clicked');
  });

  結論

  この記事では、Mootoolsの多くの基本的な知識を紹介しています。 Mootoolsを効果的に使用することを学ぶための多くの優れたリソースがあります。 MootoolsのドキュメントとDavid Walshブログから多くのことを学びました。また、私のMootools作業を参照することもできます。

  （2番目のFAQセクションも必要に応じて書き換えることができ、コンテンツの一貫性を維持しながら、文言と文の構造を調整できます）

以上がMootoolsを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。