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をもとに対象要素を選択します。
#の後に続けて書けば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