【jQuery入門】基本セレクターで目的の要素を取り出す

特定の要素を取り出す

要素（タグ）名で要素を取り出すには、$('要素名')のように目的の要素名を指定する。

以下は、bタグの背景色を変更するサンプル。

<ul id="list">
  <li class="jquery">
    <b>jQuery</b>
  </li>
  <li class="js">JavaScript</li>
  <li class="css">CSS</li>
</ul>

$(function () {
  $('b').css('background-color', '#ccf')
});

See the Pen
Untitled by shinjiezumi (@sezumi)
on CodePen.

idで要素を取り出すには、$('#id名')のように先頭に#を指定する。

以下は、id値がtitleの背景色を変更するサンプル。

<h3 id="title">jQueryとは</h3>
[<a href="https://jquery.com/">本家サイト</a>]
<p>
  jQueryはJavascriptの<span>ライブラリ</span>です。
</p>

$(function () {
  $("#title").css("background-color", "#fcf");
});

See the Pen
Untitled by shinjiezumi (@sezumi)
on CodePen.

クラスで要素を取り出すには、$('.要素名')のように先頭に.を指定する。

<ul>
  <li class="sample3-item">ほげ</li>
  <li class="sample3-item">ふが</li>
  <li class="sample3-item">ふがふが</li>
</ul>

$(function () {
  $(".sample3-item").css("background-color", "#ddd");
});

See the Pen
Untitled by shinjiezumi (@sezumi)
on CodePen.

いずれの場合もカンマで区切って列挙することができる

<ul>
  <li class="sunny">晴れ</li>
  <li class="cloudy">曇り</li>
  <li class="rain">雨</li>
</ul>

$(function () {
  $(".sunny, .rain").css("font-weight", "bold");
}

See the Pen
Untitled by shinjiezumi (@sezumi)
on CodePen.

階層セレクターを利用することで、要素の親子／兄弟関係で要素を特定できるようになり、より目的の要素を絞り込みやすくなる

ある要素hogeの配下にある要素fugaを表すには、$(hoge fuga)のように、セレクターの間をスペースで区切る

<ul id="sample5-list">
  <li class="item">ほげ</li>
  <li class="item">ふが</li>
  <li class="item">ふがふが</li>
</ul>

$(function () {
  $("#sample5-list .item").css("background-color", "#ef3");
}

See the Pen
jQuery1-5 by shinjiezumi (@sezumi)
on CodePen.

ある要素parentの配下にある要素childを表すには、$(parent > child)と記述する

<div id="sample6-block">
  <p>ほげほげ</p>
  <div>
    <!-- div要素の配下 -->
    <p>ふがふが</p>
  </div>
</div>

$(function () {
  $("#sample6-block > p").css("background-color", "#ef3eee"); // 直下のpタグのみ検索対象になる
});

See the Pen
jQuery1-6 by shinjiezumi (@sezumi)
on CodePen.

目的がはっきりしているのであれば、できるだけ検索範囲を狭めて検索効率を良くすること

ある要素prevの次に登場する要素nextを取り出すには、$(prev + next)と記述する

<ul>
  <li id="php">PHP</li>
  <li id="python">Python</li>
  <li id="go">Go</li>
</ul>

$(function () {
  $("#python + li").css("background-color", "#0dF");
}

See the Pen
jQuery1-7 by shinjiezumi (@sezumi)
on CodePen.

ある要素prevの以降に登場する要素siblingsのすべてを取り出すには、$(prev ~ siblings)と記述する

<ul>
  <li id="aws">AWS</li>
  <li id="gcp">GCP</li>
  <li id="azure">Azure</li>
</ul>

$(function () {
  $("#aws ~ li").css("background-color", "#0dF");
});

See the Pen
jQuery1-8 by shinjiezumi (@sezumi)
on CodePen.

東京でフリーランスのWebエンジニアやっています。今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。当面の目標はDevOps寄りのオールラウンダー。