Webサイト制作におけるjQueryの基本的なメソッド２

ｊQuery CSS

前回に引き続き、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドについて、まとめていく。

今回はデザイン面ではなく、コードそのものや表示される内容を変える機能面のメソッドをまとめる。

内容や機能を変更する基本的なメソッド
  • addClass()メソッド：要素にクラス（属性）を指定（付加）する
  • removeClass()メソッド：要素からクラス（属性）を取り除く（削除する）
  • attr()メソッド：要素の属性値を指定した値に変更する
  • empty()メソッド：要素の中身を削除する（指定した要素自体は残る）
  • text()メソッド：要素の中身を指定したテキストに変更する
  • html()メソッド：要素の中身を指定したHTMLに変更する
addClass()メソッドとremoveClass()メソッドの記述例

addClass()メソッドとremoveClass()メソッドの基本的な書き方は以下の通り。

$('#sample').addClass('クラス名');
$('#sample').removeClass('クラス名');

ポイントはメソッドの後の括弧内のシングルクォートで囲まれたクラス名には、スタイルを指定するときに付けるドット「．」は不要ということ。

また、HTMLやCSSとも絡む内容となるが、クラスは１つの要素に複数設定することができる。

以下、HTML内で複数のclass属性を指定する記述例。

<div class="one two three"></div>

クラス名「one」と「two」、「three」の３つが指定（付加）される。
class属性を指定するダブルクォート内で、間に半角スペースを挟むことで区切りが認識される。

以下、jQueryでaddClass()メソッド、removeClass()メソッドを用いて複数のクラスを操作する場合の記述例。

$('#sample').addClass('one two three');
$('#sample').removeClass('one two');

実際に挙動を確認してみる。
以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>addClassメソッドとremoveClassメソッドの確認</title>
<style>
div {
　margin: 10px;
　width: 300px;
}
.one {
　background:#0f0; /* 緑 */
}
.two {
　background:#00f; /* 青 */
}
.three {
　background:#FCF; /* ピンク */
}
.four {
　background:#FF0; /* 黄色 */
}
.tri {
　border: 1px solid #636; /* 紫 */
}
.tetra {
　border: 1px solid #F60; /* オレンジ */
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="first">初期状態：クラス指定なし</div>
<div id="second" class="two">初期状態：クラス「two」</div>
<div id="third" class="three">初期状態：クラス「three」</div>
<div id="fourth" class="four tetra">初期状態：クラス「four」、「tetra」</div>
<script>
$(function(){
　$('#first').addClass('one');
　$('#second').removeClass('two');
　$('#third').addClass('tri');
　$('#fourth').removeClass('four');
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

removeClass()メソッドに関して、クラス名は削除されているが、「class=""」とあるように、指定していたクラスがすべてなくなってしまっても、クラスを指定していた痕跡は残っているということが分かる。

ここで、複数のclassを指定する際に、追加した順番が結果に影響するのかどうかを念のため確認しておく。

以下、確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>addClassメソッドとremoveClassメソッドの確認</title>
<style>
div {
　margin: 10px;
　width: 300px;
}
.zero {
　background: #ccc; /* グレー */
}
.one {
　background:#0f0; /* 緑 */
}
.two {
　background:#00f; /* 青 */
}
.three {
　background:#FCF; /* ピンク */
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="first" class="zero">初期状態：クラス「zero」</div>
<div id="second">初期状態：クラス指定なし</div>
<script>
$(function(){
　$('#first').addClass('one');
　$('#first').addClass('three');
　$('#first').addClass('two');
　$('#second').addClass('one three two');
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

１つずつクラスを追加した場合（#first）も、まとめて複数のクラスを追加した場合（#second）も表示結果は「.three」が反映された状態になっている。

この結果から、クラス（名）はjQueryで記述した順に追加されているが、処理順序（表示結果）は、ソース（今回はstyle）内でのクラスの記述順に従っていることが分かる。

attr()メソッドの記述例

attr()メソッドの記述例は以下の通り。

$('#sample').attr('属性名','変更後の値');

attr()メソッドは、aタグのリンク先を変えたり、imgタグの画像を変えたり、HTMLに読み込むCSSファイルを変えたりする際に便利なメソッドである。

empty()メソッドの記述例

empty()メソッドの記述例は以下の通り。

$('#sample').empty();
text()メソッド、html()メソッドの記述例

text()メソッドの記述例は以下の通り。

$('#sample').text('変更後のテキスト');
$('#sample').html('変更後のHTML');

以下、attr()〜html()メソッドまでの確認コード。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>attr()〜html()メソッド</title>
<style>
.one {
　border: 1px solid #0F0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<p><img src="#" id="attrtest" class="zero"></p>

<div id="emptytest">
divの中身
<p>divの中のpの中身</p>
</div>

<div id="texttest1">
divの中身
<p>今日は<em>飲み会</em>だ！</p>
</div>

<div id="texttest2">
divの中身
<p>明日は<em>ライブ</em>だ！</p>
</div>

<div id="htmltest1">
divの中身
<p>今日は<em>飲み会</em>だ！</p>
</div>

<div id="htmltest2">
divの中身
<p>明日は<em>ライブ</em>だ！</p>
</div>

<script>
$(function(){
　$('#attrtest').attr('src','mari.jpg');
　$('#attrtest').attr('class','one');
　$('#emptytest').empty();
　$('#texttest1').text('お盆休みももうすぐ終わる…。');
　$('#texttest2').text('<em>お盆休み</em>は暑かった。');
　$('#htmltest1').html('お盆休みももうすぐ終わる…。');
　$('#htmltest2').html('<em>お盆休み</em>は暑かった。');
});
</script>
</body>
</html>

以下、表示結果。
←クリックで拡大表示

結果から、以下のことが確認できる。

  • empty()メソッドを指定した要素自体は残り、中身のみが削除されている
  • text()メソッドおよびhtml()メソッドを指定すると、要素の中身すべてがまるごと変更される
  • text()メソッドおよびhtml()メソッドは、変更後の中身がテキストのみの場合は結果に違いはない
  • text()メソッドの場合、変更後の中身にHTMLの要素（タグ）などを含んでいても、すべて文字列として処理される
  • html()メソッドの場合、変更後の中身にHTMLの要素（タグ）を含んでいると、要素として認識されて処理される