ホームページ > 記事 > ウェブフロントエンド > 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]
と同等です。
eq()
和get()
。
这里的索引器类似于房间的门牌号,所不同的是,门牌号是从1开始计数的,而索引器是从0开始计数的。
在本实例中使用了两种方法设置元素的文本内容,html()
方法是jQuery的方法,innerHTML方法是DOM对象的方法。
这里还用了$(document).ready()
方法,当页面元素载入就绪的时候就会自动执行程序,自动为按钮绑定单击事件。
eq()
方法返回的是一个jQuery包装集,所以它只能调用jQuery的方法,而get()
方法返回的是一个DOM对象,所以它只能用DOM对象的方法。
eq()
方法与get()
方法默认都是从0开始计数。
$("#test").get(0)
等效于$("#test")[0]
推奨書籍:
以上がjQueryで要素セレクターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。