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

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

.attr( )属性の取得/設定

構文

属性の取得返値:文字列
jQo.attr( 属性名 )ver1.0〜
属性の設定返値:jQueryオブジェクト
jQo.attr( 属性名,値 )ver1.0〜
jQo.attr( Objectオブジェクト )ver1.0〜
jQo.attr( function )ver1.1〜

機能

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

attrメソッドと似たメソッドにpropメソッドがあります。あとでpropメソッドのページも確認して違いを理解するようにして下さい(ページ最後の「関連項目」からもリンクしています)。

解説

属性の値を取得

引数に取得したい属性名を設定することで、その属性の値を取得することができます。サンプル(attr/01.html)を開いてhtml内にaタグでgoogleへのリンクが設定されていることを確認して下さい。

<a href="http://www.google.co.jp/" target="_blank">google</a>

jQueryは以下の様に記述されbuttonをクリックすると、attrメソッドを利用してhref属性の値を取得し変数myLinkに代入します。代入した値はalertで表示するようにしています。

$("button").click(function(){
	var myLink = $("a").attr("href");
	alert(myLink);
})

buttonをクリックするとa要素のhref属性の値「http://www.google.co.jp/」がアラートで表示されます。

属性の値を設定

第2引数に値を設定することで、第1引数に指定した属性の値を設定することができます。サンプル(attr/02.html)を開いてhtml内に設定されたa要素を確認してください。サンプルattr/01.htmlと異なりtarget属性の設定がしてありません。そのためリンクをクリックすると別ウインドウで開きません。jQueryには以下の様に記述され、buttonをクリックするとa要素のtarget属性に_blankが設定されます。

$("button").click(function(){
	$("a").attr("target","_blank");
})

その結果、buttonをクリックした後でリンクをクリックすると別ウインドウでリンクが開くようになります。

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

引数にobjectオブジェクトを利用することで、複数の属性をまとめて設定できます。サンプル(attr/03.html)を開いてhtml内に設定されたa要素に属性が何も設定されていないことを確認してください。そのためリンクをクリックしてもリンクしません。

<a>google</a>

javaScriptでは以下の様にobjectオブジェクトを作成しました。object名はattrObjで2つのプロパティ(hrefとtarget)を作成し、それぞれに値を設定しています。

attrObj = new Object();
attrObj.href = "http://www.google.co.jp/";
attrObj.target = "_blank";

続いて以下のjQueryを確認して下さい。buttonをクリックするとattrメソッドを利用してa要素にattrObjを設定するようにしました。href属性とtarget属性がまとめて設定されます。

$("button").click(function(){
	$("a").attr(attrObj);
})

その結果、buttonをクリックした後でリンクをクリックすると別ウインドウでリンクが開くようになります。

引数にFunctionを設定

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

サンプル(attr/04.html)を開いてhtml内に2つのa要素があり、それぞれtarget属性は設定されていますがhref属性が設定されていないことを確認して下さい。

<a target="_blank">google</a>
<a target="_blank">yahoo</a>

jQueryは以下の様になっており、buttonをクリックするattrメソッドによってa要素のhref属性の値をfunction「attrFunc」で設定するようにしています。

$("button").click(function(){
	$("a").attr("href", attrFunc);
})

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

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

サンプルで設定しているfunction「attrFunc」は以下の様になっており、引数で受け取った変数index(インデックス番号)が0だったら変数newAttrに「http://www.google.co.jp/」を代入し、そうでなかったら「http://www.yahoo.co.jp/」を代入し、returnで返します。
このサンプルでは引数のcurrentAttr(属性の現在の値)は利用していません。

function attrFunc(index, currentAttr) {
	var newAttr;
	if(index==0){
		newAttr = "http://www.google.co.jp/";
	}else{
		newAttr = "http://www.yahoo.co.jp/";
	}
	return newAttr;
}

結果として、buttonをクリックすると最初(インデックス番号が0)のa要素のhref属性は「http://www.google.co.jp/」に設定され、それ以外のhref属性は「http://www.yahoo.co.jp/」に設定されます。

関連項目

attrメソッドで全ての属性を操作する事ができますが、フォームの要素などにある属性の値がないもの(checked,selected,disabled等)はpropメソッドの利用が推奨されます。
またフォームの設定値(value属性)を取得する場合はvalメソッドを利用するようにしましょう。

メモ

属性をpropメソッドで取得してみた

意味のないサンプルですが、興味本位でattrメソッドの代わりにpropメソッドを利用したサンプルを作成しました。サンプル(attr/test01.html)を開いて、ほとんどattr/01.htmlと同じ事を確認してください。異なるのは以下の様にattrメソッドではなくpropメソッドを利用している点だけです。

$("button").click(function(){
	var myLink = $("a").prop("href");
	alert(myLink);
})

結果としては、propメソッドでもhref属性の値を取得できました。しかしhrefは属性なのでattrメソッドを利用するようにしましょう。