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

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

jQuery.type( )値の型を取得

構文

値の型を取得返値:文字列
jQuery.type( 調査対象 )ver1.4.3〜

機能

jQuery.typeメソッドは引数に設定した値の型を取得します。型の種類を以下に記します。javaScriptのtypeofメソッドよりも使い勝手が良く配列とobjectオブジェクトを区別したり正規表現も判別できるようになっています。

$.type(true) === "boolean":ブール値
$.type(3) === "number":数値
$.type("test") === "string":文字列
$.type(function(){}) === "function":関数
$.type([]) === "array":配列
$.type(new Date()) === "date":日時
$.type(/test/) === "regexp":正規表現

undefinedとnullに関しては以下の様になっています。

$.type(undefined) === "undefined"
$.type() === "undefined"
$.type(window.notDefined) === "undefined"
$.type(null) === "null"

上記以外の型は「object」となります

解説

javaScriptのtypeofより使い勝手が良いです

javaScriptのtypeofメソッドも同じようなことができますが、配列に対し「object」と返すため、配列とobjectオブジェクトの区別ができませんでした。しかしjQuery.typeメソッドは区別することができます
サンプル(type/01.html)を開いてbody内にbutton要素しかないことを確認して下さい。

jQueryは以下の様に記述され、2行目で配列「myArray」を作成しています。3行目ではjavaScriptのtypeofメソッドで配列「myArray」の型を取得し、結果をappendメソッドを利用してbody要素内に追加します。4行目でも同じようにjQuery.typeメソッドで型を取得した結果をbody要素内に追加します。

$("button").click(function(){
	var myArray = [1,2,3];
	$("body").append("typeOf : " + typeof(myArray) + "<br/>");
	$("body").append("$.type : " + $.type(myArray) + "<br/>");
});

結果として、buttonをクリックするとtypeofメソッドは「object」となりますが、jQuery.typeメソッドでは「array」となります。

他にも正規表現はtypeofメソッドでは「object」となりますが、jQuery.typeメソッドでは「regexp」となります。→サンプル(type/01b.html

$("button").click(function(){
	var myReg = /test/;
	$("body").append("typeOf : " + typeof(myReg) + "<br/>");
	$("body").append("$.type : " + $.type(myReg) + "<br/>");
});

メモ

クォートで囲んだものは文字列です

isNumericメソッドは数値をクォートで囲んだものでも数値とみなしますが、通常はクォートで囲んだものは文字列とみなされます。サンプル(type/test01.html)を開いてjQueryを確認してください。

ポイントは2行目のクォートで囲んだ10の値です。これをisNumericメソッド(3行目)と$.typeメソッドでチェックした結果を表示するようにしました。

$("button").click(function(){
	var test = "10";
	$("body").append("$.isNumeric : " + $.isNumeric(test) + "<br/>");
	$("body").append("$.type : " + $.type(test) + "<br/>");
});

buttonをクリックするとisNumericメソッドでは「true」となりますが、$.typeは「string」となります。通常はクォートで囲んだものは文字列と判定しますが、isNumericメソッドはクォートとは関係なく内容が数値であれば数値とみなします。