デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery(function)DOMの読込を完了したときの処理を設定

構文

DOMの読込を完了したときの処理を設定返値:jQueryオブジェクト
jQuery( function )ver1.0〜
※jQueryは$で置き換えることができます。 例:$(testFunc)

機能

htmlファイル内に記述されたDOM要素がすべて読み込まれた(操作可能になった)時に引数のfunctionを実行します。readyメソッドの省略型です。

勘違いしやすいのは、画像などの読み込みは関係ない点です。純粋にDOM要素の読込が完了したときにfunctionを実行します。画像などの読み込みの完了にはloadメソッドを利用してください。

解説

ほとんどjQueryはDOMの読込が完了してからでないと利用できない

jQueryでページ内の要素を操作するときには、操作したい要素が読み込まれている必要があります(DOM要素の部分が必要なだけで、付随する画像などが読み込まれている必要はありません)。DOM要素が読み込まれる前にjQueryを実行しても機能しません。

サンプル(jquery3/01.html)を開いてbody内には何も無いことを確認して下さい。jQueryには以下の1行だけが記述されています。appendToメソッドを利用してdiv要素をbody内に追加するだけです。css設定でdiv要素は水色の正方形で表示するようにしてあるので、追加されればすぐに確認できます。

jQuery("<div/>").appendTo("body");

しかし実際は、ブラウザ上に何も表示されません。これはDOM要素(このサンプルではbody要素)が読み込まれる前に、body要素を操作しようとして失敗するためです。正しく機能させるためにはDOM要素(このサンプルではbody要素)の読込が完了してから、処理を実行しなければなりません。
DOM要素を操作しないような処理(例えばXMLファイルを読込む等)は、このjQueryメソッドを利用する必要はありません。なので見出しが「すべての」ではなく「ほとんどの」となっています。

DOMの読込を完了したときの処理を設定

jQueryメソッドを利用すれば、DOM要素の読込を完了してから処理が実行できます。
サンプル(jquery3/02.html)を開いてbody内の構成はjQuery3/01.htmlと同様に何もないことを確認してください。jQueryでは、まず以下の部分を確認してください。

jQuery(initFunc);

jQueryメソッドによって、すべてのDOM要素の読込が完了したらinitFuncが実行されます。initFuncは以下の様に記述され、サンプルjQuery3/01.htmlの処理が設定されています。

function initFunc(){
	jQuery("<div/>").appendTo("body");
}

つまり、すべてのDOM要素の読込が完了したら(DOM要素が操作できる状態になったら)initFuncを実行して、body要素にdiv要素を追加します。結果として正常に機能し、ページを開くと水色のdiv要素が表示されます。

jQueryはDOM要素を操作ために利用することが多いので、ほとんどのケースで、このjQueryメソッドが必要になります。

無名関数の利用

functionをたくさん作成しすぎると管理するのが(名前の重複とか)大変です、ですので1回作成しておけば良いようなfunctionは無名関数として、直接jQueryの引数に設定します。

サンプル(jquery3/03.html)を開いてjQueryを確認してください。以下の様にjQueryメソッドの引数に直接functionが設定されています。見た目は分かりにくくなりますが、function名を設定する必要が無く、名前の重複の心配もありません。

jQuery(function () {	
	jQuery("<div/>").appendTo("body");
});

サンプルを開くと水色のdiv要素が表示され、問題なく機能するのが確認できます。

メモ

functionの引数に$を設定

jQueryメソッドに設定するfunctionの引数に「$」を設定すると、function内で「$」は必ずjQueryを指すようになります。これは他のjavaScriptライブラリと合わせて利用する際などに利用します。ただしfunction内での$がjQueryに固定されるので、他のプラグインと混在させるのには向きません。混在して処理を書く場合はjQuery.noConflict()を利用したほうが良いでしょう。

サンプル(jquery3/test01.html)を開いてjQueryを確認してください。他のライブラリを利用する代わりに以下の様に「$」に別の値(ここでは10)を設定しています。

$ = 10;

そのため続く以下の処理で「$」がjQueryではないため、正常に機能しません(水色のdiv要素が表示されません)。

jQuery(function() {
	$("<div/>").appendTo("body");
});

次にサンプル(jquery3/test01b.html)を開いてjQueryを確認してください。以下の様にjQueryメソッドの引数に「$」を設定している以外は、すべてサンプルjQuery3/test01.htmlと同じです。

$ = 10;
jQuery(function($) {
	$("<div/>").appendTo("body");
});

この場合はjQueryメソッドの引数に設定したfunction内では、必ず「$」がjQueryを指すため、jQuery3/test01.htmlと異なり、正常に機能します(水色のdiv要素が表示されます)。他のライブラリをメインで利用し、一部分だけjQueryを利用する時などには便利なのかもしれません。