親領域(ここでは#main)をしてした上に、その左上(left top)から
任意の分(+16px)ずらすことができる。
┌──────────────────────────────────────┐
│$('#dialog').dialog({                                                       │
│    'position'  :{                                                          │
│        my  :'left top',                                                    │
│        at  :'left+16px top+16px',                                          │
│        of  :'#main'                                                        │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘

以下のような感じで。

【jQuery(JavaScript)】
┌──────────────────────────────────────┐
│$(':button').on('click', function() {                                       │
│    $.ajax({                                                                │
│            url         :URLを指定,                                         │
│            type        :'POST',                                            │
│            data        :{},                                                │
│            dataType    :'text',                                            │
│            timeout     :30000                                              │
│        })                                                                  │
│        .done(function(data, status, xhr) {                                 │
│            if (data) {                                                     │
│                const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);             │
│                const blob = new Blob([bom, data], {'type':'text/csv'});    │
│                $('<a></a>', {                                              │
│                    'href'      :window.URL.createObjectURL(blob),          │
│                    'download'  :'エクスポート.csv',                        │
│                    'target'    :'_blank'                                   │
│                })[0].click();                                              │
│            } else {                                                        │
│                alert('エラー');                                            │
│            }                                                               │
│        })                                                                  │
│        .fail(function(xhr, status, error) {                                │
│            alert('エラー');                                                │
│        });                                                                 │
└──────────────────────────────────────┘
  API(のURL)を指定して、CSVデータを返してもらう。
  そして、それに先頭BOMをつけて、UTF-8形式でダウンロードする形にする。

【PHP】
┌──────────────────────────────────────┐
│echo '1,2,3';                                                               │
└──────────────────────────────────────┘
  API側では、CSVデータを返す。

以下のようなHTMLタグがあり(ま、どんなんでもいいのだが)
┌──────────────────────────────────────┐
│<div id="i1"></div>                                                         │
│<div id="i2"></div>                                                         │
│<div id="i3"></div>                                                         │
└──────────────────────────────────────┘

以下のような関数にてアニメーションをランダムに完了させる
┌──────────────────────────────────────┐
│function test(i) {                                                          │
│    let d = new $.Deferred;                                                 │
│    $('#i' + i).animate(                                                    │
│        {'display' :'block'},                                               │
│        1000 + Math.floor(Math.random() * (250 + 1)),                       │
│        'swing',                                                            │
│        function() {                                                        │
│            console.log($(this).text());                                    │
│            d.resolve();                                                    │
│        }                                                                   │
│    );                                                                      │
│    return d.promise();                                                     │
│}                                                                           │
└──────────────────────────────────────┘

んで、以下のように非同期で並列処理を行い、
全部完了したら「完了」をコンソールログに出力する
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    $.when(                                                                 │
│        test(1),                                                            │
│        test(2),                                                            │
│        test(3)                                                             │
│    )                                                                       │
│    .done(function() {                                                      │
│        console.log('完了');                                                │
│    })                                                                      │
│    .fail(function() {                                                      │
│        console.log('失敗');                                                │
│    });                                                                     │
│});                                                                         │
└──────────────────────────────────────┘
みたいなのは上記でできた。

さて、「$.when()」の中にベタ書きというのはこの場合はちょっといただけない。
「$.when()」の中で、ループさせることはできないか？(できないけど)

ということで、ループを用いる方法は以下の通り。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    let ary = [];                                                           │
│    for (let i = 1; i <= 3; i++) {                                          │
│        ary.push(test(i));                                                  │
│    }                                                                       │
│    $.when.apply(null, ary)                                                 │
│    .done(function() {                                                      │
│        console.log('完了');                                                │
│    })                                                                      │
│    .fail(function() {                                                      │
│        console.log('失敗');                                                │
│    });                                                                     │
│});                                                                         │
└──────────────────────────────────────┘
一回配列にぶちこめばよい。
但し、その配列を「$.when()」の中に直接ぶちこむと
「.done()」とかが効かなくなるので「.apply()」をかますのがミソ。

以下のようにチェックボックスのイベントを設定し
チェックボックスの値を変更した(チェックを入れた)場合
画面からチェックを入れた時は発動するイベントが発動せずスルーされてしまう。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    $(':checkbox').on('change', function() {                                │
│        alert('イベント発動！');                                            │
│    });                                                                     │
│    $(':checkbox').prop('checked', true);                                   │
│});                                                                         │
└──────────────────────────────────────┘

これを発動させるようにするには「.change()」メソッドをつけて
イベントを能動的に実行してあげればよい。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    $(':checkbox').on('change', function() {                                │
│        alert('イベント発動！');                                            │
│    });                                                                     │
│    $(':checkbox').prop('checked', true).change();                          │
│});                                                                         │
└──────────────────────────────────────┘

以下のような感じで。

【HTML】
┌──────────────────────────────────────┐
│<form>                                                                      │
│  <input type="hidden" name="キー" value="upfile">                          │
│  <input type="file" name="upfile">                                         │
│  <input type="button" value="インポート">                                  │
│</form>                                                                     │
│<input type="text" id="file_name" readonly="readonly">                      │
└──────────────────────────────────────┘
  ※POST項目は、$.ajax()のdataではなく、form内のhiddenで定義

【jQuery(JavaScript)】
┌──────────────────────────────────────┐
│$('form :button').on('click', function() {                                  │
│    const formData = new FormData($('form').get(0));                        │
│    $.ajax({                                                                │
│            url         :URLを指定,                                         │
│            type        :'post',                                            │
│            data        :formData,                                          │
│            processData :false,            // 変換しない                    │
│            contentType :false,            // content-typeヘッダを送信しない│
│            cache       :false,            // キャッシュをクリア            │
│            dataType    :'json',                                            │
│        })                                                                  │
│        .done(function(data, status, xhr) {                                 │
│            alert('インポート成功');                                        │
│        })                                                                  │
│        .fail(function(xhr, status, error) {                                │
│            alert('エラー');                                                │
│        })                                                                  │
│        .always(function(data, status, xhr) {                               │
│            $('#file_name').val($('form :file').prop('files')[0].name);     │
│            $('form')[0].reset();                                           │
│        });                                                                 │
│    });                                                                     │
└──────────────────────────────────────┘
  ※ファイルの内容を変更してそのまま再インポートするとエラーとなるので
    インポート後に一旦クリアして回避(ファイル名の引き継ぎも)

【PHP】
┌──────────────────────────────────────┐
│$ファイル全文 = file_get_contents($_FILES[$_POST['キー']]['tmp_name']);     │
└──────────────────────────────────────┘
  ※CSVファイルやTSVファイルを全文取得して、後は配列に格納して処理

jQueryでCSVファイルを生成しダウンロードさせるには以下のような感じ。
┌──────────────────────────────────────┐
│const blob = new Blob([CSVデータ], {'type':'text/csv'});                    │
│$('<a></a>', {                                                              │
│    'href'      :window.URL.createObjectURL(blob),                          │
│    'download'  :'エクスポート.csv',                                        │
│    'target'    :'_blank'                                                   │
│})[0].click();                                                              │
└──────────────────────────────────────┘
アンカーリンクを生成し、クリックするようなイメージになる。

なお、UTF-8のBOMを先頭に付加する場合は以下のような感じとなる。
┌──────────────────────────────────────┐
│const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);                             │
│const blob = new Blob([bom, CSVデータ], {'type':'text/csv'});               │
│$('<a></a>', {                                                              │
│    'href'      :window.URL.createObjectURL(blob),                          │
│    'download'  :'エクスポート.csv',                                        │
│    'target'    :'_blank'                                                   │
│})[0].click();                                                              │
└──────────────────────────────────────┘

これと同じように自ら生成したHTMLを別ウインドウに開くこともできる。
┌──────────────────────────────────────┐
│const blob = new Blob([HTMLソースコード], {'type':'text/html'});            │
│$('<a></a>', {                                                              │
│    'href'      :window.URL.createObjectURL(blob),                          │
│    'target'    :'_blank'                                                   │
│})[0].click();                                                              │
└──────────────────────────────────────┘

trタグでxクラスがある場合、それをスキップして次へ進む方法。

┌──────────────────────────────────────┐
│tr = tr.next('tr:not(.x)');                                                 │
└──────────────────────────────────────┘
これはダメ。次を一つだけ見て、条件一致するかを判定するだけだから。

以下のようにループさせるのがよい。
┌──────────────────────────────────────┐
│while (tr.next('tr').hasClass('x')) {                                       │
│    tr = tr.next('tr');                                                     │
│}                                                                           │
└──────────────────────────────────────┘

タブ(Tabs)を画面いっぱいに表示する方法。
┌──────────────────────────────────────┐
│$(this).tabs({heightStyle:'fill'});                                         │
└──────────────────────────────────────┘
親要素に合わせてサイズが調整される。

セレクタが複数該当する場合、参照は一件目のみ、設定は全件が対象となる。
全件参照したい場合には.each()メソッドを使う。
┌──────────────────────────────────────┐
│<input type="hidden" class="a" value="a">                                   │
│<input type="hidden" class="b" value="b">                                   │
│<input type="hidden" class="c" value="c">                                   │
├──────────────────────────────────────┤
│alert($('input:hidden').val());  // →「a」(一件目)のみ                     │
│┌────────────────────────────────────┐│
││// 全件参照したい場合には.each()メソッドでループさせる                  ││
││$('input:hidden').each(function() {                                     ││
││    alert($(this).val());  // →「a」、「b」、「c」                     ││
││});                                                                     ││
│└────────────────────────────────────┘│
├──────────────────────────────────────┤
│$('input:hidden').val('z');  // →全件に設定される                          │
│alert($('.a').val());        // →「z」                                     │
│alert($('.b').val());        // →「z」                                     │
│alert($('.c').val());        // →「z」                                     │
└──────────────────────────────────────┘

値の設定方法は以下の通り。第二引数に指定してあげればよい。(「.attr()」と同じ)
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        $(this).data('key', '新しい値');                                    │
│        alert($(this).data('key'));  //→「新しい値」                       │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<input type="button" value="表示" data-key="古い値"/>                       │
└──────────────────────────────────────┘

但し、「.data()」によるデータの設定の反映はjQuery上のみで
HTML上には反映されないので、「.attr()」では取得できないので注意。
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        $(this).data('key', '新しい値');                                    │
│        alert($(this).data('key'));       //→「新しい値」                  │
│        alert($(this).attr('data-key'));  //→「古い値」  ★                │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<input type="button" value="表示" data-key="古い値"/>                       │
└──────────────────────────────────────┘

逆に「.attr()」でHTML上に反映させれば、「.data()」でも取得できる。
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        $(this).attr('data-key', '新しい値');                               │
│        alert($(this).data('key'));       //→「新しい値」★                │
│        alert($(this).attr('data-key'));  //→「新しい値」                  │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<input type="button" value="表示" data-key="古い値"/>                       │
└──────────────────────────────────────┘