このチュートリアルでは、今日最も人気のある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ライブラリとの互換性を提供し、一貫したコードパフォーマンスのために異なるブラウザ間の違いを正規(guī)化するブラウザー抽象化と呼ばれる機能を提供します。
• Mootoolsを入手してくださいMootoolsを取得するのはとても簡単です。 Mootoolsは、Coreなどと呼ばれる2つの部分に分かれています。 Coreには、フレームワークのコアクラスとモジュールが含まれており、アプリケーションの要件に従って含めることができる追加のクラスが含まれています。 Mootoolsには、コアなどをカスタマイズする強力なビルダーページがあります。 Mootools Coreの現(xiàn)在の安定したバージョン（執(zhí)筆時點）は1.4.5以上1.4.0.1です。

  要素セレクター

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

  id で要素を選択します

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

  構(gòu)文を使用する必要があります。 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に注入しません。インジェクションを?qū)g行するには、adopt()メソッドを呼び出す必要があります。次の例は、これを行う方法を示しています。

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

  このコードを?qū)g行すると、ボディタグを終了する前に追加された新しい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ステートメントを使用して現(xiàn)在のブラウザを識別します。

  Browser

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

  結(jié)論

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

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

以上がMootoolsを始めましょうの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。