jQueryのidとclassの取得方法の違いについて

jquery

jQueryは、idやclassのイベント単位でロジックを組んでいく方法が一般的な使い方だと思います。
今回は、jQueryでidとclassの取得方法の違いについて解説します。
jQueryに馴染みのある人にとっては、基本的なことだと思いますが、jQueryを初めて触るという方や普段フロントエンドに疎遠という方は、是非参考にして頂ければ幸いです。

[スポンサーリンク]

この章でやること

HTML内のidの取得方法を解説します。
HTML内のclassの取得方法を解説します。

idとclassを扱ったサンプルソース

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>sample</title>

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<!-- スクリプト部分 -->
    <script>
    $(function() {
        // idを取得します。
        $( "#id-button" ).click(function() {
            alert("idは先頭に「#」を付けて取得します。");
        });

        // classを取得します。
        $( ".class-button" ).click(function() {
            alert("classは先頭に「.」を付けて取得します。");
        });
    });
	</script>
</head>
<body>

<h1>sample</h1>
<input type="button" id="id-button" value="idを指定" /><br/>
<input type="button" class="class-button" value="classを指定、その1" /><br/>
<input type="button" class="class-button" value="classを指定、その2" />

</body>
</html>

解説

idの取得方法は、「#id-button」のように先頭に#を指定しています。
classの取得方法は、「.class-button」のように先頭に.を指定しています。

実行結果

idの「#id-button」ボタンをクリックした結果
id-class-get1

classの「.class-button」ボタンをクリックした結果
id-class-get2

idとclassの違いって??

idは、html内で必ずユニーク(一意)になるべきものです。
classは、html内で重複OKのものです。

使いどころとしては、例えば、パスワード入力テキストはidで、商品のリスト等はclassで指定するなどして、うまく使い分けていきましょう。

さいごに

jQueryのidとclassの取得方法の違い以前に、classとidをよく理解していないまま実装されているHTMLソースをたまに見ます。
バックエンドばかりやっているエンジニアって意外とHTMLのことに疎かったりします。
私の周りでは、PHPエンジニアやデザイナの方に比べると、特にjavaエンジニアは、HTMLに疎いような気がします。(これは私の主観です。)
HTMLはデザイナ(コーダー)まかせではなく、基本的なところはおさえておきましょう!
それでは!