イベント内の 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の最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理