細かすぎて伝わらない かも知れない jQueryの勘所10選 （jQuery 1.0.4 版）
jQuery も１歳の誕生日を迎え、jQuery 1.1.1 が出ておりますが、
様子見で、まだ使っておりません。
良さそうですね。
で、AoD も来月で１歳の誕生日なので、記念と称して、
今となってはもう必要ない jQuery 1.0.4 の私的勘所を10個にまとめて見ました。
１．エレメントの内容の設定には、$.html() は使わない。（参照は良い）
$.html() は、innerhtml というアトリビュートを勝手に作ってしまい、
そこにも２重に内容を書き込んでしまう。（FireFox とか Safari で）
対策は、$.empty().append() を使って、内容をクリアしてから、追加する。
これだと、余計なものは作られない。
$('#test').html('中身');
$('#test').empty().append('中身');
最近のブログ投稿画面によくあるブラウザ上の“WYSIWYG型”HTMLエディターで、
スクリプトが動いてしまうと、余計なものまでコンテンツに入ったまま保存されてしまうので、注意が必要。
普通の場合でもメモリ食いそうだけどね。
２．$.trim() を使う。
$.html()で取得して、その内容に対して文字列操作をする場合、
ブラウザによって、タグ直後の空白文字を含めるブラウザ（IE以外）と
含めないブラウザ（IE）があるので、$.trim() してからやるのが安全。
$('#test').html().charAt(0);
$.trim($('#test').html()).charAt(0);
３．$.css() では一括指定プロパティは使わない。
例えば、背景画像を設定するのに、background ではなく、background-image を使う。
background を使うと、画像だけでなくて、FireFox とかで -moz 系のプロパティまで勝手に追加されてしまう。
悪さはしないけど、気持ち悪い。
$('#test').css({
'background': 'url(http://www.xxx.com/images/xxx.jpg)'
});
$('#test').css({
'background-image': 'url(http://www.xxx.com/images/xxx.jpg)'
});
４．$.attr() でのJSONの書き方。
普通
$.attr({
id : 'test',
class: 'test'
});
$.attr({
'id' : 'test',
'class': 'test'
});
たぶん、class が何かの予約語になってる感じ。
５．$.param() は便利。
XMLHttpRequest や JSONScriptRequest など、Ajax で動的な呼び出しをする際に、
パラメタを $.param() を使って生成する。
JSON とかを渡すと、全ての値に encodeURIComponent() でエンコードしてから、
& で区切ったCGIパラメタ文字列を生成してくれる。
var url = url + '?' + $.param({
'url' : 'http://www.xxx.com/xxx/',
'test': true
});
６．$.appendTo() も便利。
エレメントを追加する場合、普通は document.createElement() を使うけど、
jQuery の場合は、$.appendTo() だよね。
ちゃんと 新しく生成されたエレメントの jQuery オブジェクト返すし。
var $img = $('<img />').appendTo('#test').css({
'display': 'block'
}).attr({
'class' : 'hoge',
'src' : 'hoge.gif',
'border': '0',
'width' : '22',
'height': '22',
'alt' : 'hoge',
'title' : 'hoge'
});
７．script タグや style タグは head に追加する。
style タグは、もちろん head に追加しないとW3C準拠でない。
script タグは、単純に document.body.appendChild() してしまうと、
コンテンツ内にそのスクリプトがあった場合、
例の“WYSIWYG型”HTMLエディターで保存する度に script タグが追加されて、
えらいことになる。
これは、jQuery 固有のことじゃないけどね。
ロード時はまだ jQuery が使えないこともあるし、jQuery 自体を動的にロードする場合、
document.getElementsByTagName('head')[0].appendChild(script);
document.getElementsByTagName('head')[0].appendChild(style);
８．jQuery は head に入れないと。
IEでおかしなことになる場合ある。
それは、ロード時の処理に、
document.write("<scr" + "ipt id=__ie_init defer=true " +
"src=//:><\/script>");
これが head にないとうまく機能しないばかりか、IEがおかしくなる（固まる）場合がある。
AoD ! では、これに反して、jQuery を動的にロードしているので、
この行をコメントアウトして、別の方法を取ってます。
９．jQuery と Prototype の共存方法。
jQuery 1.0.4 の17行目にある。
var $ = jQuery;
var $$ = jQuery;
さらに、ロード後にもう一度、
window.$$ = jQuery;
if (typeof jQuery._$ != "undefined") window.$ = jQuery._$;
※でも最近 Prototype 1.5.0 で $$ が出てきたらしいので、他の文字がいいかも。
$ や $$ は使わずに、「jQuery」をそのまま使うのが一番安全ですね。
その場合は、
var $ = jQuery;
10．フォームの処理が簡単。
$('#form1 input:checked').each(function() {
params[this.name] = this.value;
});
$('#form1 input:text').each(function () {
params[this.name] = this.value;
});
$('#form1 select').each(function () {
params[this.name] = this.options[this.selectedIndex].value;
});
ということで、ちょっとでも参考になれば。ならないかも。。。
私的メモということで。
（間違ってたら教えて下さい（＾＾）