Tag: javascript Tag: jquery

jquery




リンク

jQuery.com
https://jquery.com/
jQuery日本語リファレンス
http://semooh.jp/jquery/
jQuery TECHNIQUE
http://black-flag.net/jQueryTechnicalNote/chapterList.html

メモ

個々の要素でなくイベントを処理する場合

  • 2016-11-23

$("#hogehoge").click(function(e) { ・・・
$("#hogehoge").keydown(function(e) { ・・・
だと指定したセレクタを対象のイベント処理になってしまう。

$(document)..keydown(function(e) { ・・・
などとすると、画面全体を含めてkeydownが発生する要素のイベントを処理出来る。もちろん、thisオブジェクトなどを使ってイベントが発生した要素を調べて処理を分岐する必要があるだろう。




ブラウザの元々の機能を殺す

  • 2016-11-23
     keydownイベントでfalseを返す事によって、本来のブラウザの機能を無効にできる事があります。ブラウザの仕組みによっては無効かもしれません。
	$(document).keydown(function(e) {
		var c = e.which ? e.which : e.keyCode;
		// F1:112
		// F2:113
		//   |
		// F11:122 
		// F12:123 
		if (c==9) {	// Tab
			return false;
		}
		if (c==112) {
			return false;
		}
		if (c==122) {	// F11 最大表示
			return false;
		}
 
	});


フォーム関係

入力可能な入力要素にフォーカスを移動

2017-02-03

$('input:visible').eq(0).focus();

INPUTタグの中の可視属性がある中の、最初(0番目)にフォーカースをセットする。




イベント

 どうだったかな・・・というイベント。

右クリック

$("要素").contextmenu(function(event){
    //処理
 });

要素がカット/コピー/ペースト

$("要素").on("cut",function(event){
   //処理
});

※ cutの部分を、コピー→「copy」、ペースト→「paste」。なお、テキストを選択した場合は、

$(document).select(function(event){
   //処理
});

値が変化した時

$("要素").change(function(event){
   //処理
});


マウスイベント発生時の座標の種類

$(要素).mousemove( function(evt) {
});

とした時のevtで取得できるマウスの座標の種類。

  • evt.clientX, evt.clientY
  • evt.pageX, evt.pageY
  • evt.offsetX, evt.offsetY
    などがある。

参考URL: http://easyramble.com/js-check-positions-and-sizes.html


bind - 要素にイベントを関連付ける

 【重要】JavaScriptで動的に作成した要素にイベントの処理をさせる時には、bindなどで要素にイベントを紐付けする必要がある。既存のセレクタで追加した要素でイベントが反応しない場合は、この辺のチェック、処理が必要。

bind(type, [data], fn) - jQuery日本語リファレンス


イベントの発生したことにする

 triggerでイベントの発生したことにして処理を行うことができる。

  $(IDなどセレクタ).trigger("イベント名"); 

などの書式、具体的には、$('#saveData').trigger("click"); などとして、用意しておいたイベントの処理を実行させることが出来る。

  

【jQuery】クリックなどのイベントを発生させる

【jQuery】triggerしたイベントを引数で区別する

trigger(type, [data]) - jQuery日本語リファレンス


その他

要素の存在を調べる

if ($("#hogehoge").length>0) {
  // 要素がある時の処理
} else {
  // 要素が無い時の処理
}




便利なプラグイン

tablesorter


Datepicker | jQuery UI


DateTimePicker


Autocomplete


Tooltip




便利そうなプラグインなど

jquery-panelslider


fixed Table Header

開閉式メニュープラグイン「Tendina」


Sweet Alertプラグイン


Jexcel


tablesorter

tablesorter


タグ一覧