jQueryを使うときに気をつけるべき8のポイント
DAHONのBoardwalkを修理しようとしておもいっきり壊してしまいました。agoです。
普段はjQueryをメインで使用しているのですが、使っていていくつか注意すべき点があったのでまとめてみました。
（一部jQueryではなく、DOMの仕様上の制限も含まれています）
1 $().filterにstring以外のものを渡すとエラー
1.4系では修正されていました
$().findや$().notは大丈夫ですが、$().filterの場合引数にjQuery objectや配列、html elementなどを渡すとエラーになります。
（たとえばjQuery objectを渡した場合、Firefoxでは「TypeError: t.substring is not a function」というエラーが発生します）
ちなみに、$().findや$().notはstring以外も渡せるため、以下のような記述が可能です。
（クリックされたa tag「以外」のa tagの件数を数えます）
$('a').click(function (e) { e.preventDefault(); console.log($('a').not(this).length);});2 IE6で<button>のvalueを.val()経由で取得できない
IE8では修正されていました
IE6では<button value="value">text</button>の内、value="value"の値を$(this).val()経由で取得することができません。
ただ、これはFirefoxでは正常に取得できるため、IE6では通常のDOM経由でも取得できないのかもしれません。
3 $.mapで配列を返すと、展開されてひとつの配列が返る
[[0,1,2], [3,4,5]]...という形式の配列がほしい場合、$.mapの最後に単純な配列objectを返すとひとつに展開されて返ってきます。
（[0,1,2,3,4,5]という形式で返ってきます）
（[[0,1,2], [3,4,5]]が展開されて、[0,1,2,3,4,5]の件数が表示されています）
もし、配列を入れこのまま取得した場合、さらにもう一段階入れ子にした状態で返す必要があります。
（[[0,1,2], [3,4,5]]の件数が表示されています）
4 $.getJSONでJSONとして解析不能な値が返るとcallback functionを呼んでくれない
$.getJSONはJSON以外のものが返った場合、callback functionの呼び出しを行ってくれません。
もし、JSON以外のものが返る可能性がある場合や、リクエストの成否を確認したい場合などは$.ajaxを使用する必要があります。
（「$.getJSON('/', function () { alert('get') });」を実行しています）
5 IE6でselectに対してoptionを追加後、.valで値を設定しようとすると「selected プロパティを設定できませんでした。未定義のエラーです。」が出る
jQueryでoption要素を追加した際の諸問題 - むつらつれづれ
IE6でselect boxに<option>を追加した直後、その追加した値を.valで設定しようとすると上記のエラーが発生します。
（設定する値が追加した値以外の場合、正常に設定できます）
この場合、上記のページでも紹介されているように.width()しても解決しますが、念のためsetTimeout(function () {}, 0);してしまったほうが安全かもしれません。
（実行順がずれてしまう問題はありますが。。。）
確認する（エラー）
確認する（setTimeout）
具体的には以下のようなコードとなります。
$('select:first') .append( $('<option>') .val('append') .text('append') ).val('append') // 追加した値以外を.val()で選択するのはOK;6 Firefoxでdocument.bodyに追加されていない:checkboxに対するcheckedが.html()に反映されない
Firefoxでは$('<input type="checkbox" checked="checked">')の内容を.html()で出力すると、checked="checked"の部分が出力されません（<input type="checkbox">になる）
これに関しては$('<input type="checkbox" checked="checked">')も、$('<input type="checkbox">').attr('checked', true)も同じように反映されませんが、いったんDOM treeに追加した後であれば正常に取得できます。
7 :checkboxのcheckedがIEとFirefoxによって形式が違う
Firefoxは<input type="radio" checked="checked">と返りますが、IEは<input type="radio" CHECKED>と返ります。
8 IE6で複雑な要素をDOM treeに追加しないまま操作すると、正常に反映されない場合がある
最後は実証コードを示せないため申し訳ないのですが、IE6でイベント等も絡めた複雑な要素をDOM treeに追加しないまま操作すると、一部の内容が正常に反映されない場合があります。
具体的には以下のようなコードですが、発生条件等はつかめていません。
（最近は必ずDOM treeに追加してから操作しているので）
var div = $('<div>') .addClass('hoge') .attr('id', 'huga') .append('<a>') .find('a:last') .attr({'id' : 'gege', 'href' : '#'}) .click(function (e) { e.preventDefault() }) .end() .append('<select>') .find('select:last') .append('<option>option1</option>') .append('<option>option2</option>') .append('<option>option3</option>') .change(function () { console.log(this) }) .end() .end();$().append(div);「jQueryを使うときに?」というタイトルではありますが、ブラウザの差異に起因する部分や、DOM自体の制限に起因する部分も多いと思います。
関連記事
jQuery.ime_external Pluginを作成しました。
jQuery.autouploader Pluginを作成しました。
全画面ジャック型のblogpartsを1ファイルで作成する方法
（2008/12/16 関連記事を追加しました。よろしければあわせてご覧ください）
（2010/08/11 移行時に崩れていた部分を修正しました。最新バージョンでの確認を行いました）
