jQueryで要素セレクターを使用する方法

今回はjQueryでの要素セレクターの使い方と、jQueryで要素セレクターを使用する際の注意点を紹介します。実際の事例を見てみましょう。

1. はじめに

要素セレクターは、要素名に基づいて対応する要素を照合します。

平たく言えば、要素セレクターは DOM 要素のタグ名を指します。これは、要素セレクターが要素のタグ名に基づいて選択することを意味します。

要素のタグ名は、学校に「Liu Wei」という名前の生徒が複数いる可能性がありますが、「Wu Yu」という名前の生徒は 1 人だけである可能性があるため、要素セレクターは次のようになります。複数の要素がある場合もあれば、1 つの要素がある場合もあります。

ほとんどの場合、要素セレクターは要素のグループと一致します。

要素セレクターの使用方法は次のとおりです:

$("element");

ここで、 element はクエリ対象の要素のタグ名です。

たとえば、すべての p 要素をクエリするには、次の jQuery コードを使用できます。

$("p");

2. アプリケーション

2 つの

タグとボタンをページに追加し、クリックしてそれらを取得します。これら 2 つの

ボタンを押して、その内容を変更します。

3. Code 5. 操作説明

上記のコードでは、要素セレクターを使用して、p 個の要素の jQuery パッケージ化セットを取得していますが、これは Object オブジェクトのセットであり、[Object Object] に格納されていますが、このメソッドでは取得できません。個々の要素のテキスト情報を表示するには、どの p 要素を選択するかを決定するインデクサーが必要です。ここでは、2 つの異なるインデクサー eq() と get() が使用されます。 ここでのインデクサーは、部屋の家番号に似ています。違いは、家番号が 1 からカウントし始めるのに対し、インデクサーは 0 からカウントし始めることです。 この例では、要素のテキスト コンテンツを設定するために 2 つのメソッドが使用されています。html() メソッドは jQuery メソッドで、innerHTML メソッドは DOM オブジェクト メソッドです。

ここでも $(document).ready() メソッドが使用されており、ページ要素がロードされると、プログラムが自動的に実行され、クリック イベントが自動的にボタンにバインドされます。

eq() メソッドは jQuery ラッパー セットを返すため、jQuery メソッドのみを呼び出すことができますが、get() メソッドは DOM オブジェクトを返すため、呼び出すことができるのは jQuery メソッドのみですDOM オブジェクトのメソッドを使用します。

eq() メソッドと get() メソッドはどちらもデフォルトで 0 からカウントを開始します。 $("#test").get(0) は $("#test")[0] と同等です。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

eq()和get()。

这里的索引器类似于房间的门牌号，所不同的是，门牌号是从1开始计数的，而索引器是从0开始计数的。

在本实例中使用了两种方法设置元素的文本内容，html()方法是jQuery的方法，innerHTML方法是DOM对象的方法。

这里还用了$(document).ready()方法，当页面元素载入就绪的时候就会自动执行程序，自动为按钮绑定单击事件。

eq()方法返回的是一个jQuery包装集，所以它只能调用jQuery的方法，而get()方法返回的是一个DOM对象，所以它只能用DOM对象的方法。

eq()方法与get()方法默认都是从0开始计数。

$("#test").get(0)等效于$("#test")[0]推奨書籍:

JS の一般的な組み込み関数の使用方法の詳細な説明

データ転送に vue コンポーネントを使用する方法

以上がjQueryで要素セレクターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。