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日本語リファレンス


テーブル TABLEタグのTDの情報取得

　TABLEタグの各セルTD内の文字を取得するには、closest、findまたはchildren、eqを使うと可能です。

2022-07-09

<DIV id="mydata">
<TABLE>
<TR>
  <TD>行1列1</TD><TD>行1列2</TD> <TD>行1列3</TD><TD>行1列4</TD>
</TR>
<TR>
  <TD>行2列1</TD><TD>行2列2</TD> <TD>行2列3</TD><TD>行2列4</TD>
</TR>
<TR>
  <TD>行3列1</TD><TD>行3列2</TD> <TD>行3列3</TD><TD>行3列4</TD>
</TR>
<TR>
  <TD>行4列1</TD><TD>行4列2</TD> <TD>行4列3</TD><TD>行4列4</TD>
</TR>
<TR>
  <TD>行5列1</TD><TD>行5列2</TD> <TD>行5列3</TD><TD>行5列4</TD>
</TR>
</TABLE>
</DIV>

といったタグの場合は、

$(function () {
    $("#mydata td").click(function() {
        // クリックした行nの1列目
        var v = $(this).closest('tr').find('td').eq(0).text();
        alert(v);    // 行n列1
        // クリックした行nの3列目
        var v = $(this).closest('tr').find('td').eq(2).text();
        alert(v);    // 行n列3
    });
});

なお、

        var v = $(this).closest('tr').find('td').eq(0).text();

を

        var v = $(this).closest('tr').children('td').eq(0).text();

でも同様でした。


その他

要素の存在を調べる 

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




タグ一覧