デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.addClass( )class属性の追加

構文

class属性の追加返値:jQueryオブジェクト
jQo.addClass( クラス名 )ver1.0〜
jQo.addClass( function )ver1.4〜

機能

jQueryオブジェクトで指定した要素に引数で設定したクラス(class属性)を追加します。引数にはfunctionを指定することも可能で、条件によって追加するクラスを変更するなど高度な処理にも対応できます。

解説

引数にクラス名を指定

サンプル(addClass/01.html)を開いてhtml内に2つのdiv要素があり、1つにはid属性でtestと設定されていることを確認して下さい。

<div></div>
<div id="test"></div>

jQueryは以下の様に記述され、buttonをクリックするとid属性がtestのdiv要素に対しaddClassメソッドを利用してclass属性「blueBack」を追加します。

$("button").click(function(){
	$("div#test").addClass("blueBack");
});

以下の様にcssの設定でblueBackクラスは背景色を水色に指定してあるため、buttonをクリックするとid属性がtestのdiv(下のdiv要素)の背景色が水色になります。

.blueBack {
	background-color:#09C;
}

複数のクラスをまとめて指定

addClassメソッドは複数のclass属性をまとめて設定することができます。サンプル(addClass/02.html)を開いてbody内の構成がaddClass/01.htmlと同じ事を確認してください。cssの設定は以下の様にredBorderが追加されています(このcssは赤枠を表示する設定になっています)。

.redBorder{
	border:3px solid #F00;
}

jQueryは以下の様になっており、addClassの引数にblueBackとredBorderの2つのクラス名を指定しているのを確認して下さい。各クラス名は半角スペースで区切ります(カンマなどで区切らないように注意しましょう)。

$("button").click(function(){
	$("div#test").addClass("blueBack redBorder");
});

その結果、buttonをクリックするとid属性がtestのdiv要素は背景色が水色になり赤枠が追加されます。

引数にFunctionを設定

サンプル(addClass/03.html)を開いてhtml内に2つのdiv要素があり、1つには「class」属性でaquaと設定されていることを確認して下さい。cssにはdivの設定以外にaqua(背景色を水色)、green(背景色を緑色)、pink(背景色をピンク)が設定されています。

.aqua{background-color:#09C;}
.green{background-color:#9C9;}
.pink{background-color:#FCC;}

jQueryは以下の様に記述されaddClassの引数にfunctionの「classFunc」が設定されています。

$("button").click(function(){
	$("div").addClass(classFunc);
});

addClassの引数に設定するFunctionは以下の様な構文になっています。まず2つの引数(インデックス番号/現在付加されているクラス名)を受け取ります。これらの引数の値は{}内の処理で利用することができます。そして任意の処理の後で最終的に追加したいクラス名をreturnで返すようにします。

addClassに設定するFunctionの構文
function 任意の名前(インデックス番号, 現在付加されているクラス名){
 任意の処理(2つの引数を利用可能)
 return 追加したいクラス名;
}

サンプルaddClass/03.htmlで利用したclassFuncは以下の様になっており、引数で受け取った変数currentClass(現在付加されているクラス名)が「aqua」だったら変数addedClassに「green」を代入し、そうでなかったら「pink」を代入します。そして最後にreturnで変数addedClassを返します。
このサンプルでは引数のindex(インデックス番号)は利用していません。

classFunc = function(index, currentClass) {
	var addedClass;
	if ( currentClass == "aqua" ) {
		addedClass = "green";
	}else{
		addedClass = "pink";
	}
	return addedClass;
}

結果として、buttonをクリックするとaquaのclass属性が付いているdivにはgreenのclass属性を追加し、auqaのclass属性が付いていないdivにはpinkのclass属性を追加します。