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

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

jQuery.now( )現在の時間を取得

構文

現在の時間を取得返値:number
jQuery.now( )ver1.4.3〜

機能

jQuery.nowメソッドは1970年1月1日0時0分0秒から経過した時間(ミリ秒)を取得します。単位がミリ秒な事に注意してください。内容はjavaScriptの「(new Date).getTime().」と同じですが、より簡単に記述できるのがメリットです。

解説

1970年1月1日0時0分0秒から経過した時間(ミリ秒)を取得します

サンプル(now/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。jQueryは以下の様に記述され、buttonをクリックしたらjQuery.nowメソッドを利用して現在の時間を取得して変数nowTimeに代入します。代入された変数nowTimeはappendメソッドを利用してbody要素内に追加していきます。

$("button").click(function(){
	var nowTime = $.now();
	$("body").append("<br/>" + nowTime);
});

結果として、buttonをクリックするたびに現在の時間(ミリ秒)がbody要素内に追加されていきます。

関連項目

イベントがらみで現在の時間を取得した場合はイベントオブジェクトのtimeStampプロパティが利用できます。

メモ

クリックの間隔を測定する

解説が短すぎて寂しいのでサンプルを追加。前回クリックされた時間を記憶してクリックの間隔を測定します。
サンプル(now/test01.html)を開いてbody内にbutton要素しかないことを確認して下さい。

jQueryは以下の様に記述され、buttonをクリックしたら現在の時間「$.now()」から前回クリックされた時間を引いて、クリックの間隔を算出します(最初は変数lastTimeが設定されていないのでNaNになります)。

算出した結果はappendメソッドを利用してbody要素内に追加していきます。そして最後にjQuery.nowメソッドの値を変数lastTimeに記憶しておき、次回クリックされた時に利用できるようにします。

$("button").click(function(){
	var duration = $.now() - lastTime;
	$("body").append("<br/>前回のクリックから" + duration + "ミリ秒が経過しています");
	lastTime = $.now();
});

結果として、buttonをクリックするたびに前回のクリックからの間隔(ミリ秒)を表示します。

javaScriptのgetTimeメソッドとの違い

javaScriptのgetTimeメソッドも同じように1970年1月1日0時0分0秒から経過した時間(ミリ秒)を取得しますが、利用するためにはdateオブジェクトを作成しなければなりません

サンプル(now/test02.html)を開いてjQueryが以下の様に変更されているのを確認して下さい。2行目でdateオブジェクトを作成し、3行目で作成したdateオブジェクトに対してgetTimeメソッドを利用しています。結果はnow/01.htmlとまったく同じになります。

$("button").click(function(){
	var dateObj = new Date();
	var nowTime = dateObj.getTime();
	$("body").append("<br/>" + nowTime);
});

つまりjQuery.nowメソッドはdateオブジェクトを作成しなくても済むので、より手軽に利用できるのです。