【入門】jQueryの書き方〜idとクラス〜

2020.02.08
2022.05.04
jQuery

jQueryのidとクラスの指定方法、書き方がわからない。。
どう書くのか教えて欲しい！

こういった疑問に答えていきます。
本日の内容は下記です。

【復習】idとクラスとは
jQueryのidとクラスの書き方
idとクラスの使い分け

jQueryを使うと、HTMLやCSSで書いたコードに、動き（アニメーション）をつけることができます。

例えば、メニューをクリックしたときに、ドロップダウンで表示させたり、スクロール時に要素を表示させたりできます。

今回は、jQueryでその要素を指定する方法を紹介していきます。
では早速やっていきましょう！

1. jQueryのidとクラスの書き方
2. まとめ

jQueryのidとクラスの書き方

【復習】idとクラスとは？

idとクラスとは、HTMLタグに名前をつける方法です。
詳しくはこちらの記事で解説しているので、そちらをご覧ください。

【入門】HTMLの書き方　〜class・id〜

idとクラスの書き方

では、jQueryのidとクラスの書き方について解説していきます。
jQueryでidとクラスを指定する場合は、下のように書きます。

$(function(){
　　//idの書き方
   $('#id名').メソッド;

　　//クラスの書き方
   $('.クラス名').メソッド;
});

CSSでidとクラスを指定するように、idは「#」、クラスは「.（ドット）」を先頭に付け、id名、クラス名を書いていきます。

例えば、下のようなリストの一部分だけ色を変えたい場合は、このように書いていきます。

〜省略〜
<body>
　<ul>
　　<li id="test">jQuery1</li>
　　<li>jQuery2</li>
　　<li>jQuery3</li>
　</ul>

<script>
　$(function(){
　　$('#test').css('color', 'red');
　});
</script>
</body>

色を変えたいリストの一部分に、id（test）を付けます。
そしてjQueryで「 #test 」とセレクタを指定し、メソッドを書きます。

ブラウザで確認すると、「 jQuery1 」だけ色が赤色に変わっていることがわかります。

また、クラスを指定する場合も同様に「.クラス名（.test）」と書くだけです。

このようにid、クラスを使っていきます。

idとクラスの使い分け

idとクラスの書き方はわかったけど、idとクラスの使い分けはどうやってするの？

idとクラスの使い分けですが、どちらを使っても問題はないのですが、基本的には「 id 」を使う方がいいでしょう。

復習ですが、クラスは１つのページ内で複数使用することができますが、反対にidは、１つのページで複数使用することができません。

ページを読み込む際に、idは１つのページに一箇所しか存在しないので、jQueryの処理速度が早くなります。
なので、基本jQueryでは「 id 」を使うといいでしょう。

まとめ

よくクラスでまとめがちになりますが、idとクラスを使い分けて書くことを意識していきましょう。

では本日は以上になります。

オススメの教材

前の記事
【入門】jQueryの書き方　〜 jQueryの基本〜 2020.01.25
次の記事
【入門】jQueryの書き方　〜よく使うメソッド〜 2020.02.09