JQueryの初歩

最近、「コアjQuery＋プラグイン／jQuery UI開発技術実践技法」という本を
読んでいるのですが、

この本です。


jQueryの基本的な部分をまとめておこうと思います。

使い方としては、jQueryのソースコードをダウンロードしてきて、
サーバのディレクトリに置いておき、それをロードして使えば良いのですが、
Googleが提供しているJavaScriptAPIを利用すれば、指定したバージョンの
jQueryのソースコードをGoogleからダウンロードして使う事ができます。

例えば、以下のようになります。

<script src="http://www.google.com/jsapi">
</script>
<script>
 google.load("jquery", "1.7");
 google.load("jqueryui", "1.8");
</script>
<script>
 $(function() {
  $("#datepicker").datepicker({
   dateFormat: 'yy/mm/dd'
  });
 });
</script>

これは、HTMLのidにdatepickerと指定されている要素を取得し、
そこに日付入力ダイアログを表示し、入力後、要素に反映するというコードです。

headタグの所に、上記のコードを入れておくと、ブラウザにページが表示された時には
日付入力ダイアログが表示されるようになっています。

まずは、jQueryを使う上でよくわからないのが、$()です。
これは、「要素の配列を返す関数」だそうです。引数に特定の文字列を指定すると、
ページの中に配置されている要素から条件に一致する要素の配列を返してきます。

例えば、
$("div.header")
と、指定すると、ページの中にあるdiv要素でclass="header"と指定されている要素が
取り出されます。したがって、
$("div.header").hide()
とすると、divタグのclass="header"の要素が非表示になります。

次に、
$("div#header")
と指定すると、ページの中にあるdiv要素でid="header"と指定されている要素が
取り出されます。したがって、
$("div#header").hide()
とすると、divタグのid="header"と指定されている要素が非表示になります。

最後に、
$("div a")
と指定すると、divタグの中に含まれるaタグの要素が取得されます。
$("div a").style.backgroundColor="#FF0000"
とすると、divタグの中に含まれるリンクの背景が赤くなります。

という事で、まとめると、

• $()関数の中に指定する文字列はページ内の要素を取得する条件を指定する。
• $()関数は条件に一致する全ての要素を取得する。
• "."で区切ると、classの条件、"#"で区切るとidの条件、" "（空白）で区切ると要素の中に含まれる要素が取得される。
• "."、"#"、" "は混在（複数の条件を指定）して使うことができる。基本AND条件となる。

これを利用すると、マウスの動きに連動して背景を変えるなんてことも簡単にできるようになります。

他にも、$()関数の引数に関数を渡すと、「ドキュメント・レディ」ハンドラと
言って、JavaScriptでいうと、window.onloadで実行する処理に相当するものだそうです。
したがって、headタグの中のscriptタグ内で、

$(function () {
    $("input#name").hide();
});

なんて処理を書いておくと、inputタグのid="name"の要素を初期状態を非表示にできます。

便利なので、しっかり使ってみたいと思います。