jQuery逆引きリファレンス
要素のプロパティを取得／設定するには？（prop）
任意の要素に対してJavaScriptのプロパティを設定／取得する方法を解説。また、要素の属性を設定／取得できるattrメソッドと機能を比較する。
propメソッドは、要素のプロパティを取得／設定します。attrメソッドと似ていますが、
1属性値とJavaScriptのプロパティとで値が異なるもの、
もしくは、
2そもそも（属性名に対応しない）JavaScriptのプロパティにしかない情報
を取得する際に利用します。
具体的には、
1はselected／checked／disabled／multipleなどの属性のこと、
2はtagName／nodeName／nodeTypeのようなJavaScriptプロパティのことです。
以下は、prop／attrメソッドを利用して、さまざまな属性／プロパティにアクセスする例です。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<input id="name" type="text" value="権兵衛" disabled /><br />
<input id="chk" type="checkbox" value="true" checked="" /><br />
<select id="category">
<option id="dotnet" value="dotnet">.NET</option>
<option id="java" value="java">Java</option>
<option id="ruby" value="ruby">Ruby</option>
<option id="js" value="js" selected="selected">JavaScript</option>
</select>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
console.log($('#name').prop('disabled')); // 結果：true
console.log($('#name').attr('disabled')); // 結果：disabled
console.log($('#chk').prop('checked')); // 結果：true
console.log($('#chk').attr('checked')); // 結果：checked
console.log($('#category').prop('multiple')); // 結果：false
console.log($('#category').attr('multiple')); // 結果：undefined
console.log($('#js').prop('selected')); // 結果：true
console.log($('#js').attr('selected')); // 結果：selected
console.log($('#name').prop('nodeName')); // 結果：INPUT
console.log($('#name').attr('nodeName')); // 結果：undefined
});
</script>
</body>
</html>
|
disabled／checked／multipleなどの真偽属性*1について、attrメソッドは属性値もしくはundefinedで、propメソッドはtrue／falseで返すことが確認できます。主にboolean型の値については、propメソッドで取得した方が誤解がないでしょう。
- *1 真偽属性は、単に
disabledのように属性名だけで指定できるほか、disabled="disabled"disabled=""のように指定できます。値がないことを示すためにdisabled="false"のような指定はできませんので、注意してください。値がないことを示すには、属性は省略しなければなりません。
nodeNameプロパティは属性ではなくJavaScriptのプロパティなので、propメソッドで取得します（＝attrメソッドでは取得できません）。ただし、propメソッドが導入されるjQuery 1.5以前では、attr('nodeName')は「INPUT」を返します。
プロパティ値を設定する
propメソッドを利用して、JavaScriptプロパティを設定することもできます。例えば以下は、［すべて選択／解除］ボタンをクリックすることで、全てのチェックボックスをチェック状態、もしくは非チェック状態にするサンプルです。
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<button id="check">すべて選択／解除</button>
<div id="fav">
<label><input type="checkbox" value="js" />JavaScript</label>
<label><input type="checkbox" value="vb" />Visual Basic</label>
<label><input type="checkbox" value="cs" />C#</label>
<label><input type="checkbox" value="python" />Python</label>
<label><input type="checkbox" value="ruby" />Ruby</label>
<label><input type="checkbox" value="java" />Java</label>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
// ボタンクリックでチェックボックスを操作
$('#check').click(function(e) {
var c = $('#fav input[type="checkbox"]');
// 先頭のチェックボックスがチェック状態であれば全てのチェックを解除
if (c.prop('checked')) {
c.prop('checked', false);
// 先頭のチェックボックスが非チェック状態であれば全てをチェック
} else {
c.prop('checked', true);
}
});
});
</script>
</body>
</html>
|
［すべて選択／解除］ボタンをクリック
API：.prop() カテゴリ：Attributes（属性）｜Manipulation（要素の操作） > General Attributes（一般属性）
※以下では、本稿の前後を合わせて5回分（第6回～第10回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
6. 要素にスタイルクラスを適用／除外するには？（addClass／removeClass／toggleClass／hasClass）
要素にclass属性の値を設定／削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。
8. 【現在、表示中】≫ 要素のプロパティを取得／設定するには？（prop）
任意の要素に対してJavaScriptのプロパティを設定／取得する方法を解説。また、要素の属性を設定／取得できるattrメソッドと機能を比較する。
9. 要素の高さ／幅を設定／取得するには？（height／width／innerHeight／innerWidth／outerHeight／outerWidth）
任意の要素に対して幅／高さを設定／取得する方法を解説。また、height／width、innerHeight／innerWidth、outerHeight／outerWidthメソッドの使い分け方法も説明する。
10. 変数の型情報を判定するには？（$.isXxxxx／$.type）
$.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。
