公開日

jQuery使いが知っておくべきjQueryテクニック8選

目次

本記事はjQuery Advent Calendar 2013の23日目の記事となります。今回はjQuery使いとして覚えておきたいテクニックを個人的に8つピックアップしてみました。

日本との時差の関係で更新が24日になっているでしょうが気にせずいきましょう。

1. jQuery 2.x vs 1.x

１つ目はテクニックというよりTipsになります。jQueryには最新版の2.x系と1.x系があります。さてどのようにバージョンを選べばいいでしょうか？

2.x系からの大きな変更点としてはIE6/7/8のサポート廃止です。一方、1.x系はIE6/7/8ブラウザをサポートしています。

よってまとめるとIE6/7/8をサポートしたいのであれば1.x系を使用、サポートしないのであれば2.x系を使用しましょう。2.x系のほうがサイズも小さく、速度も早いので旧ブラウザを切れるのであれば2.x系を推奨です。

2. イベントハンドリングには on() を使うべし

イベントハンドリングのメソッドがjQuery1.7以前だとbind(),live(),delegate()やらいろいろあったのが、jQuery1.7でon()でまとめられました。

ではここで疑問。click()などではなく、on()を使うことで何が嬉しいのでしょうか？　大きく３つあります。

１つ目は複数のイベントを登録できるということです。下記ではclickとmouseenterの２つのイベントを１つの処理にアタッチしてます。

２つ目、オブジェクトを引数に取ることができ、複数イベントをアタッチできます。

３つ目、第二引数にアタッチ先のセレクターを指定することができます。これでなにが嬉しいかというとAJAXなどで遅延して取得してくるような要素に対しても事前にイベントを設定することができます。

いわずもがなですがoff()でイベントをデタッチできることもon()の良い所です。

3. AJAXには done(), fail() を使うべし

去年のjQuery Advent Calendarで書いた通りです。

$.ajax({
    url: "ajax.html",
    success: function(data) {
       alert('success!!');
    },
    error: function(data) {
       alert('error!!!');
    }
});

上記の書き方よりも、

$.ajax({
    url: "ajax.html",
}).done(function(data){
    alert('success!!');
}).fail(function(data){
    alert('error!!!');
});

こっちのほうがPromiseでモダンな形式です。

4. ajax()だけじゃなくショートカット・メソッドも活用すべし

ajax()がオプションで色々出来過ぎちゃってついついajax()を使いがちですが、jQueryにはAjaxショートカットメソッドがあるんです！

例えばデータをPOSTするAJAX。下記にajax()とpost()の二通り書き方を載せましたが、post()のほうがシンプルでよさ気ですね。

5. find() を使って絞り込むべし

これもわりと有名ですかね。下記のセレクタは、

$('.foo #bar')

find()を使ったほうが良いとされています。

$('.foo').find('#bar')

6. カスタムイベントを定義する

下記のコードではshow.priceというカスタムイベントを定義しています。クリック時にshow.priceイベントをtrigger()しています。

7. 属性を指定してDOMエレメントを生成できる

こんな感じでAタグが生成できます。

$('<a>', {href: 'http://google.com/', title: 'google'}).text('google')
// [<a href=​"http:​/​/​google.com/​" title=​"google">​google​</a>​ ]

$.mapと組み合わせるとなかなかよいかもしれません。

var links = $.map(['google.com', 'yahoo.com'], function(link) {
    var list = $('<li>');
    $('<a></a>', {href: link}).text('LINK').appendTo(list);
    return list;
});

$('<ul>').html(links)
// => [<ul>​
//        <li>​
//        <a href=​"google.com">​LINK​</a>​
//        </li>​
//        <li>​
//        <a href=​"yahoo.com">​LINK​</a>​
//        </li>​
//    </ul>​ ]

8. form送信時は serialize() を使って値をまとめて取得すべし

serialize()を使うことでform内のinputの値をまとめて取得できます。

参考

関連記事