SQLの窓

2014年03月14日


jQuery : jQuery のイベント内の jQuery オブジェクトと DOM オブジェクト( prop と attr と getAttribute と setAttribute と removeAttribute )















イベント内の this は?

jQuery のイベントの中で this を参照すると、それは DOM オブジェクトを参照します。ですから、jQuery オブジェクトとして扱う為には $(this) と記述するわけですが、そこから再度 DOM オブジェクト を参照したい場合は $(this)[0] か、または、$(this).get(0) と記述する事になります。
jQuery のイベントの中で this が  DOM オブジェクト である事は、
this === document.getElementById("obj_check_bt1")
が真となるので明白です。
this.disabled これは、JavaScript のプロパティとして disabled 属性を参照しています。ですから、this.disabled は true に設定する事によって使用不可となります。プロパティとしての動作は融通がきいて、"disabled" や "" をセットしても適宜解釈されて正しく動作します this.setAttribute setAttribute の場合は、プロパティの動作と違って最初の this.setAttribute("disabled","disabled") や this.setAttribute("disabled","true") は意図した動作になりますが、この使用不可を解除するには this.setAttribute("disabled","false") や this.setAttribute("disabled","") では無く、this.removeAttribute("disabled") を実行する必要があります $(this).prop と $(this).attr jQuery のこれらのメソッドは、上記の二つの DOM 操作の代替と考えてよいのですが、jQuery では当初 setAttribute の動作と同様な動きをしていました、しかし、1.6 あたりから、失敗が起こらないように改良されています。但し、prop と attr での 値の読み出しの結果は、prop は true か false で、attr は、undefined か disabled です。この値は、DOM で正しく操作した時と少し違っていますが( null と disabled ) jQuery のほうが結果の値としては直感的にわかり易くなっていると思います。
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<input id="obj_check_bt1" type="button" value="実行">
<script type="text/javascript">

$("#obj_check_bt1").click( function() {
	if ( this === document.getElementById("obj_check_bt1") ) {
		console.log( "一致 : イベント内の this は DOM です。" );
		// ですから、このボタンを disable にするには
		this.disabled = true;
	}
});

</script>

<input id="obj_check_bt2" type="button" value="実行">
<script type="text/javascript">

$("#obj_check_bt2").click( function() {
	if ( $(this)[0] === document.getElementById("obj_check_bt2") ) {
		console.log( "一致 : jQueryオブジェクトから DOM 参照(1)" );
		// jQueryオブジェクトで disable(1);
		$(this).prop("disabled", false );
		console.log( $(this).prop("disabled") );
		$(this).prop("disabled", true );
		console.log( $(this).prop("disabled") );
	}
});

</script>

<input id="obj_check_bt3" type="button" value="実行">
<script type="text/javascript">

$("#obj_check_bt3").click( function() {
	if ( $(this).get(0) === document.getElementById("obj_check_bt3") ) {
		console.log( "一致 : jQueryオブジェクトから DOM 参照(2)" );
		// jQueryオブジェクトで disable(2);
		$(this).attr("disabled", false );
		console.log( $(this).attr("disabled" ) );
		$(this).attr("disabled", true );
		console.log( $(this).attr("disabled" ) );
	}
});

</script>

<input id="obj_check_bt4" type="button" value="実行">
<script type="text/javascript">

$("#obj_check_bt4").click( function() {
	console.log( this.getAttribute( "disabled" ) );
	this.setAttribute( "disabled", "disabled" );
	console.log( this.getAttribute( "disabled" ) );
	this.setAttribute("value","setAttribute で状態を変える事はできないので、removeAttribute を実行" );
	this.removeAttribute("disabled");
	console.log( this.getAttribute( "disabled" ) );
});

</script>


【jQueryの最新記事】
posted by lightbox at 2014-03-14 23:23 | jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり