毎度、毎度、混乱すると「.attr('disabled', 'disabled');」
「.prop('disabled', true);」の違い。

いい加減まとめておかねば、また混乱しそう。

まずjQuery1.6で「.prop()」が追加されたらしい。

inputタグとかでは、「.attr('value')」は初期値(既定値)を取得するけど
「.prop('value')」は入力中の値を取得できるらしい。

ま、これが両者の個性を端的に示す一例ってことだろう。

ま、当初は明確に分離しようとしてたらしいけど反発をくらって
「.attr()」が後方互換を維持することになり、
「.attr()」⊃「.prop()」ってことらしい(だからややこしい)。

基本、HTML属性は「.attr()」、JavaScriptプロパティは「.prop()」って
覚えればいいらしく、「.attr('disabled', 'disabled');」より
「.prop('disabled', true);」が推奨みたい。

う～ん、disabledってHTML属性じゃないのか。。。？

あ、動的に変化するやつ、させるやつは「.prop()」なんだ。

静的＝「.attr()」、動的＝「.prop()」なのだね、納得。

localhostが127.0.0.1、自身のIPアドレスが192.168.x.xだとして、
サーバ(PHP)からCGI(Cとか)をjQueryのAjaxで呼び出す場合、
組み合わせによって、うまくいかない場合がある。

  ○サーバ＝127.0.0.1    CGI＝127.0.0.1
  ○サーバ＝192.168.x.x  CGI＝192.168.x.x
  ×サーバ＝127.0.0.1    CGI＝192.168.x.x
  ×サーバ＝192.168.x.x  CGI＝127.0.0.1

127.0.0.1と192.168.x.xには高い壁があるようだ。

なぜだろう。

┌──────────────────────────────────────┐
│$(function() {                                                              │
│  処理                                                                      │
│});                                                                         │
└──────────────────────────────────────┘
jQueryの処理はたいてい以下の部分に書く。
なんでここに書くかは割愛するが(初期処理で起動してくれるみたいな感じか)、
最近以下のようなソースを見かけた。
┌──────────────────────────────────────┐
│(function($){                                                               │
│$(function() {                                                              │
│  処理                                                                      │
│});                                                                         │
│})(jQuery);                                                                 │
└──────────────────────────────────────┘
なんか、コメントには「カプセル化」とか書いてあった。

これは「$」を他に使っている環境下でjQueryを使う場合に
jQueryを保護してくれるカプセルのようなものらしい。
┌──────────────────────────────────────┐
│(function($){                                                               │
│  カプセル化するもの                                                        │
│})(jQuery);                                                                 │
└──────────────────────────────────────┘
「prototype.js」とか独自の定義とかそういうのが万が一あっても
影響を受けないようにするためとのこと。

汎用的なソースを提供しているのであれば、念のため備えておいた方がいいだろう。
ま、そこまでのご身分ではないので、しばらく無縁のようだ。(でいいの？)

selectタグを変更するには以下の通り。
┌──────────────────────────────────────┐
│$('select').val(3);                                                         │
└──────────────────────────────────────┘
値(value)を指定してあげれば、それが選択された表示となる。
上記は「value」が「3」を選んだ場合。
選択肢の表示が「長嶋」になるはずだ。(うそ)

例えば四行で一グループで、見出し列がrowspanで結合されていたりする明細で
まとめて処理をする方法はないものか。

こんな風になってしまう。。。
┌──────────────────────────────────────┐
│                     $(this).find(':checkbox').each(function() { 処理 });   │
│              $(this).next().find(':checkbox').each(function() { 処理 });   │
│       $(this).next().next().find(':checkbox').each(function() { 処理 });   │
│$(this).next().next().next().find(':checkbox').each(function() { 処理 });   │
└──────────────────────────────────────┘

行の表示・非表示を切り替えたいので、以下のように実装してみた。
┌───┬──────────────────────────────────┐
│ 表示 │$('tr').css('display', 'block');                                    │
├───┼──────────────────────────────────┤
│非表示│$('tr').css('display', 'none');                                     │
└───┴──────────────────────────────────┘

ところが、IEではうまくいくのに、FirefoxやChromeだと
再表示(非表示→表示)の時にテーブルイメージが崩れてしまう。
どうも、再表示時に、元に戻るのではなく、
下の階層に追加されるような感じになっているっぽい(よくわからんが)。

困ったなと思ったところ、jQueryではこれらへの対応がなされているらしく、
以下で代替したら、想定通り再表示時に元に戻った。
┌───┬──────────────────────────────────┐
│ 表示 │$('tr').show();                                                     │
├───┼──────────────────────────────────┤
│非表示│$('tr').hide();                                                     │
└───┴──────────────────────────────────┘

ちなみに、「A」属性の行を非表示にするチェックボックスは以下のようになる。
┌──────────────────────────────────────┐
│$('#notA').click(function() {                                               │
│  if ($(this).prop('checked')) {                                            │
│    $('tr.A').hide();                                                       │
│  } else {                                                                  │
│    $('tr.A').show();                                                       │
│  }                                                                         │
│});                                                                         │
└──────────────────────────────────────┘

HTML側で以下のような感じで、プラス・マイナスアイコン(img)と、
開閉領域(div)を定義してあげる。
┌──────────────────────────────────────┐
│└<img id="T1" src="minus.jpg"/>親<br/><div id="_T1" style="display:block;">│
│  └子<br/></div>                                                           │
└──────────────────────────────────────┘

そして、jQuery側では以下のようにtoggleメソッドを定義してあげればよい。
┌──────────────────────────────────────┐
│$('img').toggle(                                                            │
│     function() {                                                           │
│         $(this).attr('src', 'minus.jpg');                                  │
│         $('#_' + $(this).attr('id')).css('display','block');               │
│     },                                                                     │
│     function() {                                                           │
│         $(this).attr('src', 'plus.jpg');                                   │
│         $('#_' + $(this).attr('id')).css('display','none');                │
│     }                                                                      │
│);                                                                          │
└──────────────────────────────────────┘

ただ、toggleメソッドは頭が固くて初期表示時に開閉が混在していると役に立たない。
ってことで、以下のようにif文で地道にやるのも全然悪くない。
┌──────────────────────────────────────┐
│$('img').click(function() {                                                 │
│    if ($(this).attr('src') == 'plus.jpg') {                                │
│         $(this).attr('src', 'minus.jpg');                                  │
│         $('#_' + $(this).attr('id')).css('display','block');               │
│    } else {                                                                │
│         $(this).attr('src', 'plus.jpg');                                   │
│         $('#_' + $(this).attr('id')).css('display','none');                │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘

例えば、color要素がこんな感じの場合。
┌──────────────────────────────────────┐
│<span style="color:black;">文字</span>                                      │
└──────────────────────────────────────┘

内容を確認する場合は以下。
┌──────────────────────────────────────┐
│$(this).css("color");                                                       │
└──────────────────────────────────────┘

設定する場合は以下。
┌──────────────────────────────────────┐
│$(this).css("color", "red");                                                │
└──────────────────────────────────────┘

disabledにする(無効にする)。
┌──────────────────────────────────────┐
│$(this).attr("disabled", "disabled");                                       │
└──────────────────────────────────────┘

disabledをはずす(有効にする)。
┌──────────────────────────────────────┐
│$(this).removeAttr("disabled");                                             │
└──────────────────────────────────────┘

「id」が「初期フォーカス」の領域にフォーカスをあてる方法は以下の通り。
┌──────────────────────────────────────┐
│$("#初期フォーカス")[0].focus();                                            │
└──────────────────────────────────────┘

これを画面起動とともに実行してあげればよい。

ただし、その領域がないとエラーとなるので、
以下のように存在するのを確認してから実行するという手段も時には必要。
┌──────────────────────────────────────┐
│if ($("#初期フォーカス")[0]) {                                              │
│  $("#初期フォーカス")[0].focus();                                          │
│}                                                                           │
└──────────────────────────────────────┘