data属性は「data-」を接頭辞につけた属性で自由に定義できる。
そしてそれをjQueryで操作するのが「.data()」である。

例えば、以下のようにhidden属性でデータを横に置いている処理を…。
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        alert($(this).closest('div').find(':hidden[name="key"]').val());    │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<div>                                                                       │
│<input type="button" value="表示"/>                                         │
│<input type="hidden" name="key" value="値"/>                                │
│</div>                                                                      │
└──────────────────────────────────────┘

以下のようにdata属性として内包させることができる。
┌──────────────────────────────────────┐
│$(function(){                                                               │
│    $(':button').on('click', function() {                                   │
│        alert($(this).data('key'));                                         │
│    });                                                                     │
│});                                                                         │
├──────────────────────────────────────┤
│<input type="button" value="表示" data-key="値"/>                           │
└──────────────────────────────────────┘
「.data('key')」のように「data-」を外した残りを指定して
参照することができるのだが、元々、「data-key」という属性なので
「.attr('data-key')」のように「.attr()」でフルネームでも取得できる。

┌──────────────────────────────────────┐
│setTimeout(function() {$('div').text('1秒後に表示');}, 1000);               │
└──────────────────────────────────────┘
とはいえ、アニメーション系メソッド以外でも遅延処理をしたいという場合がある。
例えば、上記のようにsetTimeout()を使えばよいのだが、
.delay()でやってみたい。そんな時の方法。

まず、アニメーション系メソッドは、キュー(queue)というものに登録されて
順番に実行するものである点を理解しなければならない。

つまり、アニメーション系メソッドは、実行した瞬間に実行されるのではなく
実行した瞬間は、キュー(queue)に登録されるだけで
キュー(queue)の方で先入先出で順番に実行していくのだ。
よって、.delay()が効くという寸法になっているのだ。

ってことで、自動で行われるキュー(queue)の登録を手動に行えばよい。
┌──────────────────────────────────────┐
│$('div').delay(1000).queue(function() {                                     │
│    $(this).text('1秒後に表示').dequeue();                                  │
│});                                                                         │
└──────────────────────────────────────┘
つまり、上記のような感じ。
.dequeue()を用いて、キュー(queue)からの削除も手動で行う必要がある点に注意。

これを応用すれば以下のおうに要素を追加することもできる。
┌──────────────────────────────────────┐
│$('div').delay(1000).queue(function() {                                     │
│    $(this).append(                                                         │
│        $('<span>').text('1秒後に表示')                                     │
│    ).dequeue();                                                            │
│});                                                                         │
└──────────────────────────────────────┘

ちなみに、キュー(queue)をクリアする方法は以下の通り。
┌──────────────────────────────────────┐
│$('div').clearQueue();                                                      │
├──────────────────────────────────────┤
│$('div').queue([]);                                                         │
└──────────────────────────────────────┘

また、キューの数を確認するには以下の通り。
┌──────────────────────────────────────┐
│$('div').queue().length                                                     │
└──────────────────────────────────────┘

.delay()が効くのはアニメーション系メソッドのみである。
アニメーション系メソッドは以下の通り。
┌───────┬──────────────────────────────┐
│.animate()    │アニメーション                                              │
├───────┼──────────────────────────────┤
│.show()       │表示                                                        │
│.hide()       │非表示                                                      │
│.toggle()     │表示/非表示                                                 │
│              │→「.hide(0).delay(1000).show(0)」(引数0が必要)             │
├───────┼──────────────────────────────┤
│.fadeIn()     │徐々に表示                                                  │
│.fadeOut()    │徐々に非表示                                                │
│.fadeTo()     │透明度変更                                                  │
│              │→「.fadeOut().delay(3000).fadeIn()」                       │
├───────┼──────────────────────────────┤
│.slideDown()  │スライド表示                                                │
│.slideUp()    │スライド非表示                                              │
│.slideToggle()│スライド表示/非表示                                         │
└───────┴──────────────────────────────┘

sleep関数的な使い方をするものではない。
┌──────────────────────────────────────┐
│$('div').text('初期表示');                                                  │
│$('div').delay(1000);  // sleep1秒                                          │
│$('div').text('1秒後に上書');                                               │
├──────────────────────────────────────┤
│$('div').text('初期表示')                                                   │
│        .delay(1000)                                                        │
│        .text('1秒後に上書');                                               │
└──────────────────────────────────────┘
上記は効かない。すぐに上書されてしまう。

例えば以下のようにtdタグ直下にテキスト文とタグが混在していて
テキストだけ除去する方法。
┌──────────────────────────────────────┐
│<td>あいうえお<input type="text" value="かきくけこ"/></td>                  │
└──────────────────────────────────────┘

ちなみにタグ側だけ削除するには、以下みたいな感じで簡単なのだが。
┌──────────────────────────────────────┐
│$('td').children().remove();                                                │
└──────────────────────────────────────┘

一番確実な対処法としてはtd直下にテキストを置くのではなく、spanタグを介する方法。
┌──────────────────────────────────────┐
│<td><span>あいうえお</span><input type="text" value="かきくけこ"/></td>     │
└──────────────────────────────────────┘
そうすると以下のように素直に処理ができる。
┌──────────────────────────────────────┐
│$('td').children('span').remove();                                          │
├──────────────────────────────────────┤
│$('td').children().remove('span');                                          │
└──────────────────────────────────────┘

とはいえ、spanタグを今さら追加できないという事情の場合の対処方法。
すばり、テキストで取得したものを置換で除去してしまう！
┌──────────────────────────────────────┐
│$('td').html(                                                               │
│    $('td').html().replace($('td').text(), '')                              │
│);                                                                          │
└──────────────────────────────────────┘
なお、.text()は改行を認識するが、.html()は改行を除去してしまうという特性があり
たいていは上記ではうまくいかないようだ。
(<td>から</td>まで一行で書かれている場合のみうまくいく)

ということで、改行コードを除去した上で置換すればいけそうだ。
┌──────────────────────────────────────┐
│$('td').html(                                                               │
│    $('td').html().replace(                                                 │
│        $('td').text().replace(/\n/g, ''),                                  │
│        ''                                                                  │
│    )                                                                       │
│);                                                                          │
└──────────────────────────────────────┘

非表示からの～表示！
┌──────────────────────────────────────┐
│#target {                                                                   │
│    display             :none;                                              │
│}                                                                           │
├──────────────────────────────────────┤
│$('#target').show();                                                        │
└──────────────────────────────────────┘
表示からの～非表示！
┌──────────────────────────────────────┐
│#target {                                                                   │
│    display             :block;                                             │
│}                                                                           │
├──────────────────────────────────────┤
│$('#target').hide();                                                        │
└──────────────────────────────────────┘

$.get()を使うとこんな感じ。
┌──────────────────────────────────────┐
│//$.ajaxSetup({async:false});  // 非同期をやめる                            │
│$.get(                                                                      │
│    'data.csv',                                                             │
│    function(data) {                                                        │
│        console.log(data);                                                  │
│//      data = data.replace(/\r\n|\r|\n/g, '\t');  // 改行をタブに置換      │
│//      var 配列 = data.split(','));                                        │
│    }                                                                       │
│);                                                                          │
└──────────────────────────────────────┘

HTML文(body部)とCSSは以下のような感じ。(たいていはid制御になるだろうが)
┌──────────────────────────────────────┐
│<body>                                                                      │
│<canvas width="100" height="100"></canvas>                                  │
│</body>                                                                     │
├──────────────────────────────────────┤
│<style type="text/css">                                                     │
│canvas {                                                                    │
│    position            :absolute;                                          │
│    top                 :32px;                                              │
│    left                :32px;                                              │
│    height              :400px;     /* 拡大率にあたる */                    │
│    width               :400px;     /* 拡大率にあたる */                    │
│}                                                                           │
│</style>                                                                    │
└──────────────────────────────────────┘
canvasの実サイズは、canvasタグに記載する形になる。
CSSの指定はそれをどういうサイズに引き伸ばして表示するかの指定になる。
よって、上記は「100×100」のcanvasを、「400×400」で表示する指定となり
実質は縦4倍×横4倍の指定ということになる。

で、jQueryで縦と横に11本ずつ線を引いて、「囲」みたいな図を書いた例は以下の通り。
┌──────────────────────────────────────┐
│<script>                                                                    │
│$(function(){                                                               │
│    $('canvas').css({                                                       │
│        'background-color'  :'#EEEEEE',         // 背景色(灰)               │
│    });                                                                     │
│    if ($('canvas')[0].getContext) {                                        │
│        for (var i = 0; i <= 100; i += 10) {                                │
│            var context = $('canvas')[0].getContext('2d');                  │
│            // 縦線                                                         │
│            context.beginPath();                // 開始                     │
│            context.moveTo(i,   0);             // 始点                     │
│            context.lineTo(i, 100);             // 終点                     │
│            context.closePath();                // 終了                     │
│            context.strokeStyle = '#0000FF';    // 線の色(青)               │
│            context.stroke();                   // 描画                     │
│            // 横線                                                         │
│            context.beginPath();                // 開始                     │
│            context.moveTo(  0, i);             // 始点                     │
│            context.lineTo(100, i);             // 終点                     │
│            context.closePath();                // 終了                     │
│            context.strokeStyle = '#FF0000';    // 線の色(赤)               │
│            context.stroke();                   // 描画                     │
│        }                                                                   │
│    }                                                                       │
│});                                                                         │
│</script>                                                                   │
└──────────────────────────────────────┘
「$('canvas')」ではなく、「$('canvas')[0]」を用いる点がミソである。

「$.get();」などでAjaxでデータを反映させる場合、
ブラウザ上のキャッシュにデータが保存される場合がある。

一旦保存されてしまうと、再読込しても、変更したものが反映されない。

それを防ぐ方法。
┌──────────────────────────────────────┐
│$.ajaxSetup({cache:false});                                                 │
└──────────────────────────────────────┘
上記を直前に実行してあげればよい。

以下のような感じになる。
┌──────────────────────────────────────┐
│$.ajaxSetup({cache:false});                                                 │
│$.get(                                                                      │
│    // 略                                                                   │
│);                                                                          │
└──────────────────────────────────────┘

上記のような感じで、.text()と.html()を組み合わせると変換ができるようだ。
┌───────┬──────────────────────────────┐
│エスケープ    │エスケープ後 = $('<div\/>').text(エスケープ前).html();      │
├───────┼──────────────────────────────┤
│アンエスケープ│エスケープ前 = $('<div\/>').html(エスケープ後).text();      │
└───────┴──────────────────────────────┘
ただ、ダミーでdivタグを用いるので、
あまりお勧めはできない模様(多用するとパフォーマンスに影響がありそう)。