検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryを使用したDOMセレクションの初心者ガイド

jqueryを使用したDOMセレクションの初心者ガイド

Jennifer Aniston
Jennifer Anistonオリジナル
2025-02-22 10:41:09588ブラウズ

Beginners Guide to DOM Selection with jQuery

フロントエンドの開発者またはデザイナーとして、毎日のプロジェクトでドキュメントオブジェクトモデル（DOM）を使用する必要があります。近年、JavaScriptテクノロジーの改善により、要素を選択し、DOMで動的関数を適用することがますます一般的になっています。したがって、競合を回避し、パフォーマンスを最適化するために、DOM要素を使用するという知識を習得する必要があります。 jQueryは、高度なDOMの選択とフィルタリング機能を備えた最も人気があり、一般的に使用されるJavaScriptライブラリの1つです。この記事では、jQueryの助けを借りて実際のシナリオを検討して、DOM要素をフィルタリングする方法について説明します。始めましょう。

キーポイント

  • jQueryは、高度なDOM選択とフィルタリング機能を提供する一般的に使用されるJavaScriptライブラリです。フロントエンドの開発者にとっては、競合を回避し、パフォーマンスを最適化するために、DOM要素を深く理解することが重要です。
  • HTML要素タグ、ID、クラス、およびデータ属性は、DOMツリー内の要素を選択するために使用されます。 IDは一意の識別子であり、クラスは要素のスタイルとフィルタリングおよび選択のために使用され、データ属性は要素のプライベートデータを定義します。
  • jQueryを使用すると、一意の要素を選択し、クラスを備えた複数の要素の選択、複数のクラスを持つ要素の選択、データ属性を持つ要素の選択、複数のデータ属性を持つ要素を選択できます。同じIDを持つ要素の重複を防ぎ、選択と機能の目的のためにスタイルクラスを区別することが重要です。

ID、クラス、およびデータ属性の紹介

通常、HTML要素タグ、ID、クラス、およびデータ属性を使用して、DOMツリー内の要素を選択します。ほとんどの開発者は、選択にHTMLタグを使用することに精通しています。ただし、初心者は、さまざまなシナリオで正確な意味と必要性を知らずに、ID、クラス、およびデータ属性を誤用することがよくあります。したがって、実際のシナリオに入る前に、最初にこれら3つのオプションのそれぞれを決定しましょう。

  • id - ドキュメント内の一意の識別子として使用されます。したがって、たとえ可能であっても、複数の要素に同じIDを使用しないでください。通常、要素IDを使用して、jQueryを使用して要素を選択します。
  • クラス - CSSを使用した要素のスタイルに使用します。ただし、通常、クラスは、IDをフィルタリングできない場合に要素をフィルタリングおよび選択するために使用されます。
  • データ属性 - 要素のプライベートデータを定義するために使用されます。フロントエンド関数で必要なすべてのデータを保存するために、単一の要素の複数のデータ属性を設定できます。
ID、クラス、およびデータ属性を使用した実用的なシナリオ

シーン1 - ドキュメントの一意の要素を選択

これは、任意の要素を選択するために使用する最も基本的で一般的なシナリオです。検証のフォーム値を選択することは、このようなシナリオの良い例と見なすことができます。次のjQueryコードに示すように、HTML要素IDを使用して要素を選択します。 

<code class="language-javascript">$("#elementID").val();</code>
この方法を使用する場合、同じIDを持つ要素の重複を防ぐことが重要です。

シーン2 - クラスを使用して複数の要素を選択します 通常、ドキュメント内の複数の要素をフィルタリングする場合、クラス属性を使用します。 IDとは異なり、同じCSSクラスで複数の要素を使用できます。通常、これらのタイプの類似要素はループによって生成されます。以下のHTMLコードに示すように、ユーザーデータを含むレコードのリストがあるとします。ユーザーがクリックしてレコードを削除できる「削除」ボタンがあります。

今、類似の要素の複数のインスタンスがあるため、IDを使用して正確なレコードをフィルタリングすることはできません。指定されたCSSクラスを使用して行をフィルタリングする方法を見てみましょう。 

<code class="language-html"><table>
  <tr>
<td>Mark</td>
<td><button type="button" class="user_data" value="Delete"></button></td>
</tr>
  <tr>
<td>John</td>
<td><button type="button" class="user_data" value="Delete"></button></td>
</tr>
  <tr>
<td>Mike</td>
<td><button type="button" class="user_data" value="Delete"></button></td>
</tr>
</table></code>

前のコードでは、行変数には、クラスuser_dataの3行すべてが含まれます。次に、クラスセレクターを使用してボタンをクリックするときに行を削除する方法を見てみましょう。 

<code class="language-javascript">var rows = $(".user_data");</code>
この手法では、すべての一致する要素を反復し、クリックされるボタンを指す$（この）オブジェクトを使用して現在のプロジェクトの関数を実行します。これは、複数の要素を扱うために最も広く使用されている方法です。次に、このようなシナリオで初心者の開発者によくある間違いを見てみましょう。 

<code class="language-javascript">$(".user_data").click(function(){
  $(this).parent().parent().remove();
});</code>

class

    の代わりにIDを使用します
  • 開発者がループで同じIDを使用して、クラスの代わりに同様のHTMLコードを生成するケースがたくさんあります。同じIDが使用されると、最初の要素にのみ影響します。残りの要素は、予想どおりに機能しません。したがって、ループに動的IDを作成し、要素選択にクラス名を使用してください。

$（この）オブジェクトの代わりにクラス名を使用します

  • 多くの初心者開発者が犯すもう1つの間違いは、コンテキストと現在のオブジェクトの使用に関する理解の欠如です。複数の要素を繰り返すと、jQuery $（this）を使用して現在の要素を参照できます。多くの開発者は、ループでクラス名を使用するため、期待される結果を得ることができません。したがって、次のコードに示すように、クラス名をループで使用しないでください。
    • これは、要素を選択するための広く使用されている方法であるため、この方法を効果的に使用する方法を理解することが重要です。 CSSクラスは、スタイルの目的で使用されます。しかし、ここでは、要素の選択目的で使用します。選択目的でCSSクラスを使用することは、それを行うための最良の方法ではありません。レイアウトの競合につながる場合があります。たとえば、チームと協力する場合、開発者はCSSクラスのみを使用してJQueryに動的機能を提供する場合があります。デザイナーは、これらのクラスがスタイリングの目的で使用されていないことに気付くかもしれないので、それらの重要性を知らずにそれらを削除することが可能です。したがって、スタイル目的ではなく、さまざまな機能にのみ使用されるCSSクラスには、いくつかのプレフィックスを使用することが最善です。

シーン3 - 複数のクラスを使用して要素を選択します
<code class="language-javascript">$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});</code>

一部のアプリケーションとWebサイトは、JavaScriptに大きく依存しており、非常に動的なクライアント機能を提供します。この場合、多数のクラスとIDを使用して、関数をフィルタリング、選択、適用する場合があります。役割に応じてクライアントにフィルタリングする必要があるユーザーレコードのリストがあるとします。フィルタリングプロセスを簡素化するために、役割をCSSクラスとして定義できます。次のコードスニペットを検討してください：

<code class="language-javascript">$("#elementID").val();</code>

開発者とデザイナーの両方の役割を持つユーザーを獲得したいとします。この場合、次のコードに示すように、複数のCSSクラスを使用できます。 

<code class="language-html"><table>
  <tr>
<td>Mark</td>
<td><button type="button" class="user_data" value="Delete"></button></td>
</tr>
  <tr>
<td>John</td>
<td><button type="button" class="user_data" value="Delete"></button></td>
</tr>
  <tr>
<td>Mike</td>
<td><button type="button" class="user_data" value="Delete"></button></td>
</tr>
</table></code>
同じ要素の複数のクラスを1つずつ一致させるために、任意の数のクラスを使用できます。選択の意味と結果を変えるため、クラス間のスペースを使用しないようにしてください。スペースを持つ同じコードの行を考えてみましょう：

<code class="language-javascript">var rows = $(".user_data");</code>
コードは、開発者と呼ばれる親要素を持つデザイナーを探します。したがって、これら2つの実装の違いに慣れ、賢明に使用してください。同様に、この手法を使用するときにIDとクラスを混合できます。

シーン4 - データ属性を使用して要素を選択します

HTML5は、HTML要素に関連するデータを定義できるカスタムデータプロパティを導入します。これらのデータ属性には特定の一連の規則があり、プライベートデータと見なされます。そのため、データ属性を使用して、複数のAJAX要求をサーバーに作成する代わりに、任意の要素に関連するデータを保存できます。 CSSクラスの代わりにカスタムデータプロパティを使用してシナリオ2を実装する方法を見てみましょう。 

<code class="language-javascript">$(".user_data").click(function(){
  $(this).parent().parent().remove();
});</code>
ご覧のとおり、CSSクラスの代わりにデータプロパティを使用して同じ結果を得ることができます。 jQueryは、カスタムデータ属性をサポートする高度な属性セレクターを提供します。カスタムプロパティのいくつかの高度なセレクターオプションを考えてみましょう。ユーザーメールをカスタムプロパティとして保存し、電子メールの特定の基準に基づいてユーザーを選択する必要があるとします。データプロパティを使用して、次のコードスニペットを検討してください

電子メールに「gmail」を含む要素を選択
<code class="language-javascript">$(".user_data").click(function(){
  $(".user_data").parent().parent().remove();
});</code>

「英国」のメールアドレスを持つ要素を選択します
<code class="language-html"><ul>
  <li class="role-developer role-designer">Mark</li>
  <li class="role-developer">Simon</li>
  <li class="role-developer role-manager">Kevin</li>
</ul></code>

「@」シンボルなしで無効な電子メールの要素を選択します
<code class="language-javascript">var selected_users = $('.role-developer.role-designer');</code>

ご覧のとおり、データ属性はHTML要素に関連するデータの処理において強力であり、jQueryは組み込み機能を通じて包括的なサポートを提供します。完全なプロパティセレクターリファレンスは、
<code class="language-javascript">var selected_users = $('.role-developer .role-designer');</code>
https://www.php.cn/link/2705e8fde87cd2883e9fc1f0035685f

で見つけることができます。

シーン5 - 複数のデータ属性を使用して要素を選択

これは、シーン3で説明したものと似ており、いくつかの拡張機能があります。高度なシナリオでは、CSSクラスを使用して複数のデータ値を処理することは複雑になる可能性があります。それでは、選択に複数のデータ属性を使用する方法を見てみましょう。 

<code class="language-javascript">$("#elementID").val();</code>

ここでは、複数のデータ属性の存在を確認し、部分的な検索値を介して選択できます。これで、要素選択におけるCSSクラスとデータ属性の違いを理解できるはずです。データ属性は、元素データの処理を整理する方法を提供します。ここで説明する手法は、あらゆる種類の高度な状況を満たすために他のjQueryフィルターと組み合わせて使用​​できます。賢明に使用することが重要です。

概要

この記事は、初心者が要素ID、クラス、およびカスタムデータプロパティの基本を理解できるようにすることを目的としています。 jQueryビルトイン関数の助けを借りて、実際のシナリオを通じてそれぞれについて説明します。その過程で、初心者の開発者からのいくつかのエラーも特定しました。この記事で説明した重要なポイントを確認して、有用なDOM選択ガイドを作成しましょう。

    要素選択に可能な場合はいつでもIDを使用します。これは、ドキュメントに一意の識別子を提供するためです。
    • 要素IDに依存する代わりに、複数の要素シナリオでクラスまたはデータ属性を使用します。
    • 選択と機能の目的のために、スタイルクラスとクラスを区別してください。
  • クラスは要素に関するデータを提供することを意図していないため、複雑なシナリオでデータ属性を使用します。
    • この記事が要素の選択の良い紹介を提供できることを願っています。より良いガイドと要素の選択技術がある場合は、コメントセクションでお気軽に共有してください。

jquery dom選択（FAQ）

に関するFAQ jQueryのドキュメントオブジェクトモデル（DOM）は何ですか？

jQueryのドキュメントオブジェクトモデル（DOM）は、HTMLおよびXMLドキュメントのプログラミングインターフェイスです。ドキュメントの構造を表し、コンテンツと構造を操作する方法を提供します。 DOMを使用して、プログラマーはHTMLおよびXMLドキュメントで要素とコンテンツを作成、ナビゲート、および変更できます。

jQueryのDOM操作を簡素化する方法は？

JQueryは、イベントを処理し、アニメーションを作成し、Ajaxアプリケーションを開発するための使いやすいAPIを提供することにより、DOM操作を簡素化します。 jQueryは、DOMをナビゲートおよび操作するためのシンプルな構文も提供します。生のJavaScriptとDom APIを処理する多くの複雑さを抽象化し、開発者がHTMLドキュメントを簡単に使用できるようにします。

jQueryのDOMセレクターのさまざまなタイプは何ですか？

jQueryには、要素セレクター、IDセレクター、クラスセレクター、属性セレクター、擬似クラスセレクターなど、いくつかのタイプのDOMセレクターがあります。要素セレクターは、要素名に基づいて要素を選択します。 IDセレクターは、ID属性に基づいて要素を選択します。クラスセレクターは、クラス属性に基づいて要素を選択します。属性セレクターは、属性または属性値に基づいて要素を選択します。擬似クラスセレクターは、特定の状態に基づいて要素を選択します。

jQueryでIDで要素を選択する方法は？

jQueryのIDで要素を選択するには、ポンドサイン（＃）に続いて要素のIDを使用します。たとえば、ID「MyElement」を持つ要素を選択するには、$（ "＃myElement"）を使用します。

jqueryのクラスで要素を選択する方法は？

jQueryでクラスで要素を選択するには、Dot Notation（。）に続いてクラス名を使用します。たとえば、クラス「myclass」を持つ要素を選択するには、$（ "。myclass"）を使用します。

jQueryのプロパティセレクターとは何ですか？それらはどのように機能しますか？

jQueryの属性セレクターは、その属性または属性値に基づいて要素を選択します。それらは正方形の括弧（[]）で書かれています。たとえば、「data-example」属性を持つすべての要素を選択するには、$（ "[data-example]"）を使用します。

jQueryで複数の要素を選択する方法は？

各セレクターをコンマで分離することにより、jQueryの複数の要素を選択できます。たとえば、クラス「MyClass」を持つすべての要素とID「MyID」を持つすべての要素を選択するには、$（ "。myclass、#myid"）を使用します。

jQueryの擬似クラスセレクターとは何ですか？

jQueryの擬似クラスセレクターは、特定の状態に基づいて要素を選択します。たとえば、「：チェックされた」擬似クラスセレクターは、選択したすべてのチェックボックスまたはラジオボタンを選択します。

jqueryを使用してdomを操作する方法は？

jQueryは、.append（）、.prepend（）、.after（）、.before（）、.remove（）、および.empty（）など、domを操作するためのいくつかの方法を提供します。これらのメソッドを使用すると、DOMに要素を挿入、交換、削除できます。

jQueryはdomのイベントをどのように処理しますか？

jQueryは、.click（）、.dblclick（）、.hover（）、.mousedown（）、.mouseup（）、.mousemove（）、.mouseout（）など、DOMでイベントを処理する方法を提供します。 。 。これらの方法により、これらのイベントがDOMの要素で発生したときに何が起こるかを定義することができます。

以上がjqueryを使用したDOMセレクションの初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html5 jquery css ajax html xml 标识符 循环 接口 Attribute append 对象 事件 dom this 选择器 伪类 http
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：evalを使用せずに文字列からJavaScript関数を呼び出す方法次の記事：evalを使用せずに文字列からJavaScript関数を呼び出す方法

関連記事

続きを見る