SONICMOOV Googleページ

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

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

  • このエントリーをはてなブックマークに追加

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

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

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

はじめに

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

  • 抹茶わらびもち
  • 黒蜜わらびもち
  • きなこわらびもち
  • 抹茶ケーキ
  • チョコレートケーキ
  • チーズケーキ

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

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

セレクタとは?

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

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

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

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

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

書いてみる

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

html

<ul id="warabi">
	<li class="maccha">抹茶わらびもち</li>
	<li class="kuromitsu">黒蜜わらびもち</li>
	<li class="kinako">きなこわらびもち</li>
</ul>
<ul id="cake">
	<li class="maccha">抹茶ケーキ</li>
	<li class="chocolate">チョコレートケーキ</li>
	<li class="cheese">チーズケーキ</li>
</ul>

jQuery

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

DEMO 01では.macchaクラスだけがセレクタに指定されています。
そのためわらびもちとケーキについている.macchaクラスが対象となります。

DEMO 02では.macchaクラスのほかにID#warabiがついているため#warabi内の.macchaクラスのみ対象となります。

さいごに

いかがでしたか?
クラスやIDはとても身近なものなので、セレクタを使うと選択範囲を指定できてとても便利ですね。

次回は機能的なセレクタの使い方をご紹介予定です。

こちらの関連記事も確認してみてください。
jQuery で要素を選択するためのセレクタの指定方法まとめ

第3回目はこちら。
【jQuery入門 3】要素を取得しよう。セレクタって何?機能的セレクタ編

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

かめの(マークアップエンジニア)

趣味は昼寝です。

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation