サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

jQuery: ドキュメントの準備が整ったら関数を呼び出す ー .ready()メソッド


DOMにアクセスする準備が整ったとき実行したい処理を、ハンドラ関数として定めるメソッドです。

.ready()メソッド
文法 .ready(handler:Function):jQuery
概要

DOMがすべて読み込まれたときに呼び出すハンドラ関数を定める。
引数

handler － DOMの準備ができたら呼び出す関数。
戻り値 jQueryオブジェクト。

説明

JavaScriptに備わるloadイベントを用いると、ページが描画され終えたときリスナー関数を呼び出せます。ただし、このイベントは、画像などの素材がすべて読み込まれてから起こります。けれど多くの場合、DOMの階層構造が組み上がりさえすれば、コードを処理して構わないでしょう。.ready()メソッドに与えたハンドラ関数は、DOMの準備が整い次第呼び出されます。つまり、素材の読み込みを待つことなく、直ちに処理が進められるのです。具体的には、DOMContentLoadedイベントで実行されることになります(「window.onloadとjQueryの$(document).ready等の比較」参照)。なお、CSSスタイルのプロパティ値に関わる操作は、先にstyle要素や外部CSSファイルを参照しておくように注意してください。

読み込んだ素材の情報(たとえば画像の大きさ)にもとづく操作をするときには、.load()メソッドにハンドラ関数を定めます。.ready()メソッドで与えた関数は、<body>要素のonload属性にハンドラを定めると、正しく動かないことがあります。この場合、.ready()メソッドを用いるのは止めるか、.load()メソッドをwindowオブジェクトか、あるいはもっと個別のオブジェクト(たとえばImage)に加えてください。

.ready()メソッドには、つぎのような構文でハンドラ関数(handler)を定めます。

$(document).ready(handler)

.ready()メソッドは、現行ドキュメントのjQueryオブジェクトに対してのみ呼び出せます。つぎのようにセレクタもメソッドも省いて構いません。

$(handler)

ハンドラには、名前のない関数を用いることもできます。


$(document).ready(function() {
 	// 関数本体の処理
});



$(function() {
 	// 関数本体の処理
});

すでにDOMの初期化が済んでから.ready()メソッドを呼び出すと、ハンドラ関数は直ちに実行されます。

識別子$はjQuery()の簡便な参照として用いられています。けれど、他のJavaScriptライブラリを使ったとき、$の参照が重複してしまうかもしれません。そういう場合には、jQuery.noConflict()メソッドを呼び出します。そうすると、$でなく必ずjQueryを用いなくてはならなくなる代わりに、識別子$の参照が重複する問題は避けられます。また、ハンドラ関数は引数にjQueryオブジェクトを受け取りますので、その識別子に$を与えれば、関数本体では問題なく扱えます。


jQuery.noConflict();
jQuery(document).ready(function($) {
  // ハンドラ関数本体では$がjQueryを正しく参照できる
});

例

以下のコード001は、ドキュメントが読み込まれるたびに、テキスト(class属性"main-title")の色をランダムに変えます(サンプル001)。.css()メソッドは、第1引数のCSSプロパティに第2引数の値を定めます。colorプロパティに与える16進数のカラー値は、ハッシュ記号(#)で始まる数字6桁の文字列とすることにご注意ください。

サンプル001■テキストの色をランダムに変える

メインタイトル

コード001■ドキュメントが読み込まれるたびにテキストの色をランダムに変える


<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function() {
	var randomColor = Math.floor(Math.random() * 0xFFFFFF);
	var colorStr = "#" + ("000000" + randomColor.toString(16)).substr(-6);
	console.log(colorStr);
	$(".main-title").css("color", colorStr);
});
</script>
<h1 class="main-title">メインタイトル</h1>

[参考] jQuery 1.9 日本語リファレンス「.ready()」、jQuery入門講座「readyイベント」、「jQueryの基本 - $(document).ready」。

作成者: 野中文雄
作成日: 2016年5月11日

Copyright © 2001-2016 Fumio Nonaka.  All rights reserved.