Mootools 1.2 チュートリアル (2) DOM セレクター_Mootools

まだ準備ができていない方は、前回の記事「Mootools 1.2 チュートリアル (1) - MooTools の紹介」を先に読んでください。 MooTools 1.2 を参照する方法と、domready でスクリプトを呼び出す方法について説明しました。
今日、このチュートリアル シリーズの 2 番目の講義を開始します。このレッスンでは、HTML 要素を選択するいくつかの方法を学びます。多くの点で、これは MooTools の中で最も使用され、基本的なものです。結局のところ、HTML 要素に基づいてインタラクティブなユーザー エクスペリエンスを作成するには、まずそれらを実際に手に入れる必要があります。
基本メソッド
$();
$ 関数は MooTools の基本的なセレクターです。これを使用して、ID に基づいて DOM 要素を選択できます。
参照コード:

コードをコピー コードは次のとおりです:

// Select " body_wrap" 要素としての ID
$('body_wrap');

参照コード:

コードをコピー コードは次のとおりです。

.getElement( );
. getElement(); は $ メソッドを拡張し、選択操作を簡素化します。たとえば、$ メソッドを使用して ID「body_wrap」の要素を選択し、最初の子ノードを選択できます。 .getElement(); 要件を満たす要素が 1 つだけ選択される場合、最初の要素が返されます。 .getElement(); メソッドにパラメータとして CSS クラス名を指定すると、関数のすべての要素の配列ではなく、その CSS クラス名の最初の要素が取得されます。複数の要素を選択するには、以下の .getElements() メソッドを使用できます。
参照コード:

コードをコピー コードは次のとおりです:

// Select ID を " 「body_wrap」という ID を持つ要素の下の最初のリンク
$('body_wrap').getElement('a');
// 要素の下にある ID「special_anchor」を持つ要素を選択しますID が「body_wrap」の
$('body_wrap').getElement('#special_anchor')
// ID が「body_wrap」の要素の下にある CSS クラス名が「special_anchor_class」の最初の要素を選択します
$('body_wrap ').getElement('.special_anchor_class');

参照コード:

コードをコピー コードは次のとおりです。

anchor a href="#" >別のアンカー
特殊アンカー
特別なアンカー
別の特殊なアンカー

$$ ();
$$ 関数を使用すると、複数の要素をすばやく選択して配列 (任意の方法で操作、取得、並べ替えできるリスト) を形成できます。タグ名 (div、a、img など)、ID、またはそれらのさまざまな組み合わせによって複数の要素を選択できます。ある読者が指摘したように、$$ を使用すると、ここで説明した以上のことができます。
参照コード:

コードをコピー

コードは次のとおりです: // Selectこのページ すべての div $$('div');

// ID「id_name」を持つ要素とすべての div

$$('#id_name', 'div');


参照コード:

コードをコピー

コードは次のとおりです:< ;div>

div

🎜>.getElements();

.getElements(); は .getElement(); と非常に似ていますが、要件を満たし、配列を形成するすべての要素を返します。 ); メソッド。);
参照コード:

コードは次のとおりです。

// ID が「body_wrap」の要素の下にあるすべてのリンクを選択します
$('body_wrap').getElements('a');
// ID が「body_wrap」の要素をすべて選択しますCSS クラス名「special_anchor_class」の子要素 ​​
$('body_wrap').getElements('.special_anchor_class');

参照コード:

コードをコピーします コードは次のとおりです:

アンカー
別のアンカー
;/ a>
別の特殊アンカー

演算子 Results
Operators
MooTools 1.2 は、選択操作をさらに合理化できるいくつかの演算子をサポートしています。 .getElements(); でこれらの演算子を使用すると、特定の結果を含めたり除外したりできます。 MooTools は 4 つの演算子をサポートしており、それぞれを名前で入力要素を選択するために使用できます。
= :
と等しい 参照コード:
//「phone_number」という名前の入力要素を選択します
$('body_wrap').getElements('input[name=phone_number]'); 🎜 >^=: Start with...
参考コード:
//名前が「phone」で始まる入力要素を選択
$('body_wrap').getElements('input[name^= Phone]' ; $=number]');
!= :
と等しくない 参照コード:
// 名前が "address" と等しくない入力要素を選択します
$(' body_wrap').getElements('input [name!=address]');
参照コード:

gt;

(Fdream 注: ここでの入力は単なる例であり、このメソッドを使用して、div、a などの他の要素を選択することもできます。)
演算子を使用するには、まず演算子の型を指定する必要があります。要素 (ここでは入力など) を指定し、フィルターする属性 (ここでは名前など) と演算子を指定して、最後にフィルター文字列を選択します。
要素の順序に基づくセレクター
even (偶数選択)
この単純なセレクターを使用すると、偶数の要素を選択できます。注: このセレクターは 0 からカウントを開始するため、最初の要素は偶数の順序になります。
参照コード:
// 偶数の div を選択
$$('div:even');
参照コード:

Even

Odd

Even

Odd

odd (奇数選択)
奇数の要素を選択する点を除き、偶数と同じです。
参照コード:
// 奇数の div をすべて選択します
$$('div:odd');
参照コード:

Even

>

Odd

Even

.getParent();
.getParent(); メソッドを通じて、要素の親要素 (parent) を取得できます。
参照コード:
// ID「child_id」を持つ要素の親要素を選択
$('child_id').getParent();
参照コード:

> コード例
MooTools UI 開発はすべてセレクターから始まります。ここでは、セレクターを使用して DOM 要素を操作する方法を示す、非常に簡単な例をいくつか示します。
参照コード:
// すべてのスパンの背景色を #eee に設定します
$$('span').setStyle('background-color', '#eee'); / 奇数のすべてのスパンの背景色を #eee に設定します
$$('span:odd').setStyle('background-color', '#eee'); // ID を設定しますbody_wrap 要素の下にある CSS クラス名 .middle_spans を持つすべてのスパンの背景色は #eee
$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee' );
参照コード:




コードをコピー


コードは次のとおりです:

偶数

偶数
奇数

試してみてください この zip パッケージには、単純な html ファイル、MooTools 1.2 コア ライブラリ、外部 js ファイル、および上記の例が含まれています。

さらに詳しく…

これは、これが MooTools 1.2 のセレクターの機能の完全なリストであることを意味するものではなく、単に入門を支援し、MooTools が提供する機能を説明することを目的としています。セレクターの詳細については、次のドキュメントを参照してください:

• 要素 セレクターに関するドキュメントはたくさんあります。 ちなみに、こちらもご覧ください
• セレクター

MooTools ブログの $$ セレクターに関する記事

これは、

$$ セレクターとその多くのバリエーション に関する mootools.net の非常に優れたブログ投稿です。このセレクターを使用して何ができるかは信じられないでしょう。この記事は一読の価値があります。

スリックスピードセレクター

これは、MooTools 上で他の人が要素を選択する際にさまざまなライブラリがどのくらい速いかを測定するために行った実験です。これはそれ自体素晴らしいことですが、

これらのセレクター の例は非常に価値があります。ここでのすべてのセレクター機能は、$$ メソッドを通じて実装できます。

W3C セレクター

MooTools では、擬似セレクターの力を利用することもできます (上記の Slickspeed で実証されているように)。これは、セレクター

に関する W3C の記事であり、間違いなく読む価値があります (セレクターのリストだけが役立つ場合)。 MooTools の $$ セレクターがこのページのすべてのセレクターをサポートしているかどうかはわかりませんが、少なくともほとんどのセレクターをサポートしています。これについて詳しく教えてください。