jQueryでは$()にはタグ名だけでなくクラス名やID名を指定することができます。また、スタイルシートのようにp.headerのような組み合わせによる記述もできます。
以下のサンプルはID名がbtnのタグにクリックイベントを追加します。フォームのボタンをクリックするとアラートダイアログが表示されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
alert("Click");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
</body>
</html>
ID名でなくクラス名の指定を行うにはスタイルシートと同様に.を付けて指定します。以下のサンプルではクラス名がtype1のもののみクリックイベントが追加されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$(".type1").click(function(){
alert("Click");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click">(クラス指定なし)<br>
<input type="button" value="Click" class="type1">(type1クラス指定あり)<br>
<input type="button" value="Click" class="type2">(type2クラス指定あり)<br>
<input type="button" value="Click" class="type1">(type1クラス指定あり)<br>
</form>
</body>
</html>
同じクラスが異なるタグに指定される場合には上記の方法では困ります。そのような場合は「タグ名.クラス名」のように記述することで特定のタグのクラス名のみ指定することができます。以下のサンプルではpタグでtype1クラスが指定されているもののみクリックイベントが追加されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("p.type1").click(function(){
alert("Click");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click">(クラス指定なし)<br>
<input type="button" value="Click" class="type1">(type1クラス指定あり)<br>
<input type="button" value="Click" class="type2">(type2クラス指定あり)<br>
<input type="button" value="Click" class="type1">(type1クラス指定あり)<br>
</form>
<p>ここはpタグでクラス指定なし</p>
<p class="type1">ここはpタグでtype1クラス指定あり</p>
<p class="type2">ここはpタグでtype2クラス指定あり</p>
<p class="type1">ここはpタグでtype1クラス指定あり</p>
</body>
</html>
[
目次へ]
(2006.8.2)