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

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

.prop( )プロパティの取得/設定

構文

プロパティの取得返値:文字列
jQo.prop( プロパティ )ver1.6〜
プロパティの設定返値:jQueryオブジェクト
jQo.prop( プロパティ,値 )ver1.6〜
jQo.prop( Objectオブジェクト )ver1.6〜
jQo.prop( function )ver1.6〜

機能

引数にプロパティを指定することでプロパティの値を取得します。指定したプロパティが無い場合はundefinedを返します。 また第2引数に値を設定することでプロパティの値を設定します。値の代わりにfunctionを指定することも可能で、条件によって設定するプロパティの値を変更するなど高度な処理にも対応できます。
まとめて複数のプロパティを指定する場合はobjectオブジェクトを利用します。

解説の前に

propの誕生理由

属性とプロパティの違いは特定の状況で重要になることがあります。v1.6以前はattrメソッド(attrはattribute「属性」の略)でプロパティの値を得ようとしたときに思うような値を得ることができませんでした。しかしv1.6から登場したpropメソッド(propはproperty「プロパティ」の略)はプロパティの値を正確に取得することができます。
例えばselectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected等の値を得たり設定する場合はpropメソッドを利用するようにします(後方互換に配慮しpropを利用すべき属性もattrで操作する事ができます)。

propメソッドの使いどころ

前述したpropメソッドを利用すべきselectedIndex, tagName, nodeName等の他にフォームに関連して値がない属性(checked, selected, disabled等)もプロパティ扱いのためpropメソッドが推奨されます。v1.6.1以前ではこれらの値をattrメソッドで「動的に取得する」ことができませんでした(つまり初期の状態のみしか取得できなかったのです)がv1.7ではattrメソッドでも初期の値ではなく現在の値を取得できるので以前ほど注意しなくても大丈夫かもしれません。

propとattrの動作の違い

現在はほとんど同じ処理ができるattrとpropですが得られる値(設定できる値)が異なります。attrメソッドがhtmlを意識した値なのに対し、propメソッドはjavaScriptを意識した値になります
サンプル(prop/01.html)を開いてbody内にチェックボックスがありチェックの状態になっていることを確認して下さい。

<label><input type="checkbox" checked />チェックボックス1</label>

jQueryには以下の様に記述され、buttonをクリックするとattrメソッドで取得したchecked属性の値と、propメソッドで取得したchecked属性の値をアラートで表示します。

$("button").click(function(){
	var testAttr = $("input").attr("checked");
	var testProp = $("input").prop("checked");
	alert("attr=" + testAttr + ",    " + "prop=" + testProp);
})

チェックが入った状態でbuttonをクリックすると、attrメソッドでは「checked」となりpropメソッドでは「true」となります。チェックが無い状態だとattrメソッドでは「undefined」となりpropメソッドでは「false」となります。

あとプロパティや属性自体がない場合も確認しておきます。サンプル(prop/01b.html)を開いてbody内の構成に変更がないことを確認してください。jQueryは以下の様に変更され、input要素に存在しないhref属性の値を取得しようとしています。

$("button").click(function(){
	var testAttr = $("input").attr("href");
	var testProp = $("input").prop("href");
	alert("attr=" + testAttr + ",    " + "prop=" + testProp);
})

結果としてはattrメソッドもpropメソッドも「undefined」となります。これらの結果をまとめると以下の様になります。

  attr() prop
チェックあり checked true
チェックなし undefined false
属性がない undefined undefined

attrメソッドではチェックが無い場合も属性が無い場合にも「undefined」になるため区別が付きません。ですから、やはりpropメソッドを利用する方が良いでしょう。

解説

属性の値を取得

引数に取得したいプロパティを設定することで、そのプロパティの値を取得することができます。これは前述のサンプル(prop/01.html)で紹介したとおりです。propメソッドで取得したchecked属性の値を変数testPropに代入してアラートで表示しています。

属性の値を設定

第2引数に値を設定することで、第1引数に指定したプロパティの値を設定することができます。
サンプル(prop/02.html)を開いてhtml内にチェックボックスがあることを確認して下さい。jQueryには以下の様に記述され、buttonをクリックするとチェックボックスのchecked属性をtrueにしてチェックを入れます(チェックを外したいときはfalseを設定します)。

$("button").click(function(){
	$("input").prop("checked",true);
})

現在は後方互換のためattrメソッドでもチェックを入れることができます。推奨はされませんが参考にサンプルを用意しました(prop/02b.html)。

$("button").click(function(){
	$("input").attr("checked","checked");
})

attrメソッドの場合は上記のように第2引数に「checked」を設定します。

複数の属性をまとめて設定

引数にobjectオブジェクトを利用することで、複数のプロパティをまとめて設定できます。
サンプル(prop/03.html)を開いてhtml内のチェックボックスにチェックは入っていなく無効(disabled)になっていることを確認して下さい。javaScriptには以下の様にobjectオブジェクトを作成しました。object名はpropObjで2つのプロパティ(disabledとchecked)を作成し、それぞれに値を設定しています。

propObj = new Object();
propObj.disabled = false;
propObj.checked = true;

つづいてjQueryを確認して下さい。以下の様に記述され、buttonをクリックするとpropメソッドでチェックボックス(input要素)にpropObjを設定するようにしました。これでpropObjに設定したdisabled属性とchecked属性をまとめて設定することができます。

$("button").click(function(){
	$("input").prop(propObj);
})

その結果、buttonをクリックした後でチェックボックスは有効となりチェックが入ります。

引数にFunctionを設定

propメソッドの引数にはfunctionも設定することができます。functionを設定することで条件によって設定する値を変更するなど、高度なニーズに対応することができます。

サンプル(prop/04.html)を開いてhtml内にチェックボックスが3つあることを確認して下さい。jQueryは以下の様になっており、buttonをクリックするpropメソッドによってとチェックボックス(input要素)のchecked属性の値をfunction「propFunc」で設定するようにしています。

$("button").click(function(){
	$("input").prop("checked", propFunc);
})

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

attrに設定するFunctionの構文
function 任意の名前(インデックス番号, プロパティの現在の値){
 任意の処理(2つの引数を利用可能)
 return 設定したい値;
}

サンプルで設定しているfunction「propFunc」は以下の様になっており、引数で受け取った変数index(インデックス番号)が0だったら変数newPropにfalseを代入し、そうでなかったらtrueを代入し、returnで返しています。このサンプルでは引数のcurrentProp(属性の現在の値)は利用していません。

function propFunc(index, currentProp) {
	var newProp;
	if(index==0){
		newProp = false;
	}else{
		newProp = true;
	}
	return newProp;
}

結果として、buttonをクリックすると最初(インデックス番号が0)のチェックボックスのチェックは外れ、それ以外のチェックボックスにチェックが入ります。

関連情報

通常の属性を操作するattrメソッドやフォームの設定値(value属性)を取得するvalメソッドも合わせて覚えるようにしましょう。

メモ

checked以外のプロパティで試してみました

解説のサンプルではcheckedしか利用していないので、他のプロパティも試してみました。サンプル(prop/test01.html)を開いてbody内に無効になったテキストボックスと有効(通常)のテキストボックスがあることを確認してください。

<input id="dis" disabled="disabled" value="無効なテキストボックス"/>
<input id="ena" value="有効なテキストボックス" />

jQueryは以下の様に記述され、有効/無効のプロパティ「disabled」の値を取得しています。

var dis = $("input#dis").prop("disabled");
var ena = $("input#ena").prop("disabled");
alert("無効のテキストボックス="+dis +" 有効のテキストボックス=" + ena);

結果として、buttonをクリックすると「無効のテキストボックス=true 有効のテキストボックス=false」と表示されcheckedの値と同じようにtrue/falseで状態が分かります。プロパティ名が「disabled(無効)」という名前ですので、無効の場合に「true」、無効ではない(つまり有効)の場合に「false」になることに注意してください

attrメソッドも試してみた

有効/無効の取得にattrメソッドを利用することは推奨されていませんが、ついでに試してみました。サンプル(prop/test02.html)を開いて、ほとんどprop/test01.htmlと同じ事を確認してください。異なるのは以下の様にpropメソッドの代わりにattrメソッドを利用している点だけです。

var dis = $("input#dis").attr("disabled");
var ena = $("input#ena").attr("disabled");
alert("無効のテキストボックス="+dis +" 有効のテキストボックス=" + ena);

buttonをクリックして確認すると、無効の場合は「disabled」となり有効の場合は「undefined」となりました。