jQuery DOM 操作の完全ガイド: Web ページ要素の正確な取得
网页要素を楽々操作したいですか？このガイドでは、jQueryを使ったDOM取得方法について、基本的なセレクタから高度なフィルタリングまで詳しく解説し、目的の要素を精准に特定し、网页インタラクションの可能性を広げるお手伝いをします！
一、基本セレクタ：目的の要素を素早くロック
-
IDセレクタ
要素の固有IDで素早く位置を特定します。例：
$("#elementId") -
クラスセレクタ
特定のクラス名を持つすべての要素を選択します。例：
$(".className") -
タグセレクタ
すべての指定されたタイプのHTMLタグを選択します。例：
$("p")はすべての段落要素を選択します。
二、階層セレクタ：ネストされた要素を正確に指定
-
子要素セレクタ
指定された親要素の直下の子要素を選択します。例：
$("#parent > .child") -
子孫要素セレクタ
指定された親要素のすべての子孫要素を選択します。例：
$("#parent .descendant") -
隣接兄弟セレクタ
指定された要素の直後にある兄弟要素を選択します。例：
$("#target + .sibling") -
汎用兄弟セレクタ
指定された要素の後にあるすべての兄弟要素を選択します。例：
$("#target ~ .sibling")
三、属性セレクタ：属性に基づいて要素をフィルタリング
-
完全一致属性セレクタ
特定の属性と値を持つ要素を選択します。例：
$("input[type='text']") -
あいまい属性セレクタ
-
属性存在セレクタ
特定の属性を持つ要素を選択します。例：
$("input[type]") -
属性値開始セレクタ
属性値が特定の文字列で始まる要素を選択します。例：
$("a[href^='https']") -
属性値終了セレクタ
属性値が特定の文字列で終わる要素を選択します。例：
$("img[src$='.jpg']") -
属性値部分一致セレクタ
属性値に特定の文字列を含む要素を選択します。例：
$("div[class*='active']")
-
四、コンテンツセレクタ：コンテンツに基づいて正確に位置特定
-
指定されたテキストを含む要素
指定されたテキストを含む要素を選択します。例：
$("p:contains('jQuery')") -
空要素
子要素またはテキストコンテンツを持たない要素を選択します。例：
$("div:empty") -
子要素またはテキストコンテンツを持つ要素
子要素またはテキストコンテンツを持つ要素を選択します。例：
$("div:parent")
五、可視性セレクタ：可視要素をすばやく操作
-
可視要素
現在可視の要素を選択します。例：
$("div:visible") -
非表示要素
現在非表示の要素を選択します。例：
$("div:hidden")
六、インデックスセレクタ：特定の位置の要素を正確に選択
-
最初の要素
最初に一致した要素を選択します。例：
$("li:first") -
最後の要素
最後に一致した要素を選択します。例：
$("li:last") -
指定されたインデックスの要素
指定されたインデックス位置の要素を選択します。例：
$("li:eq(2)")は3番目のリスト項目を選択します。
七、フォームセレクタ：フォーム要素を簡単に操作
-
フォーム要素
すべてのフォーム要素を選択します。例：
$("input, select, textarea") -
特定のタイプのフォーム要素
特定のタイプのフォーム要素を選択します。例：
$(":text")はすべてのテキストボックスを選択します。 -
選択状態の要素
現在選択されているフォーム要素を選択します。例：
$(":checked")
八、応用テクニック：セレクタの柔軟な組み合わせ
-
複数セレクタ
カンマで区切って複数のセレクタを使用し、すべての一致する要素を選択します。例：
$("#id, .class, div") -
選択済み要素のフィルタリング
選択済み要素に基づいてさらにフィルタリングします。例：
$("div").find("p")
jQuery DOM 取得方法を学ぶことで、Web ページ要素を正確に配置および操作し、動的なインタラクティブ Web ページを構築するための強固な基盤を築くことができます。
例：属性セレクタを用いたテーブルの操作
<table>
<tr>
<th>名前</th>
<th data-sort-type="number">年齢</th>
</tr>
<tr>
<td>田中</td>
<td>30</td>
</tr>
</table>
上記のテーブルで、data-sort-type="number" 属性を持つth要素を選択するには、以下のように記述します。
$("th[data-sort-type='number']")
参考文献
よくある質問
- Q: jQuery で要素のスタイルを変更するにはどうすればよいですか？
- A:
.css()メソッドを使用します。例：$("p").css("color", "red");は、すべてのパラグラフのテキストの色を赤に変更します。 - Q: jQuery で要素のクラスを追加/削除するにはどうすればよいですか？
- A:
.addClass()メソッドと.removeClass()メソッドを使用します。例：$("div").addClass("active");は、すべてのdiv要素に "active" クラスを追加します。 - Q: jQuery で要素のコンテンツを取得/設定するにはどうすればよいですか？
- A:
.html()メソッドまたは.text()メソッドを使用します。例：$("h1").html();は、最初のh1要素のHTMLコンテンツを取得します。
その他の参考記事:jquery dom 変換