jQuery、jsの色々メモ(随時追加)

##.appendの使い方
//$(row).appendTo('#modalSearchTable tbody');

例えば
$(A).append(B) とした場合にAにBが追加されるのに対して、
$(A).appendTo(B) ではBにAが追加される。

参考url:http://semooh.jp/jquery/api/manipulation/appendTo/content/ 日本語リファレンス

##『jQuery Toast plugin』の使い方(トーストの使い方)

例えばこういうやつ↓
参考url:https://kamranahmed.info/toast Jquery Toast Plugin
→俗にいう「通知バナー」のこと。
→画面の隅（主に右下）から現れる（ポップアップする）小さな長方形のメッセージ表示のこと。

####ajaxと組わせることで、画面をリロードさせることなく通知をすることができます。

sample.js

function sendParameter(parameter){
  $.ajax({
        type: 'post',
        url: '繋げ先',
        data: {'parameter':parameter},
        cache : false,
        timeout: 20000
    }).done(function() {
    /* Jquery Toastによるメッセージ*/
      $.toast({
          heading: 'SampleMassage',             // 見出し
          text: '送信完了',                      // 表示したいテキスト(HTML使用可)
          showHideTransition: 'slide',	        // 表示・消去時の演出
          icon: 'info'                          // 事前定義された種類のトーストを指定するため
      })
//ここからは気にしない
    }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
    //失敗時処理
  }).always(function(XMLHttpRequest, textStatus) {

  });
}

####※ajaxだと、何かしら値をサーバーに渡す必要がある。⇒特に値を渡さずに画面遷移なく通信するにはどうするか。

sample1.js

function sendParameter(parameter){
	 fetch('url').then(function(response) {
		  if(response.ok) {
		    response.json().then(function(json) {
		      products = json;
		      //initialize();
		    }).then(function() {
			    /* Jquery Toastによるメッセージ*/
		        $.toast({
		            heading: Messages("テスト"),
		            text: Messages("おｋ"),
		            showHideTransition: 'slide',
		            icon: 'success'
		        })
		      });
		  } else {
		    console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText);
		  }
		});
}

↑まぁajaxに適当な値を渡してサーバー側でその値を使わなければ別にいいんだけどね。。かっこわるいしさ。。

送信に成功したか、失敗したか画面遷移なく知れるので割と便利かも。。

##ダウンロードボタンを押下した時、確認メッセージ

sample.js

    $("#ボタンタグのid").click(function(){
      if(confirm("出したいメッセージ")){
         return true;
       }else{
         return false;
       }
    });

##特定位置に要素を追加

sample.js

$(document).ready(function(){
    $('dl:eq(2) > dt:eq(0)').after("<br>");//3番目の<dl>内の1番目の<dt>～</dt>の後ろに<br>を挿入する
    //他にbefore,prepend,appendがある
});

##改行幅をもう少し小さくしたい場合

sample.js

//改行を入れたはいいけど、その行間がちょっとでかいなと思って何とかした方法(本来の用途ではない)
$(document).ready(function(){
    	    var li = $('<p style="font-size: 1pt">').text('');//これでちょうどデフォルト設定の行間の半分くらいになった。
    	    $('dl:eq(2) > dt:eq(0)').after(li);
});

jQuery promise()　async

要素の表示・非表示を切り替える方法

sample.js

    // 表示するボタン
    $('#btn1').click(function() {
        $('#demo1').show();
    });

    // 隠すボタン
    $('#btn1').click(function() {
        $('#demo1').hide();
    });

//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓//
    //※ちなみに、表示・非表示の切り替え ( toggle )
    $('#btn1').toggle();    //左は以下と同じ意味です。

    // .show()と.hide()を交互に実行する
    if($('#btn1').css('display') == 'none'){
        $('#btn1').show();
    } else {
        $('#btn1').hide();
    };

★jQueryで動的に追加した要素はクリックイベントが発火しない？いやそんなことはないぞ

結構躓いた案件↓
参考URL