jQueryでは指定されたタグの属性値を変更したりスタイルシートのクラスを追加することができます。属性値を１つだけ設定する場合にはset()を使います。パラメータは２つで、最初のパラメータが属性名で二番目のパラメータが設定する値になります。以下のサンプルではボタンをクリックすると段落内の文字が右寄せで表示されます。（サンプルを
実行する）
<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(){
$("p").
set("align","right");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p align="left">ここに注目</p>
</body>
</html>
１つでなく複数設定する場合にもset()を使います。ただし、複数設定する場合のパラメータは１つだけです。この１つのパラメータはプロパティリストで指定します。属性名と属性値のペアを必要な数だけ列記します。以下のサンプルは画像のURLと枠幅を同時に変更するものです。（サンプルを
実行する）
<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(){
$("img").
set({src:"sakura.jpg", border:6});
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<img src="photo.jpg" border="1">
</body>
</html>
タグにスタイルシートのクラスを追加したい場合にはaddClass()を使います。パラメータには追加するスタイルシートのクラス名を指定します。以下のサンプルはpタグにnoteクラスを追加するものです。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<style type="text/css"><!--
.note {
background-color:#ffd;
color:red;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("#btn").click(function(){
$("p").
addClass("note");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<form>
<input type="button" value="Click" id="btn">
</form>
<p>ここに注目</p>
</body>
</html>
[
目次へ]
(2006.8.4)