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

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

.ready( )DOMの読込を完了した時の処理を設定

構文

DOMの読込を完了した時の処理を設定返値:jQueryオブジェクト
jQo.ready( function )ver1.0〜
※htmlの構成が読み込まれたら実行されます。画像の読み込みなどには関与しません。

機能

htmlファイル内に記述されたDOM(htmlの構成要素)がすべて読み込まれた(操作可能になった)時に引数のfunctionを実行します。jQuery(function)も同じ機能を持ちます。こちらの方が簡単に記述できるのでこちらを利用することの方が多いでしょう。

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

解説

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

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

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

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

しかし実際は、ブラウザ上に何も表示されません。これはDOM(このサンプルではbody要素)が読み込まれる前に、body要素を操作しようとして失敗するためです。正しく機能させるためにはDOM(このサンプルではbody要素)の読込が完了してから、処理を実行しなければなりません。

DOMを操作しないような処理(例えばXMLファイルを読込む等)は、このjQueryメソッドを利用する必要はありません。なのでタイトルが「すべての」ではなく「ほとんどの」となっています。

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

readyメソッドを利用すれば、DOMの読込を完了してから処理が実行できます。
サンプル(ready/02.html)を開いてbody内の構成はready/01.html同様に何もないことを確認してください。jQueryは以下の様に記述され、readyメソッドの引数にfunctionの「initFunc」が設定されています。ページ全体のDOMの読込を確認するので、セレクタにはdocumentを設定します

$(document).ready(initFunc);

readyメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そしてDOM要素の読込が完了したら実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

readyに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 DOM要素の読込が完了したら実行したい処理
}

サンプルready/02.htmlで利用したinitFuncは以下の様になっており、サンプルready/01.htmlの処理と同じになっています。

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

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

イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(ready/02b.html

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

関連項目

jQuery(function)も同じ機能を持ちます。こちら方が記述が簡単なので、こちらを利用した方がよいでしょう。

メモ

functionの引数に$を設定

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

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

$ = 10;

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

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

次にサンプル(ready/test01b.html)を開いてjQueryを確認してください。以下の様にreadyメソッドの引数に設定したfunctionの引数に「$」を設定している以外は、すべてサンプルready/test01.htmlと同じです。
※2行目先頭のjQueryは「$」にしてはいけません。この時点では「$」は10です。

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

この場合はreadyメソッドの引数に設定したfunction内では、必ず「$」がjQueryを指すため、ready/test01.htmlと異なり、正常に機能します(水色のdiv要素が表示されます)。
この機能はjQuery(function)も利用できます。