第2章　「特定のクラスを持つエレメントへのアクセス」

特定のID名を持つエレメントへのアクセスには$("#名前")のように指定しました。しかし、操作対象となる全てのエレメントにID名を割り当てることができない場合があります。jQueryではID名ではなくクラス名でアクセスすることができるため、エレメントにクラス名が割り当てられていれば十分です。
サンプル1ではaboutクラスを持つエレメントの内容を書き換えます。pタグでも3番目にはクラス名が指定されていないため、内容が書き変わりません。（サンプル1を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p class="about">jQueryとは？</p>
<p class="about">jQueryとは？</p>
<p>jQueryとは？</p>
<form>
<input type="button" value="まとめて書き替え" onClick="changeText()">
</form>
</body>
</html>


【JavaScript】
function changeText(){
$(".about").text("軽量/高速なライブラリです");
}


クラス名は、様々なタグで指定することができます。場合によっては特定のタグに指定されているものだけにアクセスしたいことがあります。jQueryではスタイルシートと全く同じように指定することができます。$("div.about")とするとdivタグのaboutクラスが指定されたものだけが対象になります。$("p.about")であればpタグのaboutクラスが指定されたものだけが対象になります。
サンプル2はdivタグのaboutクラスが適用されているエレメントの内容を書き換えます。（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p class="about">jQueryとは？</p>
<p class="about">jQueryとは？</p>
<div class="about">jQueryとは？</div>
<div class="note">注意事項</div>
<form>
<input type="button" value="まとめて書き替え" onClick="changeText()">
</form>
</body>
</html>


【JavaScript】
function changeText(){
$("div.about").text("軽量/高速なライブラリです");
}

[目次へ]