jQuery初心者が感じた「便利！」と「こうした方がいいかも」と「孔明の罠」

javascript jQuery

現在ガシガシとjavascriptを書きまくっているのですが，jQueryを知ってからやっとjavascriptを書くことが楽しいと感じるようになりました．
そこでjQuery歴1ヶ月のヒヨっ子が「jQueryって便利だなぁっ！」または「jQueryのここは落とし穴だったわー」と感じたことをまとめてみたいと思います．
間違い or 勘違いを含んでいる可能性が大いにありますのでそのあたりはご了承下さい．．．



■便利！！セレクタ全般

まず外せないのはドル関数と呼ばれる$()またはjQuery()の引数として使う要素を取得する記法，セレクタです．
基本的なことは置いといて（id属性を持つ要素の取得は$('#id_name')だとか），ちょっと困ったのがname属性を持つ要素一覧の取得方法です．

正しいかどうか分かりませんが，自分はこうしてます．

// name属性がradio_nameであるラジオボタン要素一覧
// 'tag名[name="name属性"]'
$('input[name="radio_name"]')

ラジオボタンの例を出しましたので，その中でチェックが入っている要素の値を取得する方法です．

// ラジオボタン一覧の中でチェックされている要素のvalue
$('input[name="radio_name"]:checked').val();

ちなみにセレクトボックスから選択されているもののvalueを取得する場合は

// selectboxは単品である場合が多いのでid属性で取得
$('#id_name option:selected').val();

チェックボックスの場合は

// これだけで配列として返る
$('input[name="checkbox_name" :checked').map(function(){
    return $(this).val();
}).get();

です．



■jQueryオブジェクトは頭文字に$をつける！

jQueryオブジェクトと普通のDOMが混ざったコードだと視認性が著しく低下する恐れがあるため，その変数がjQueryオブジェクトなのか普通のDOMなのか明確にするために変数名に$を付けると分かりやすい．



■普通のDOMでもjQueryメソッドを使いたい！

普通のDOMでも一瞬だけjQueryのメソッドを使いたい場合はjQuery(normal_dom)とすれば使えます．

// div_elmから全ての要素を削除したい
jQuery(div_elm).empty();

このjQuery()も便利ですがempty()が神すぎます．

ちなみにdiv_elmそのものを削除したい時にはremove()を使います．

// div_elmを削除
jQuery(div_elm).remove();

■便利！！要素にイベントを付加するbind()

前回のエントリでイベントリスナ関数について書いていましたが，これで十分でした．jQuery恐るべし．

// クリックイベントでクリックされた要素のvalueをアラート表示
$(#id_name).bind('click', function(){
    alert($(this).val());
});

はぁ・・・



■便利！！要素の生成

次は要素の生成です．これを使うととってもスマートにコードが書けて楽しくなります．
もう

var a_elm = document.createElement('a');
a_elm.setAttribute('href', './sample1.html');
a_elm.setAttribute('id', 'sample_link');
a_elm.setAttribute('target', '_blank');

などと書かなくていいと思うと胸が熱くなります．

上記のコードは

// $('<タグ名>')で生成
// attr({属性名:'値'})で属性を指定
var $a_elm = $('<a>').attr({
    href: './sample1.html',
    id: 'sample_link',
    target: '_blank'
});

と同じです．


注意すべきなのはマニュアルにあるのですが，input属性だけは生成と同時にtype属性を指定しなければならないそうです．

// input生成と同時にtype指定
// 指定する属性が一つであればattr('属性名', '値');でもおｋ
var $a_elm = $('<input>').attr('type', 'button');

また，css()でCSSプロパティを指定することもできます．

// div生成と同時にcss指定
var $div_elm = $('<div>').css({
    margin:'10px 5px',
    color: '#AAAAAA'
});

■注意！！css()のプロパティ名

上記のcss()はとても便利なのですが，たぶん多くの人が引っかかるであろう部分があります．
それは上記のようにプロパティを{}で指定した時です．
{}を使った場合のcssプロパティ名はハイフンを使ってはいけません！！！
例えば

// div生成と同時にcss指定
// これは動かない
var $div_elm = $('<div>').css({
    margin:'10px 5px',
    font-size: '16px'
});
// これは動く
var $div_elm = $('<div>').css({
    margin:'10px 5px',
    fontSize: '16px',
    fontColor: '#000000'
});
// ('プロパティ名','値')の場合は普通でおｋ
var $div_elm = $('<div>').css('font-size', '16px');

このようにプロパティ名をfontSizeやtextAlignという名前にしないと動きません．
これで何時間つぶれたかと思うと・・・．
本来はクラスをつくっておいてそれをaddClassするほうがいいと思いますけど．



■関係ないけど関数名を引数で渡して関数の中で関数を実行出来る

これはコードを参考に．

// 中で実行する関数を定義
function innerFunc()
{
    alert('関数内でこれを実行できた！');
}
// 外の関数定義
function outerFunc(fn)
{
    fn();
}

// こうすればアラートが実行出来ちゃう
outerFunc(innerFunc);

これは個人的に大ヒットでした．
自分はよく要素を生成してbind関数でイベントとコールバック関数を付加，という関数を書くのですが，その関数を使って同じような要素を生成する場合でも要素によって異なるコールバック関数を付加することがありました．そういう時にそのコールバック関数名を渡してあげれば同じ生成関数で出来ちゃうところがすごいと思いました．


とりあえずこんなところでしょうか．
javascriptとjQueryは慣れるとホントに楽しいので，レガシーなjavascriptの書き方に飽きて，もういやだ！と感じた方は，ぜひjQueryとかjQueryUIとか使うのがお勧めです．

※いきなりjQuery使うとjavascriptってそういうもんだ，という先入観が出来てしまうので，まずは普通なDOM関数，レガシーな書き方を覚えたほうがいいかもしれません．