[JavaScript] jQueryの基本的な仕組み：jQuery()はあくまで関数オブジェクト――初心者向け入門

2013 年 3 月 5 日

Contents

基本的にHTMLのDOMエレメントを検索し、それを操作するクロスブラウザのJavaScriptライブラリ。

他に、Ajaxを行う機能など、よく必要とされる処理を手軽に扱えるようにした関数群などもある。

var result = jQuery("img");
// または
var sameResult = $("img");

jQuery()は、あくまでグローバルな関数。固有名詞を関数名に使っているのでわかりづらいが、「searchDomElementByJQuery()」のようなものだと思えばいい。

「$()」は、単純にjQuery()のエイリアス（別名）のようなもの。JavaScriptでは識別子に$の文字を使うことが許されているので、グローバル変数の$に「$ = jQuery;」としているだけ。

ただし、グローバル変数の「$」は他のライブラリでも使われることがあるため、多少面倒でもjQuery()のほうを使うべき。

jQuery()関数の引数に、文字列として検索対象を指定したもの（セレクタ）を渡す。

指定の方法は、CSSの宣言と同じ。たとえば、以下のようなもの。

// div要素の子孫にあるsampleクラスのimg要素を選ぶ
jQuery("div img.sample");

セレクタについて、くわしくはこちら。

jQuery()の検索結果（戻り値）は、jQueryオブジェクトが返ってくる。

これは、標準の配列であるArrayクラスを継承した独自クラスのインスタンス（オブジェクト）。よって、以下のようにそのまま配列としても扱える。

var jqObj = jQuery("img");
var first = jqObj[0];
// 以下のようにもできる
first = jqObj.get(0);

ややこしいが、配列演算子やget()によって返ってくるのは、jQueryオブジェクトではなく標準のDOMElementオブジェクトなので注意。

jQueryオブジェクトとして扱いたい場合は、jQuery()を使う必要がある。

var firstJqObj = jQuery(jqObj[0]);

jQueryオブジェクトはあくまで配列なのでそのままforループで回すこともできるが、jQueryには#each()が用意されている。

その引数にコールバック関数を指定すれば、jQueryオブジェクトが保持しているDOMElementをひとつずつ取り出して処理できる。

jQuery("img").each(function (domElement) {
	var jqObj = jQuery(domElement);
});

この場合も、返ってくるのはjQueryオブジェクトではなくDOMElementなので注意。

jQueryには、さまざまな使いやすい関数が用意されている。これらは、オブジェクトとしてのjQueryのプロパティ（メソッド）に定義されている。

JavaScriptでは、関数もオブジェクトとして扱えるのでこうしたことが可能になっている。

jQuery.trim(str);
// trim()は、文字列の先頭と末尾の空白文字を除去する

jQueryオブジェクトには、それ自体を戻り値として返す関数（メソッド）が多い。

そこで、次のようにメソッドをつないでいける。

jQuery("img").attr("src", "image.png").css("width", "200px").toggle();

鎖のようにつながるので、これをメソッドチェーンと呼ぶ。

jQueryに対応した各種プラグインが非常に多く存在する。

しかし実際には、ユーティリティ関数と同じく、オブジェクトとしてのjQueryにメソッドを新規に追加しているだけ。

// 以下はjQuery Ratyの場合
jQuery.raty();

jQuery Ratyについてはこちら。

そういった事情もあり、jQueryに複数のメソッドを追加するプラグインはまれで、ひとつのメソッドで引数を変えることによってさまざまな操作をするタイプのものが多い。

要するに、jQueryはDOM要素を検索する「jQuery()」と各種関数をプロパティとして持つ「jQuery」（jQuery.xxx()）の二つの機能があるということ。

「jQuery」（$）が関数であると同時に、プロパティを持つオブジェクトでもあるというのが初心者にとってわかりづらいものにしているが、それぞれ分けて考えればいい。

Posted by takasho