1章　jQueryとは？

$ 又はjQueryの基本的な使い方

まず、jQueryでは、使う形式で大きく2つに分けられます。次の2つになります。

1. $(xxx) の形
2. $.xxx() の形

1つ目の形がjQueryの醍醐味になります。本書でもこちらを集中的に見ていきます。一方、2つ目の書き方は、jQueryでは、ユーティリティ関数などと呼ばれています。汎用的に使えるツール群になっています。1つ目の形は、xxxの部分に何を渡すかによって、更に幾つかに分類することができます。本書では、下記の4つに分類しています。ユーティリティ関数については、ここでは説明を省略して、章を改めてまた見ます。

(1) $("セレクター文字列") … セレクターとしての$()

先ほど見ましたが、$("セレクター") という形で、HTMLの要素を選択できます。そして、その選択した要素に対して各種操作をしていきます。セレクターには、CSSのセレクターをそのまま利用できます。CSS3で定義されているCSSも利用することができます。また、jQueryが独自に実装しているセレクタも一部あります。
例えば、以下のようなセレクターなどがあります。

$("p a")
$("#name")
$("#addr1, #addr2")
$("a[href$='pdf']")

1つ目は、p要素の中にあるa要素（リンク）を全て選択します。
2つ目は、id属性がnameの要素を選択します。
3つ目は、id属性がaddr1という要素とaddr2という要素を選択します。（カンマ区切りで複数選択しています）
4つ目は、リンク先がpdfで終わるa要素を全て選択しています。

jQueryは、選択した要素を記憶し、そしてその（それらの）要素に対し各種操作が行えるようになります。このセレクター機能は、jQueryでは常時使用することになります。次の章で改めて見ていきます。

(2) $(関数) … ドキュメント構築後に処理したい作業の登録用としてのjQuery()

まさに上記で見た

jQuery(function ($) {

});

です。上記に書いたように、要素が出現する前に何か操作をしようとしても操作できないため、ドキュメントが構築された後に処理したい作業を登録するためのものです。 実は他にも書き方は存在します。以下のようなものです。（意味する内容は同じです）

// パターン1

$(document).ready(function($){

  // 処理をここに書く

});

// パターン2

$(function($){

  // 処理をここに書く

});

パターン1は、「ドキュメント（document）が構築された後（ready）に、functionの中を実行して下さい」と読めます。 パターン1は、よく使われるため、それのショートカットとして、パターン2が使えるようになっています。 ですので、パターン2を使ったほうが、よりすっきり書けます。

どのパターンだろうと自分の好きなやり方で書けば良いのですが、私のお勧めは、これら2つのパターンではない最初に書いた書き方です。 それは何故かと言うと、最初の書き方であれば、他のJavaScript用ライブラリとの$の変数名の衝突を抑えることができるからです。 例えばprototype.jsというライブラリがありますが、このライブラリも$という変数名を使用します。自分一人だけでWEBサイトを管理していれば良いのですが、通常は複数の人間が関わることが多いと思います。もし新人さんが、prototype.js用のlightboxを使うために、prototype.jsを加えたとすると、$という変数名がバッティングしてしまいます。そして、パターン1、2で書いていたものが、突然動かなくなります。 安全性を高めるためにも、

jQuery(function ($) {

});

の書き方をオススメします。更に付け加えますと、

$ = "hoge";   // ここで$を上書きしても

jQuery(function ($) {

  // この中では、安全に$を使うことができます。

  $("#color_div").css("border", "1px solid red");

  // なのでこの中では、jQueryと書くより、$と書いたほうが楽でいい

});

上記のように、functionの中では、jQueryのエイリアスの$を使い続ける事ができます。但し、function ($) の $ を書き忘れないで下さい。これを書き忘れると、動作しなくなります。

さて、「ドキュメント構築後に処理したい...」と書きましたが、JavaScriptなどのプログラムから操作できるようにするための文書オブジェクトモデルをDOM（Document Object Model）と呼んでいます。このDOMが構築された後に、jQuery(function ($) {.....});で登録した作業が実行されます。
（DOMという用語が馴染めない場合は、HTMLと読み替えて下さい）

jQueryが一般化する前には、以下のような書き方も多く存在しました。

window.onload = function() {

  // 処理をここに書く

};

この書き方とjQueryの書き方とでは何か異なるのでしょうか？ まず、window.onloadの場合は、ドキュメントの構築のみならずに、他の外部ファイルがあった場合などは、それらも読み込みが完了していなければなりません。画像の場合は、画像をダウンロードして表示されていなければなりません。これらが全て終わった後に処理が実行されるため、少し時間がかかります。JavaScriptからHTMLを操作する為には、そこまで待つ必要はありません。その為、jQueryでは、DOMが構築された後に実行されるようになっています。

また、window.onloadの場合、その性質上1度だけしか書くことができません。2回書くと、先に書いたonloadの変数（プロパティ）が上書きされてしまいます。いつ誰がどこで上書きしてしまうか分からないので、この書き方は辞めましょう。jQueryの書き方の場合、何回でも登録することができ、基本的に登録した順番に処理が実行されていきます。

実は、画像などの読み込み完了する前に処理が実行されるというのは、何かと喜ばしいことですが、逆に、画像などの読み込みが完了してから処理を実行したい、というケースもあります。それについては、イベントの章で改めて見ていきます。

(3) $("HTML文字列") … DOM要素の生成

$("HTMLタグ") の形を使い、DOM要素（HTMLの要素）を簡単に作ることができます。例えば、次のようなHTMLがあるとします。

<ul id="family">

  <li>太郎</li>

  <li>次郎</li>

</ul>

ULの最後に<li>三郎</li>という要素を追加したいとします。この場合、こうするだけで完成です。

jQuery(function ($) {

  $("<li>三郎</li>").appendTo("#family");

});

これで、こうなります。

<ul id="family">

  <li>太郎</li>

  <li>次郎</li>

  <li>三郎</li>

</ul>

.appendTo()は、別の章で見ますが、$("<li>三郎</li>")で生成したDOM要素をid="family"のUL要素に追加しています。

このDOM要素の生成機能は、もう少し先でまた説明します。

(4) $(DOM要素 又は jQueryオブジェクト) … セレクター的役割

DOM要素を$()に渡すことにより、それをjQueryオブジェクトとすることができます。DOM要素以外にも、documentやwindowオブジェクトを渡すことができます。

// eleは、DOM要素。div1は、$("#div1") と同じこと

var ele = document.getElementById("div1");

var div1 = $(ele);

var w1 = $(window).width();   // ブラウザの横幅取得

var w2 = $(document).width(); // HTMLドキュメントの横幅取得

// 後の章でこの形で登場します

$(this)

また、jQueryオブジェクト自身を$()に渡すことができます。jQueryを渡してjQueryを得ますので、一見意味なさそうにも思えますが、中上級になってくると役に立つ機能です。