jQuery備忘録

完全に自分用のメモ。

スクリプトを読み込む順番

jQueryを利用したjavascriptファイルmain.jsがあるとする。

1. main.jsを読み込む前にjQueryを読み込む必要がある
2. main.jsを読み込む前にDOMが生成されていなければならない。

プロパティへのアクセスの方法

jQueryオブジェクト内のDOM要素のプロパティにアクセスするには、専用のメソッドを介して行う方法とDOM要素から直接参照する方法がある。

次の2つの書き方はどちらも同じ結果をコンソールに出力する。

//  jQueryオブジェクトからアクセスする方法と、DOMオブジェクトからアクセスする方法
// $(this)はjQueryオブジェクトであり、DOM要素とjQuery用の情報を配列として格納している

$('button').on('click', function(){

    console.log($(this).text());
    console.log($(this)[0].innerText);

});

アロー関数と$(this)

コールバック用の関数にはアロー関数を使うことが出来るが、その場合$(this)が使えなくなる。$(this)のような使い方がしたければ引数を使えばよいが、その引数はjQueryオブジェクトではなくイベントオブジェクトになるのでjQueryの記法が使えない。

// アロー関数を用いたコールバック

$('button').on('click', (event)=>{

    // アロー関数内では$(this)は使えない
    console.log(event.target.innerText);

});

ajaxと$(this)

ajaxの処理中ではjQueryの$(this)は使えない。あらかじめキャッシュしておくのがよい。

$('button').on('click', function(){
    let btn = $(this);

    $.ajax({
        type: 'post',
        url: 'hoge.php',
        data: {
            'test':btn.text()
        },
        dataType: 'json' 
    })
    .done(function(data){
        console.log(data['ret']);
    })
    .fail(function(){
        console.log('ajax failed');
    })

});

ajaxのコールバック関数を書く場所

たまにやりがちなのだが、ajax通信成功時の処理を.done()の外に書いてしまうと通信結果を受信する前に処理を実行してしまう。

$('button').on('click', function(){
    $.ajax({
        type: 'post',
        url: 'hoge.php',
        data: {
            'test':'fuga'
        },
        dataType: 'json' 
    })
    .done(function(data){
        console.log(data['ret']);
    })
    .fail(function(){
        console.log('ajax failed');
    })

    // ここに書かれた関数はたいていdoneやfailのコールバックより先に実行される
    console.log('hoge');
});

参考

jquery-master.net

codecodeweb.com