内容や属性を変更する(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('クラス名')」