jQueryで要素を取得する方法まとめ【タグ名、id属性、class属性など】

jQuery タグ取得

jQueryは、HTML要素の操作を簡単に行えるJavaScriptライブラリです。特に、要素を取得する方法は多岐にわたり、様々な条件で目的の要素をピンポイントに選択することができます。この記事では、jQueryを使ってHTML要素を取得する方法を、初心者の方にもわかりやすく解説します。

1. タグ名で要素を取得する

特定のタグ名を持つ全ての要素を取得するには、$(tagName) を使用します。


// 全ての<p>タグを取得
$("p");

このコードでは、ページ内の全ての<p>タグが取得されます。同じタグ名が複数ある場合は、それら全てを含むjQueryオブジェクトが返されます。

特定のid属性を持つ要素を取得するには、$("#idSelector") を使用します。 id属性はページ内で一意であるため、この方法で取得できる要素は常に一つだけです。


// id="header"の要素を取得
$("#header");

このコードでは、id="header" が設定された要素が取得されます。

特定のclass属性を持つ全ての要素を取得するには、$(".classSelector") を使用します。


// class="example"の要素を全て取得
$(".example");

このコードでは、class="example" が設定された全ての要素が取得されます。要素は複数のclass属性を持つことができるため、この方法で複数の要素が取得されることがあります。

特定の属性を持つ全ての要素を取得するには、$("[attributeName]") を使用します。


// disabled属性を持つ全ての要素を取得
$("[disabled]");

このコードでは、disabled属性を持つ全ての要素が取得されます。属性値を指定して取得したい場合は、$("[attributeName='attributeValue']") を使用します。


// type属性が"text"であるinput要素を全て取得
$("input[type='text']");

複数のセレクタをスペース区切りで繋ぐことで、親子関係にある要素を取得することができます。


// id="menu"の要素の子要素である<li>タグを全て取得
$("#menu li");

このコードでは、id="menu" の要素の子要素のうち、<li>タグであるものだけが取得されます。

また、カンマ区切りで複数のセレクタを指定することで、複数の条件に合致する要素を全て取得することもできます。


// <p>タグと<div>タグを全て取得
$("p, div");

特定の順番の子要素を取得するには、:first-child, :last-child, :nth-child(n) を使用します。


// 最初の<li>タグを取得
$("li:first-child");

// 最後の<li>タグを取得
$("li:last-child");

// 3番目の<li>タグを取得
$("li:nth-child(3)");

要素の状態によって要素を取得するには、:visible, :hidden, :checked, :selected などを使用します。


// 表示されている要素のみを取得
$(":visible");

// 非表示の要素のみを取得
$(":hidden");

// チェックされているチェックボックスを取得
$(":checked");

// 選択されているオプションを取得
$(":selected");

上記の方法で取得したjQueryオブジェクトに対して、さらに絞り込み検索を行うことができます。例えば、find() メソッドを使えば、子孫要素からさらに条件に合致する要素を探すことができます。


// id="menu"の要素の子孫要素のうち、class="active"を持つ要素を取得
$("#menu").find(".active");

その他にも、filter() メソッドや siblings() メソッドなど、jQueryオブジェクトに対して様々な操作を行うことができます。

jQueryを使うことで、HTML要素を様々な条件で取得することができます。本記事で紹介した方法を組み合わせることで、さらに複雑な条件で要素を取得することも可能です。ぜひ、jQueryを使った効率的なDOM操作を習得してください。