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(); は $ メソッドを拡張し、選択操作を簡素化します。たとえば、$ メソッドを使用して ID「body_wrap」の要素を選択し、最初の子ノードを選択できます。 .getElement(); 要件を満たす要素が 1 つだけ選択される場合、最初の要素が返されます。 .getElement(); メソッドにパラメータとして CSS クラス名を指定すると、関数のすべての要素の配列ではなく、その CSS クラス名の最初の要素が取得されます。複数の要素を選択するには、以下の .getElements() メソッドを使用できます。
参照コード:
$('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、またはそれらのさまざまな組み合わせによって複数の要素を選択できます。ある読者が指摘したように、$$ を使用すると、ここで説明した以上のことができます。
参照コード:
コードをコピー
参照コード:
コードをコピー
参照コード:
// ID が「body_wrap」の要素の下にあるすべてのリンクを選択します
$('body_wrap').getElements('a');
// ID が「body_wrap」の要素をすべて選択しますCSS クラス名「special_anchor_class」の子要素
$('body_wrap').getElements('.special_anchor_class');
参照コード:
演算子 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');
参照コード:
odd (奇数選択)
奇数の要素を選択する点を除き、偶数と同じです。
参照コード:
// 奇数の div をすべて選択します
$$('div:odd');
参照コード:
.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' );
参照コード:
コードをコピー
コードは次のとおりです:
偶数
< ;span class="middle_spans">偶数
奇数
試してみてください この zip パッケージには、単純な html ファイル、MooTools 1.2 コア ライブラリ、外部 js ファイル、および上記の例が含まれています。
さらに詳しく…
これは、これが MooTools 1.2 のセレクターの機能の完全なリストであることを意味するものではなく、単に入門を支援し、MooTools が提供する機能を説明することを目的としています。セレクターの詳細については、次のドキュメントを参照してください:
- 要素 セレクターに関するドキュメントはたくさんあります。 ちなみに、こちらもご覧ください
- セレクター
MooTools ブログの $$ セレクターに関する記事
これは、
スリックスピードセレクター
これは、MooTools 上で他の人が要素を選択する際にさまざまなライブラリがどのくらい速いかを測定するために行った実験です。これはそれ自体素晴らしいことですが、
これらのセレクター の例は非常に価値があります。ここでのすべてのセレクター機能は、$$ メソッドを通じて実装できます。
W3C セレクター
MooTools では、擬似セレクターの力を利用することもできます (上記の Slickspeed で実証されているように)。これは、セレクター
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7466
15
1376
52
77
11
18
19
Vue3 で DOM ノードを取得する方法は何ですか?
May 11, 2023 pm 04:55 PM
1. ネイティブ js は DOM ノードを取得します。 document.querySelector (セレクター) document.getElementById (id セレクター) document.getElementsByClassName (クラス セレクター).... 2. vue2 で現在のコンポーネントのインスタンス オブジェクトを取得します。コンポーネント インスタンスには、対応する DOM 要素またはコンポーネントへの参照を保存する $refs オブジェクトが含まれています。したがって、デフォルトでは、コンポーネントの $refs は空のオブジェクトを指します。まず ref="name" をコンポーネントに追加してから、this.$refs を渡します。
:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。
Nov 20, 2023 am 11:20 AM
:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。具体的なコード例は次のとおりです。 HTML コード: <divid="container" ><divclass="item"> ;最初の子要素</div><divclass="item"&
PHP での DOM 操作ガイド
May 21, 2023 pm 04:01 PM
Web 開発において、DOM (DocumentObjectModel) は非常に重要な概念です。これにより、開発者は要素の追加、削除、変更など、Web ページの HTML または XML ドキュメントを簡単に変更および操作できるようになります。 PHP に組み込まれている DOM 操作ライブラリも開発者向けに豊富な機能を提供していますので、この記事では、皆様のお役に立てればと思い、PHP での DOM 操作ガイドを紹介します。 DOM の基本概念 DOM は、クロスプラットフォームで言語に依存しない API です。
vue3 で dom またはコンポーネントへの ref バインディングが失敗する理由とその解決方法は何ですか?
May 12, 2023 pm 01:28 PM
Vue3ref バインディング DOM またはコンポーネントの失敗理由分析シナリオの説明 Vue3 では、コンポーネントまたは DOM 要素をバインドするために ref を使用することがよくありますが、関連するコンポーネントをバインドするために ref が明確に使用されていることがよくありますが、ref バインディングが失敗することがよくあります。 ref バインディングが失敗する状況の例 ref バインディングが失敗するほとんどのケースは、ref がコンポーネントにバインドされているときにコンポーネントがまだレンダリングされていないため、バインディングが失敗することです。または、コンポーネントが最初にレンダリングされず、ref がバインドされていない場合、コンポーネントのレンダリングが開始されると、ref もバインドされ始めますが、ref とコンポーネントの間のバインディングが完了していません。このとき、問題が発生します。コンポーネント関連のメソッドを使用する場合。 ref にバインドされたコンポーネントが v-if を使用するか、その親コンポーネントが v-if を使用してページに
JavaScript セレクターが失敗した場合の対処方法
Feb 10, 2023 am 10:15 AM
コードが標準化されていないため、JavaScript セレクターが失敗します。解決策は、 1. インポートされた JS コードを削除すると、ID セレクター方式が有効になります。 2. 「jquery.js」を導入する前に、指定された JS コードを導入するだけです。
dom オブジェクトと bom オブジェクトとは何ですか?
Nov 13, 2023 am 10:52 AM
DOM オブジェクトは「ドキュメント」、「要素」、「ノード」、「イベント」、「ウィンドウ」の 5 つ、2.「ウィンドウ」、「ナビゲーター」、「場所」、「履歴」、「画面」、その他 5 つです。 BOM オブジェクト。
初心者から熟練者まで: is セレクターと where セレクターの使用スキルをマスターする
Sep 08, 2023 am 09:15 AM
初心者から上級者まで: is および where セレクターの使用スキルをマスターする はじめに: データの処理と分析のプロセスにおいて、セレクターは非常に重要なツールです。セレクターを使用すると、特定の条件に従ってデータセットから必要なデータを抽出できます。この記事では、読者がこれら 2 つのセレクターの強力な機能をすぐに習得できるように、is および where セレクターの使用スキルを紹介します。 1. is セレクターの使用 is セレクターは、与えられた条件に基づいてデータセットを選択できるようにする基本的なセレクターです。
is および where セレクターの詳細な分析: CSS プログラミング レベルの向上
Sep 08, 2023 pm 08:22 PM
is および where セレクターの詳細な分析: CSS プログラミングのレベルの向上 はじめに: CSS プログラミングのプロセスにおいて、セレクターは不可欠な要素です。これにより、特定の基準に基づいて HTML ドキュメント内の要素を選択し、スタイルを設定することができます。この記事では、一般的に使用される 2 つのセレクター、つまり is セレクターと where セレクターについて詳しく説明します。その動作原理と使用シナリオを理解することで、CSS プログラミングのレベルを大幅に向上させることができます。 1. is selector is selector は非常に強力な選択肢です
