本記事では、jQueryでid名・class名・タグ名・属性・入れ子要素を取得する方法について解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
要素を取得する方法
id名
id名で要素を取得するには以下のように記述します。
<p id="text">サンプル</p> <!-- ←この要素を取得したい！ -->$("#text")
// 実行結果：S.fn.init [p#text]ポイントはid名の前に付けている「#」の記号です。#はその後に続く文字列がid名であることを表しています。
id名が複数あった場合
HTMLの仕様上、id名は基本的に重複することが禁止されているため意図的に重複させることはありませんが、使われていると知らずに同じid名を付けてしまう可能性があります。
このような場合、一番初めに条件に一致した要素を取得します。下記のコードは同じid名が3つ存在した場合を想定したものです。
<div id="sample"></div>
<p id="sample"></p>
<span id="sample"></p>$("#sample")
// 実行結果：S.fn.init [div#sample]今回の場合、一番初めにidが指定されているdivタグが取得されていることが確認できます。
class名
class名で要素を取得するには以下のように記述します。
<ul class="list">
<!-- ↓3つの要素を取得したい！ -->
<li class="list__item">リスト1</li>
<li class="list__item">リスト2</li>
<li class="list__item">リスト3</li>
</ul>$(".list__item")
// 実行結果：S.fn.init(3) [li.list__item, li.list__item, li.list__item, prevObject: S.fn.init(1)]ポイントはclass名の前に付けている「.」の記号です。.はその後に続く文字列がclass名であることを表しています。
タグ名
タグ名で要素を取得するには以下のように記述します。
<!-- ↓divタグの要素を取得したい！ -->
<div class="content01">
<p>コンテンツ1</p>
</div>
<div class="content02">
<p>コンテンツ2</p>
</div>
<div class="content03">
<p>コンテンツ3</p>
</div>$("div")
// 実行結果：S.fn.init(3) [div.content01, div.content02, div.content03, prevObject: S.fn.init(1)]タグ名で要素を取得する場合、id名やクラス名のように検索したい文字列の前に記号は不要です。
属性&属性値
属性と属性値で要素を取得するには以下のように記述します。
<div>
<input type="text" placeholder="テキスト入力スペース" />
</div>
<div>
<label> <input type="checkbox" name="lang" value="html" />HTML </label>
<label> <input type="checkbox" name="lang" value="css" />CSS </label>
<label>
<input type="checkbox" name="lang" value="javascript" />JavaScript
</label>
</div>
<div>
<label>
<input type="radio" name="editor" value="Visual Studio Code" />Visual Studio Code</label>
<label> <input type="radio" name="editor" value="Atom" />Atom </label>
<label> <input type="radio" name="editor" value="Emacs" />Emacs </label>
</div>
<p class="text">テキスト1</p>
<p>テキスト2</p>/* ↓<input type="text">のみ取得！ */
$("input[type='text']")
// 実行結果：S.fn.init [input, prevObject: S.fn.init(1)]0: inputlength: 1prevObject: S.fn.init [document][[Prototype]]: Object(0)
/* ↓<input name="lang">のみ取得！ */
$("input[name='lang']")
// 実行結果：S.fn.init(3) [input, input, input, prevObject: S.fn.init(1)]
/* ↓pタグにクラスが付与されている要素の取得！ */
$("p[class]")
// 実行結果：S.fn.init [p.text, prevObject: S.fn.init(1)][]内に指定したい属性または、属性=属性値を記述します。気をつけるポイントは属性値を指定する時に、セレクタの全体に囲っている記号が「””(ダブルクォーテーション)」の場合、属性値を囲う記号は「”(シングルクォーテーション)」である必要があります。逆もまた然りで、セレクタの全体を囲っている記号が「”」だった場合、属性値を囲う記号は「””」でなければなりません。
入れ子
特定のタグの配下にある要素のみを取得するには以下のように記述します。
<!-- ↓content1内にあるliタグだけ取得したい！ -->
<ul class="content1">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<div>
<li>リスト4</li>
</div>
</ul>
<ul class="content2">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>$("ul.content1 li")
// 実行結果：S.fn.init(4) [li, li, li, li, prevObject: S.fn.init(1)]
$("ul.content1 > li")
// 実行結果：S.fn.init(3) [li, li, li, prevObject: S.fn.init(1)]記号の「>」は、直下の要素のみを対象としたい場合に使います。今回の例ですとulタグ内に4つliタグがありますが、一つはdivタグに囲われています。このようなシチュエーションで、>を使うとdivタグに囲われているliタグは対象から外れます。
