内容や属性を変更する（2）

addClass/removeClass

要素のclass属性を操作するためのメソッド
addClassはクラスを追加
removeClassはクラスを削除

jQueryObject.addClass('クラス名');
jQueryObject.removeClass('クラス名');

クラス〜に属する要素

<div class="apple"></div>

次のようにも記述できます。

<div class="apple banana orange"></div>

CSSは以下のように指定します。

.apple {color: red;} /*クラスappleに属する要素の色をredにする*/
.banana {font-weight: bold;} /*クラスbananaに属する文字の太さをboldにする*/ 
.orange {font-size: 120%;} /*クラスorangeに属する要素の文字の大きさを120%にする*/

このようにclass属性値のなかにスペースをいれると、要素に対して複数のクラスを指定したことになります。

クラスを柔軟に操作できるaddClassとremoveClass

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2" class="box">div2</div>
<div id="div3" class="box">div3</div>
<div id="div4" class="box alert">div4</div>
</body>
</html>

《style.css》

div {
  margin:0 0 10px;
  padding:10px;
}
.box {
  border:3px solid #000;
}
.alert {
  border-color:#f00;
}

《script.js》

$(function(){
  $('#div1').addClass('box');
  $('#div2').removeClass('box');
  $('#div3').addClass('alert');
  $('#div4').removeClass('alert');
});

class属性を操作するには、attrメソッドよりも「addClass/removeClass」を使う。

まとめ

要素の中身をまるごと別のテキストに置き換えたいときには、「.text('新しい内容のテキスト')」
要素の中身をまるごと別のHTMLに置き換えたいときには、「.html('新しい内容のHTML')」
要素の中身を空にしたいのなら「.empty()」
要素の属性値を変更したいのなら「.attr('属性名','新しい値')」
フォームのコントロールの値を変えたいのなら「.val('新しい値')」
クラスをつけたり外したりしたいのなら「addClass('クラス名')」「removeClass('クラス名')」