jQueryセレクタ | タグ名、クラス名、ID名を指定して要素を取得する


スポンサーリンク

目次


タグセレクター

タグセレクターは、要素(タグ)名をもとに対象要素を選択します。

以下のコードで、h2タグすべてを取得して、背景の色を黄色くしてみます。

$(function() {
  $("h2").css("background-color", "yellow");
});

以下のHTMLが対象です。

<h2>this is h2 tag</h2>
<p>
I love you. 今だけは悲しい歌 聞きたくないよ
</p>

<h2>this is second h2 tag</h2>
<p>
I love you. 逃れ逃れたどり着いたこの部屋
</p>

:Before
f:id:sho322:20141123102048j:plain

:After
f:id:sho322:20141123102055j:plain


クラスセレクター

クラスセレクターは、クラス名をもとに対象要素を選択します。

クラスセレクターの書き方は以下の通り。

$(function() {
  $(".ozaki").css("background-color", "yellow");
});

以下のHTMLが対象です。

<ul>
  <li class="ozaki">I love you</li>
  <li class="ozaki">15の夜</li>
  <li class="hide">ピンクスパイダー</li>
</ul>

:Before
f:id:sho322:20141123102104j:plain

:After
f:id:sho322:20141123102118j:plain

IDセレクター

IDセレクターは特定のIDをもとに対象要素を選択します。
#の後に続けて書けばOKです。

書き方はこんな感じ。

$(function() {
  $("#ozaki").css("background-color", "yellow");
});
<ul>
  <li id="ozaki">I love you</li>
  <li>15の夜</li>
  <li class="hide">ピンクスパイダー</li>
</ul>

:Before
f:id:sho322:20141123102125j:plain

:After
f:id:sho322:20141123102129j:plain


jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応