【jQuery入門 2】セレクタって何？要素を取得しよう。基本編

かめの

2016.03.29

フロントエンジニア

こんにちは、かめのです。
前回：【jQuery入門 1】超基本！ jQuery のダウンロードと書き方

前回はダウンロードや基本的な書き方などでした。

今回はjQueryのセレクタについてご紹介します。

目次
はじめに
セレクタとは？
セレクタの書き方
- html
- jQuery
さいごに
jQuery入門ガイド

はじめに

いきなりですが私の好きなスイーツをあげてみました。

抹茶わらびもち
黒蜜わらびもち
きなこわらびもち

抹茶ケーキ
チョコレートケーキ
チーズケーキ

とくに「抹茶味」が好きなので「抹茶味」だけを強調してみたいと思います。

DEMO 01 : 「抹茶味」の色が変わる

セレクタとは？

セレクタとはjQueryを記述するときに$()の中に記述する要素のことです。
CSSのセレクタの書き方とほぼ同じです。

[sourcecode lang="javascript"]
$('.demo').css(...
[/sourcecode]

[sourcecode lang="javascript"]

$('.demo').css(...

[/sourcecode]

今回はIDとクラスを指定する方法でやってみます。

DEMO 01ではわらびもちとケーキの「抹茶味」の色が変わりました。
次はわらびもちの「抹茶味」だけ色を変えてみたいと思います。

DEMO 02 : わらびもちの「抹茶味」だけ色が変わる

セレクタの書き方

それではさっそく書いてみましょう。

html

[sourcecode lang="html"]
<ul id="warabi">
	<li class="maccha">抹茶わらびもち</li>
	<li class="kuromitsu">黒蜜わらびもち</li>
	<li class="kinako">きなこわらびもち</li>
</ul>
[/sourcecode]

[sourcecode lang="html"]

<li class="maccha">抹茶わらびもち</li>

<li class="kuromitsu">黒蜜わらびもち</li>

<li class="kinako">きなこわらびもち</li>

</ul>

[/sourcecode]

[sourcecode lang="html"]
<ul id="cake">
	<li class="maccha">抹茶ケーキ</li>
	<li class="chocolate">チョコレートケーキ</li>
	<li class="cheese">チーズケーキ</li>
</ul>
[/sourcecode]

[sourcecode lang="html"]

<li class="maccha">抹茶ケーキ</li>

<li class="chocolate">チョコレートケーキ</li>

<li class="cheese">チーズケーキ</li>

</ul>

[/sourcecode]

jQuery

[sourcecode lang="javascript"]
$(function() {
	// 「抹茶味」の色を変える(DEMO 01)
	$('.maccha').css('color', '#f2639c');
	// わらびもちの「抹茶味」の色だけを変える(DEMO 02)
	$('#warabi .maccha').css('color', '#f2639c');
});
[/sourcecode]