ＳＱＬの窓
<< ブラウザを使用した… | TOP | PHP : 連想配列を「… >>

2014年10月03日


jQuery のオブジェクト参照と属性参照と DOM としての参照

 
jQuery で属性参照するのであれば、prop が望ましいです。そして、jQuery から DOM 参照したほうが簡単な場合もあります。

ソースコード実行する場合は、開発者ツールを開いて実行します。(IEは IE9以降 でないと、console.dir() は動作しません)

jQuery のオブジェクトと通常のオブジェクトを意図的に使い分けています。

▼ jQuery
jQuery では、$("セレクタ") から jQuery のメソッドを使う

▼ DOM を使いたい場合
$("セレクタ")[n] から、DOM のメソッドやプロパティを使用します
( $("セレクタ").get(n) でも同等 )



属性を設定・取得するメソッドとしては、.attr() と .prop() の二通りありますが、結果としての大きな違いはサンプルコードのような状態の違いを検査する時の表現になります。しかし、厳密な違いは結構大きいので、UI でのコントロールでは prop を使う事を強く推奨します。

※ attr に関しては、バージョンの 1.6 を境に微妙に動作が違う
elem.checked true (Boolean) が設定されていても、チェックを外せば false となる
$(elem).prop("checked") true (Boolean) が設定されていても、チェックを外せば false となる
elem.getAttribute("checked") checked="checked" と指定した場合、Firefox では getAttribute で
変化は評価できませんでした。IE は常に true か false が返される
ようです。
$(elem).attr("checked")
(1.6) 		getAttribute の仕様と同じ状態
( チェックを外しても初期状態のまま )
$(elem).attr("checked")
(1.6.1以降)		 "checked" (String) と、undefined で切り替わる
( 最新仕様 )
$(elem).attr("checked")
(1.6より前) 		elem.checked と同じ動作

▼ デベロッパーツールのコンソールを開いて右のボタンをクリックしてソースコードの結果を表示できます


▼ このコードをソースコードから実行してみる 
<input id="bt1" type="button" value="実行" disabled />
<input id="bt2" type="button" value="実行" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<script type="text/javascript">

$("#bt2").click( function() {

	// 既存のプロパティの参照
	var x = $(navigator).attr('userAgent');
	console.log(x);
	x = $(navigator).prop('userAgent');
	console.log(x);

	// グローバルスコープにユーザプロパティ(変数)を作成
	window["lightbox"] = { "version": 1.01, "type": "user" };

	// jQueryでセット
	$(window).attr("lightbox1", {} );
	$(lightbox1).attr("version", 1.01).attr( "type", "user" );
	$(window).prop("lightbox2", {} );
	$(lightbox2).prop("version", 1.01).prop( "type", "user" );

	// 内容の表示
	try {
		console.dir(lightbox);
		console.dir(lightbox1);
		console.dir(lightbox2);
	} catch(e){};

	// bt1 と bt2 の disabled 属性の見え方の違い
	// this は、bt2 のイベント内なので、bt2 のオブジェクト
	// attr では、prop の true/false に対して、"disabled"/undefined
	console.log( "左ボタン(attr):" + $("#bt1").attr("disabled") );
	console.log( "左ボタン(prop):" + $("#bt1").prop("disabled") );
	console.log( "右ボタン(attr):" + $(this).attr("disabled") );
	console.log( "右ボタン(prop):" + $(this).prop("disabled") );

	// タイトル属性の追加( 実行後、
	$("#bt1").attr("title", "OK");
	$("#bt2").prop("title", "NO");

	// 配列で直接オブジェクトを参照
	console.log( "左ボタン([n] DOM):" + $("#bt1")[0].disabled );
	console.log( "右ボタン([n] DOM):" + $("#bt2")[0].disabled );

	// 上と同じものをメソッドで
	console.log( "左ボタン(get(n) DOM):" + $("#bt1").get(0).disabled );
	console.log( "右ボタン(get(n) DOM):" + $("#bt2").get(0).disabled );

	// jQuery の each で参照( ひとつしか無いという前提 )
	$("#bt1").each( function(){ console.log("左ボタン(DOM):" + this.disabled); } )
	$("#bt2").each( function(){ console.log("右ボタン(DOM):" + this.disabled); } )
	$("#bt1").each( function(){ console.log("左ボタン(jQuery):" + $(this).prop("disabled")); } )
	$("#bt2").each( function(){ console.log("右ボタン(jQuery):" + $(this).prop("disabled")); } )

	// 通常(DOM)の参照
	console.log( document.getElementById("bt1").disabled );
	console.log( document.getElementById("bt2").disabled );

});

</script>

グローバルオブジェクトの作成

window["lightbox"] = { "version": 1.01, "type": "user" }; は、window.lightbox を作成(オブジェクトです)し、version と type プロパティをセットしています。

これと同等の処理を jQuery でも実行しています。

attr と prop での参照

左のボタンは、HTML として disabled が存在し、右のボタンには定義そのものがありません。ですから、attr で参照すると、右のボタンは undefined になります。

attr と prop は、画面の操作による変化がなければ、どちらを使っても意味としては同じ結果になります。(返される値は違います)

DOM として参照

jQuery の セレクタで選択したオブジェクトは、配列参照する事で DOM として使用できます。(正式なメソッドは get です)
※ 但し、get を使うと -1 という負の数を使って、一覧の最後のオブジェクトを参照可能です

また、each では コールバックを必要としており、その関数には DOM が渡されています。あらためて jQuery を使用する場合は、$(this) とします。
タグ：jquery
【jQueryの最新記事】
posted by lightbox at 2014-10-03 13:31 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり