jQueryのコードを良くする5つのTIPS

5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。

$('selector').attr('alt', 'this is the data that I am storing');
 // then later getting that data with
$('selector').attr('alt');

「alt」などのHTMLにデータを保存しておくと後で取り出せなくなってしまうことがあるから良くない。

$('selector').data('meaningfllname', 'this is the data I am storing');
 // then later getting the data with
 $('selector').data('meaningfullname');

変わりにjQueryのdataメソッドを利用しよう。これはページの要素としてデータを関連付けることが出来る。

※補足(to-R)

dataメソッドはDOM要素にデータをストレージしておく為のメソッドです。

サンプルではbody要素にmeaningfullnameと言う名前で、データを保存しておき、ボタンがクリックされた際に取得しています。

jQueryにはたくさんのセレクタがある。CSSセレクタだけではなくjQueryのオリジナルセレクタも多用しよう。

よく利用するのは以下のセレクタです。

:input

例：:inputはページ内のinput要素、select要素、textarea要素などを指定できます。

[attribute=value]

例：input[name='container']はname属性の値がcontainerのinput要素

:eq(index)

例：table:eq(3)はページで4個目のtable要素

livequeryプラグインを利用すると、あとで追加する予定の要素に対してイベントをバインドしておくことが出来ます。

$('div.edit').livequery('click', function(){
//go into edit mode
});

$('span.flag').livequery(function(){
// run this function when a span with class "flag" is added to the page
});

Ajaxを利用してたくさんの要素を操作し、イベントを制御するときに便利です。

$(form).ajaxSubmit();

という簡単な記述でformの送信が出来る。

addClassメソッドを利用してclassを追加しておけば、hasClassメソッドを利用してflagとして利用することが出来る。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー