1章 jQueryとは？
jQueryの基本
このページでは、jQueryの基本について学びます。しかし、基本とはなっていますが、仕組みや概念の説明のため、他の「セレクター」などの章に比べると、難しい部分もあると思います。ですが、一通り読み進めて下さい。中でも大事な部分は、jQueryを書く時は、
jQuery(function ($) {
// この中に処理を書く
});
上記の中に書いていくという事をしっかり覚えておいて下さい。
なお、本書では、これはjQueryのお決まりみたいなものなので、これ以降は、この記述自体は書かずに、その中身部分のみを記載してきます。
jQueryの基本サンプル
jQueryの主な（基本的な）機能は、HTMLとCSSを操作するためのものです。操作対象とするHTMLを選択する時は、お馴染みのCSSのセレクター構文がそのまま使えます。そして、CSS等を操作するために、jQueryのメソッドを使えばいいのです。 まずは、サンプルを見てみましょう。
<html lang="ja">
<head><meta charset="utf-8">
<title>jQueryのテスト</title>
<script src="/js/jquery-1.10.2.min.js"></script>
<script>jQuery(function ($) {
$("#color_div").css("border", "1px solid red");
});
</script></head><body><div id="color_div">ここのDIVの枠線をjQueryで変更します</div>
</body></html>実行結果
jQueryは、$(...) 又はjQuery(...) という形で使用していきます。$は、1文字ですが、これが変数になっています。（少し異様な気もしますが、JavaScriptでは、$という変数名が付けられます）そして、この$は、jQueryのエイリアス（別名）となります。基本的にはどちらを使っても大丈夫です。
上記を解説しますと、まず、
jQuery(function ($) {
});
の部分は、後ほど解説するとして、CSSの設定を変更しているのは、
$("#color_div").css("border", "1px solid green");
の部分です。
まず、CSSでお馴染みのセレクタでHTMLのdiv要素を選択します。
続けてその取得したdiv要素に対し、jQueryメソッドの.css("", "")を適用して、CSSを設定しています。
$("セレクター").css("CSSのプロパティ", "CSSの値");
という形になっています。（後の章で、改めて詳しく解説します）
では、
jQuery(function ($) {
});
の部分は、何でしょうか？
これは、JavaScriptは上から下に順に解釈され実行されて行きますが、この $("#color_div") 部分が登場する時点では、まだ該当のHTML（#color_div）が登場してないため、正常に処理を行うことができません。本来はブラウザのHTMLの読み込みが完了した時点又は操作対象の要素が登場し終えた時点で、この処理を書く必要があります。その為、ブラウザのHTMLが読み込みが完了した時点で作業を開始させるために、一連の作業をこのjQuery(function ($) {.....});の中に書き、処理を登録しておくのです。そして、jQueryでは、HTMLの読み込みが完了した時点で、jQuery(function ($) {.....}); の中に書いた一連の作業を実行してくれます。実際、どういう事か下にまとめてみました。
<script>// この書き方は、#color_divが、まだ登場していないのでアウト！$("#color_div").css("xxx", "xxx");
</script><div id="color_div">...</div>
<script>// これならOKjQuery(function ($) {
$("#color_div").css("xxx", "xxx");
});
</script><div id="color_div">...</div>
<div id="color_div">...</div>
<script>// これもOKjQuery(function ($) {
$("#color_div").css("xxx", "xxx");
});
</script><div id="color_div">...</div>
<script>// jQuery(function ($) {.....});で囲っていないが、// #color_divが登場した後なので、OK$("#color_div").css("xxx", "xxx");
</script>jQueryは、HTMLを操作するのが基本の作業であるため、jQueryを書く時には、jQuery(function ($) {.....});で囲むのが基本になります。
少し慣れてくると、jQuery(function ($) {.....});の中に書かなくてもドキュメントの下部（bodyタグの直前など）であれば、直接書けることが分かってきますが、やはり基本的には、jQuery(function ($) {.....});の中に処理を書くと覚えておきましょう。このjQuery(function ($) {.....}); については、下でまた改めて見ます。