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に詳しい技術者を募集しています!

関連記事

jQuery.ime_external Pluginを作成しました。

jQuery.autouploader Pluginを作成しました。

jQuery.brbr Pluginを作成しました。

全画面ジャック型のblogpartsを1ファイルで作成する方法

jQuery.dataの使い方

blogpartsでjQueryを使うときの読み込み方

jQueryのイベントネームスペース

(2008/12/16 関連記事を追加しました。よろしければあわせてご覧ください)

(2010/08/11 移行時に崩れていた部分を修正しました。最新バージョンでの確認を行いました)