HTMLの多くは、属性を変更することにより、様々に表示や処理を変化させる事ができます。
例えば、style属性やclass属性を変更することで、見た目を変化させることができます。
テキストノードを変更すれば、表示内容を変更することができます。
disabled属性やHTML5のcontenteditable属性などを変更すれば、その要素の取り扱いを変更することができます。

しかし、JavascriptのDOMは、各要素の属性を変更するためには必須なのですが、意外と取り扱いが面倒な部分があります。
特に、共通する属性をまとめて変更したい場合でも、ループを作ったり、要素オブジェクトの抽出をしなければなりません。
そこで、jQueryを用いると面倒な属性変更を簡単に扱うことができます。

jQueryの属性変更は基本的には、下述の「属性の扱い方」で示す「attr」メソッドで扱うことができます。
その中でも、jQueryでは CSSとイベントを特別視し、別のメソッドで取り扱えるように工夫されています。
【参考】

style属性やCSSなどの取り扱い

「スタイルの変更」

イベントなどの取り扱い

「DOMイベントへの対応」

DOM要素の属性変更には、「attr」メソッドという基本メソッドが存在します。
このメソッドを用いることで、目的の要素の特定属性の内容を調べたり、一括変更することができます。

attr(name)

最初の要素の nameで指定した特定のDOM属性の内容を取得します。
要素が指定属性を持っていない場合、undefinedを返します。

返り値：要素のDOM属性値
※属性を持たない場合は、「undefined」

リスト1. attr(name)

function Sample21(){
	var clss = jQuery( '.Sample21' ).attr( 'class' );
	clss = jQuery.trim( clss );
	var res = ( new String( clss )).replace( /[\s\t\r\n]+/g, '\n' );
	alert(res);
}

実装例

• 1
• 2
• 3

リスト1の実行

上記 リスト1.では、「Sample21」クラスで抽出下要素が持つクラス名を列記しています。
(但し、最初の要素のclass属性のみ)

　

attr(name,value)

選択された要素の nameで指定した特定のDOM属性の内容を value で変更します。
value に 値の代わりに、コールバック関数を指定することもできます。

返り値：jQueryオブジェクト

リスト2. attr(name,value)

function Sample22(inpVal){
	// attrメソッドで、値「null」をchecked属性に設定。
	jQuery( '.Sample22 input' ).attr('checked',null);
	if( inpVal > 0 ){
		// attrメソッドで、checked属性にコールバック関数を適用。
		jQuery( '.Sample22 input' ).attr('checked',function(){
			var val = jQuery(this).attr('value');
			return (( val % 2) > 0);
		});
	}
}

実装例

• 1
• 2
• 3

上記をすべてチェック解除 上記のうち、value属性が奇数のものだけチェック

　

attr(properties)

選択された要素のDOMプロパティを一括変更します。
properties は、ハッシュオブジェクトです。
なお、properties の内容は、要素の「属性名:属性値」ではなく、「DOMプロパティ名:値」となります。
※class属性を変更する場合は、「class:値」ではなく、「className:値」で指定します。

返り値：jQueryオブジェクト

リスト3. attr(properties)

function Sample23(reset){
	// 初期化
	var now = new Date();
	var dstr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	jQuery( '.Sample23' ).attr({
		disabled : true,
		value : dstr,
		style : 'background:silver;'
	});
	if( reset ){
		jQuery( '.Sample23' ).attr({
			disabled : false,
			style : 'background:normal;'
		});
		window.clearInterval(myTM);
	}
}

実装例

現在時刻:

リスト3の実行 リスト3の中止

「リスト3の実行」でタイマーをスタートさせ、「リスト3の中止」で停止させます。
その際、「disabled」「value」「style」属性を一括して変更します。

　

removeAttr(name)

選択された要素の nameで指定した特定のDOM属性を削除します。

返り値：jQueryオブジェクト

リスト4. removeAttr(name)

function Sample24(){
	jQuery( 'option.Sample24' ).removeAttr('selected');
}

実装例

選択-1 選択-2 選択-3 選択-4 リスト4の実行

input要素のvalue属性の変更は、属性値の中でも特に使用されます。
そのため、value属性専用のメソッドが用意されています。

val()

要素の value 属性値を文字列の配列として返します。

返り値：value属性値(文字列)の配列

リスト5. val()

function Sample35(){
	var arr = jQuery( '#Sample35' ).val();
	arr = jQuery.isArray(arr) ? arr.join('\n') : arr;
	alert(arr);
}

実装例

1 2 3 4 リスト5の実行

　

val(Value)

要素の value 属性値をすべて指定の値 Value とします。

返り値：jQueryオブジェクト

リスト6. val(Value)

function Sample36(){
	var now = new Date();
	var dstr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	jQuery( '.Sample36' ).val(dstr);
}

実装例

リスト6の実行

大概の要素は、その要素が含むテキストノードやその中のHTML構文を表示しています。
WEBアプリケーションの多くは、そのテキストノードや内包するHTML構文を変化させます。
以下は、特定の要素を表示域とした場合、そのテキストノードや内包するHTML構文を変更する方法です。

text()

要素のテキストノードを文字列を連結して返します。

返り値：テキストノード(文字列)

リスト7. text()

function Sample47(){
	alert(jQuery( '.Sample47' ).text());
}

実装例

「リスト7の実行」ボタンは、「Sample47」 クラス内のテキストを抽出します。

たとえ、分かれていても一つのテキストとして抽出します。

リスト7の実行

　

text(Value)

要素のテキストノードをすべて指定の値 Value とします。

返り値：jQueryオブジェクト

リスト8. text(Value)

function Sample48(){
	var now = new Date();
	var dstr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	jQuery( '.Sample48' ).text(dstr);
}

実装例

1. 項目-1
2. 項目-2
3. 項目-3

リスト8の実行

　

html()

最初の要素をHTMLコードで返します。
innerHTMLと同様です。

返り値：HTMLコード(文字列)

リスト9. html()

function Sample49(){
	alert(jQuery( '.Sample49' ).html());
}

実装例

「リスト7の実行」ボタンは、「Sample49」 クラス内のHTMLコードを抽出します。

同じセレクタを複数設定している場合は、最初だけを取得します。

リスト9の実行

　

html(Value)

要素の子ノードをすべて指定の値 Value とします。

返り値：jQueryオブジェクト

リスト10. html(Value)

function Sample410(){
	var now = new Date();
	var dstr = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
	hstr = '
' + dstr + '
' + dstr + '
' + dstr + '
';
	jQuery( '.Sample410' ).html(hstr);
}

実装例

1. 項目-1
2. 項目-2
3. 項目-3

リスト10の実行