jQuery勉強はじめ

javascript

実はjQueryを全く使ったことがなかったので、ちょっとjQueryくらい使えないとまずいんじゃなかということで勉強開始です！とりあえず同僚の書いたソースコードのコードリーティングから始め、その中に書いてあって自分がふむふむと思ったことをガシガシ書いていきます。

  • ドルマークでくくった無名関数は、Documentの読み込み完了時にこの関数を実行する。

document.body.onloadみたいなもんですかね。HTMLの各要素が終わった後にScriptを呼び出すことで参照不能な要素に参照してしまうというバグを回避する基本テクニック。

$(function(){ 
  alert("document on load!!");
});

ドルマークはjQueryオブジェクトの識別子になっていて、jQuery由来の機能を呼び出すのに使える。

本来、ドルマークはjavascriptにおいて通常の文字、つまりこんなこともできてしまう。

var $ = "hoge";

jQueryはこれをjQueryオブジェクトの識別子として使っているようで、下記の2つは同じものになる。

$(#main image)
jQuery(#main image)

しかし、zepto.jsやprototype.jsのようにドルマークを識別子として利用しているJSライブラリは多く、複数のJSライブラリの使用が見込まれる場合はドルマークではなくjQueryと書いておいた方が良さそうだ。

その他各機能の書き方

Ajaxの機能は下記のように実装できる。

$.ajax({
    url:"http:://www.example.com/get_hoge",
    success:function(data){
        alert(data);
    },
    error:function() {
    	alert("AJAX ERROR");
    }
});

詳しくはjQuery APIレファレンスを参照だが、urlのアドレスにHTTPリクエストを投げ、成功した場合はsuccessの関数が呼ばれ、失敗した場合はerrorの関数が呼ばれる。successの中にあるdataはリクエストの結果戻ってきたデータ構造が入っている。