エスケープの有無と.text()および.html()の関係は以下の通り。
┌──────────────┬───────┬───────────────┐
│           入力元           │     動作     │             結果             │
├──────────────┼───────┼───────────────┤
│以下を未エスケープ          │.html()で出力 │×XSS対策漏れ                 │
│<script>alert("@");</script>│              │  JavaSciptが動作             │
│                            │              │  (「@」ダイアログが出力)     │
├──────────────┼───────┼───────────────┤
│以下をエスケープ済み        │.html()で出力 │○OK                          │
│<script>alert("@");</script>│              │  文字列として以下が表示      │
├──────────────┼───────┤  <script>alert("@");</script>│
│以下を未エスケープ          │.text()で出力 │                              │
│<script>alert("@");</script>│              │                              │
├──────────────┼───────┼───────────────┤
│以下をエスケープ済み        │.text()で出力 │×文字化け                    │
│<script>alert("@");</script>│              │  文字列として以下が表示      │
│                          &lt;script&gt;alert(&quot;@&quot;);&lt;/script&gt;│
└──────────────┴───────┴───────────────┘

┌──────────────────────────────────────┐
│$('①,②')                                                         // ①OR②│
└──────────────────────────────────────┘
上記のようなOR条件のセレクタにAND条件を加味させたい場合、以下のようになる。
┌──────────────────────────────────────┐
│$('③①,③②')                                       // (③AND①)OR(③AND②)│
└──────────────────────────────────────┘
これでは、ちょっと冗長的(これが複合していった場合複雑になる)といった場合には
filterメソッドを使って以下のように書き替えることが可能である。
┌──────────────────────────────────────┐
│$('③').filter('①,②')                                     // ③AND(①OR②)│
├──────────────────────────────────────┤
│$('①,②').filter('③')                                     // (①OR②)AND③│
└──────────────────────────────────────┘

┌──────────────────────────────────────┐
│$(function() {                                                              │
│    $(window).resize(function() {                                           │
│        // イベント関数                                                     │
│    });                                                                     │
│});                                                                         │
└──────────────────────────────────────┘
ウインドウのリサイズイベントに応じてイベントを実行するには、
上記のように処理を実装すればよい。

但し、ブラウザによっては、リサイズ中にイベントが多発する可能性がある。

そこで、イベント完了後にのみイベントを実行させる方法。
┌──────────────────────────────────────┐
│var gTimer = false;                                                         │
│$(function() {                                                              │
│    $(window).resize(function() {                                           │
│        if (gTimer !== false) {                                             │
│            clearTimeout(gTimer);                                           │
│        }                                                                   │
│        gTimer = setTimeout(function() {                                    │
│            // イベント関数                                                 │
│        }, 200);                                                            │
│    });                                                                     │
│});                                                                         │
└──────────────────────────────────────┘
リサイズ完了後、0.2秒後に処理を実行するようにしている。
但し、リサイズ中に毎回それがリセットされるので、
本当にリサイズが完了してから、0.2秒後に処理が実行される仕組みとなっている。

親要素を左上(0, 0)とした場合の座標は以下で取得できる。
┌───┬──────────────────────────────────┐
│Y座標 │$(this).position().top                                              │
├───┼──────────────────────────────────┤
│X座標 │$(this).position().left                                             │
└───┴──────────────────────────────────┘

但し、親座標がスクロールした場合、スクロール後の左上が(0, 0)となるため
もしも、スクロールと関係なく親座標の左上を(0, 0)としたい場合には
親のスクロール値も加味してあげる必要がある。
┌───┬──────────────────────────────────┐
│Y座標 │$(this).position().top  + $(this).parent().scrollTop()              │
├───┼──────────────────────────────────┤
│X座標 │$(this).position().left + $(this).parent().scrollLeft()             │
└───┴──────────────────────────────────┘

以下のような感じで「resizable」を使用して実現できる。
┌──────────────────────────────────────┐
│<div id="all">                                                              │
│  <div id="left">LEFT</div>                                                 │
│  <div id="right">RIGHT</div>                                               │
│</div>                                                                      │
├──────────────────────────────────────┤
│#all {                                                                      │
│    position            :relative;                                          │
│    height              :64px;                                              │
│    width               :640px;                                             │
│    background-color    :#CCCCCC;                                           │
│}                                                                           │
│#left {                                                                     │
│    position            :absolute;                                          │
│    top                 :0;                                                 │
│    height              :100%;                                              │
│    left                :0;                                                 │
│    width               :128px;                                             │
│    background-color    :#FF0000;                                           │
│}                                                                           │
│#right {                                                                    │
│    position            :absolute;                                          │
│    top                 :0;                                                 │
│    height              :100%;                                              │
│    left                :128px;                                             │
│    right               :0;                                                 │
│    background-color    :#0000FF;                                           │
│}                                                                           │
├──────────────────────────────────────┤
│$('#left').resizable({                                                      │
│    handles     :'e',  // 右境のみ                                          │
│    containment :'parent',                                                  │
│    resize      :function(event, ui) {                                      │
│        $('#right').css('left', $(this).css('width'));                      │
│    },                                                                      │
│    stop        :function(event, ui) {                                      │
│        $('#right').css('left', $(this).css('width'));                      │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘

ドラッグが終わった時点(いわゆるドロップの時点)で、
親要素からの相対座標を表示する。
┌──────────────────────────────────────┐
│<div id="draggable">コンテンツ</div>                                        │
├──────────────────────────────────────┤
│<script>                                                                    │
│$('#draggable').draggable({                                                 │
│    stop    :function(event, ui) {                                          │
│        alert('X:' + $(this).position().left + '\n'                         │
│            + 'Y:' + $(this).position().top);                               │
│    }                                                                       │
│});                                                                         │
│</script>                                                                   │
└──────────────────────────────────────┘
なお、ページからの絶対座標を表示するには、
「position()」を「offset()」に置換すればよい。

jQueryUIの「draggable」は以下のように使用する。
┌──────────────────────────────────────┐
│<div id="draggable">コンテンツ</div>                                        │
├──────────────────────────────────────┤
│<script>                                                                    │
│$('#draggable').draggable();                                                │
│</script>                                                                   │
└──────────────────────────────────────┘

ただし、これだとドラッグする内容がすべてドラッグ用領域となってしまい
コピペとかができなくる。

そこで、Windowsのウインドウのように、タイトルバーのみドラッグ対象とする方法。
┌──────────────────────────────────────┐
│<div id="draggable">                                                        │
│<div id="header">タイトル</div>                                             │
│<div id="main">コンテンツ</div>                                             │
│</div>                                                                      │
├──────────────────────────────────────┤
│<script>                                                                    │
│$('#draggable').draggable({handle:'#header'});                              │
│</script>                                                                   │
└──────────────────────────────────────┘
「handle」オプションを使えばよい。

jQueryで「.append()」メソッドで追加した要素にイベントを仕込んでおいて
追加した直後に(初期表示のため)まず一回イベントを発生させる方法の例。
┌──────────────────────────────────────┐
│var newTd = $('<td>')                                                       │
│    .append($('<select>')                                                   │
│        .html(                                                              │
│            '<option value="0" selected="selected">－<\/option>'            │
│          + '<option value="1">○<\/option>'                                │
│          + '<option value="2">×<\/option>'                                │
│        )                                                                   │
│        .bind('change', function() {                                        │
│            if ($(this).val() == 0) {                                       │
│                $(this).closest('tr').css({'backgroundColor':'#C0C0C0'});   │
│            } else {                                                        │
│                $(this).closest('tr').css({'backgroundColor':'#FFFFFF'});   │
│            }                                                               │
│        })                                                                  │
│    );                                                                      │
│$('#tr').append(newTd);                                                     │
│newTd.ready(function() {                                                    │
│    $(this).change();                                                       │
│});                                                                         │
└──────────────────────────────────────┘
追加要素は非同期で追加が行われるためそれが完了した直後に(完了するまで待って)
イベントを実行させればよい。
待つためのものが「.ready()」メソッドである。
また、「.change()」メソッドを単独で実行すれば、
任意にchangeイベントを発生させることができる。

jQueryでAjaxを非同期でなくする(同期にする)方法。
(同期の時点でAjax(Asynchronous)でないというツッコミはなしで)
┌─────────┬────────────────────────────┐
│同期にする        │$.ajaxSetup({async:false});                             │
├─────────┼────────────────────────────┤
│非同期にする(既定)│$.ajaxSetup({async:true});                              │
└─────────┴────────────────────────────┘
とにかく非同期であっちゃこっちゃ処理が動くのが嫌な場合、直列処理にできる。

┌──────────────────────────────────────┐
│$(this).scrollTop(0);                                                       │
└──────────────────────────────────────┘
innerHTML系で領域を変更した場合に、
スクロールを戻してあげた方が違和感がないかも。