jQuery覚書

jQueryのコードの記述場所

$(function(){
    // ここに処理を記述
});
または
$(document).ready(function(){
    // ここに処理を記述
})

ready()はHTMLの準備ができてから実行するためのメソッド。
どちらの書き方でも、
</body>の直前にjQueryの読み込みを記述しなくても良くなる。
jQueryのコードはここから実行されていく。

要素の取得

let var = $('#element')

変数に保存しとかないなら、

$('#element').html();

とかで、変数に代入せずメソッド指定してやりたい処理を書けばおｋ。
CSSのセレクタと同じで、
'#' : 設定したIDを探してくる
'.' : 設定したクラスを探してくる
上の場合なら、id = 'element'の要素を探してくる。

要素の子要素などを取得

スペース区切りで子要素を取得できる

$('#element p');

id ='element'の子要素 p を取得

クラスの場合は、

$('.sample > p');

class = 'sample' の子要素 p を取得する

様々なセレクタ

HTML文書全体を選択したい場合は、次の書き方で取得できる

$(document);

jQueryの様々な機能を提供するjQueryオブジェクト

$(セレクタ);で操作するHTML要素を選択すると、
洗濯したHTML要素を含むjQueryオブジェクトが戻り値として
得られる。
このオブジェクトが様々な機能を提供してくれる。

$('body').html('<p>動作チェック</p>');

bodyの要素を取得して、内容のHTMLを書き換えることができる。

メソッドチェーン

$(セレクタ).メソッドA().メソッドB()

これで、複数のjQueryオブジェクトのメソッドの処理を
まとめて記述することができる。
(でも正直使う場面に出会ったことない・・・)

イベントの設定

$('body').click(function(){
    //イベント実行時の処理
});

これで、クリック時のイベントが設定できる。
設定できるイベントの種類は様々なので、jQueryのリファレンスを
参照すること。

Ajaxでの非同期通信

AjaxSample.js

$.ajax({
    url : // リクエスト先のURL
    dataType: // レスポンスで受け取るデータの形式(例：json等)
}).done(fucntion(data){
    //　通信が成功したときの処理
}).fail(function(data){
    //　通信が失敗したときの処理
});

これで、Ajaxを使用した非同期通信ができる。
.done・.failの引数dataには、レスポンスで得られたデータが
自動的に格納される。
形式は、dataTypeで指定した形式で帰ってくる。
近年では、json形式が一般的。

AjaxはWebAPIからデータを取得するときとかによく使われている。
Ajaxを有名にしたのは、GoogleMaps。
今は何が使われているのか分からんけど。

非同期通信をすることで、ページを再読み込みすることなく、
画面の情報を書き換えることができ、軽快なページを作ることができる。

JSON形式

Zipcode.json

{
    "results":[
        {
            "address1": "東京都",
            "address2": "千代田区",
            "address3": "外神田",
            "zipcode": "1010021",
        },
        {
        },
    ]
}

jsonの中身の例。
プロパティ名はダブルクォーテーションで囲んだ文字列にする必要がある。
WebAPIからデータを持ってくるときはもっぱらjsonなのかな？

jsonp形式

Webページは通常、そのページが設置されている
ドメイン以外のサーバーと通信することができない。

そのため、この問題に対応していない
WepAPIはJavaScriptから直接利用することができない。

この問題を解決するために、「JSONP(JSON with Padding)」という技術がある。
JSONPに対応したWebAPIなら、データもJSONで提供され、
ドメインをまたいで、スムーズに利用することができる。