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

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

jQuery.data( )要素にデータを設定/取得

構文

要素にデータを設定返値:jQueryオブジェクト
jQuery.data( DOM要素, プロパティ名, 値 )ver1.2.3〜
要素からデータを取得返値:objectオブジェクト
jQuery.data( DOM要素, プロパティ名 )ver1.2.3〜
jQuery.data( DOM要素 )ver1.4〜

機能

第1引数で指定したDOM要素にデータ(プロパティ名と値)を設定します。

第3引数に値を設定しないで、第2引数にプロパティを設定すると、第1引数のDOM要素に設定されたプロパティの値を取得します。第2引数のプロパティ名を設定しないとDOM要素に設定された全てのデータをobjectオブジェクトとして取得します。

jQuery.dataメソッドはdataメソッドと似た機能ですが、要素の指定にjQueryオブジェクトではなくDOMオブジェクトを利用しなければならず、あまり使い勝手が良くありません。dataメソッドを利用するようにしましょう。本家ページでも以下の様に記述されています。
Note: This is a low-level method; a more convenient .data() is also available.

解説

要素にデータを設定します

サンプル(jData/01.html)を開いてbody内にdiv要素しかないことを確認して下さい。jQueryは以下の様に記述され、jQuery.dataメソッドを利用してdiv要素にデータを設定しています。第1引数はjQueryオブジェクトを設定しているように見えますが、後に[0]と追加することでjQueryオブジェクトから最初のDOM要素を取得しています引数にjQueryオブジェクトは利用できないので注意して下さい
設定されるデータはプロパティ名は「name」で値が「john」となります。

$(function () {
	$.data($("div")[0], "name", "john");
});

このサンプルでは、保存しただけなので何も変化しません。次項で設定した値を取得します。

要素からデータを取得します

サンプル(jData/02.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryはサンプルjData/01.htmlと同じようにjQuery.dataメソッドを利用してdiv要素にデータが設定されていますが、さらに以下の処理が追加されています。

$("button").click(function(){
	var myName = $.data($("div")[0], "name");
	$("div").text(myName);
});

この処理によって、buttonをクリックするとdiv要素に設定されたデータのうち、プロパティ名が「name」の値を取得します。取得した値は変数myNameに代入し、textメソッドによってdiv要素内に表示します。

結果として、buttonをクリックするとdiv要素に設定されたnameプロパティの値である「john」がdiv要素内に表示されます。

関連項目

セレクタで設定する要素を選択できるdataメソッドの方が便利に利用できると思います。

メモ

HTML5のデータ属性には対応していません

dataメソッドはHTML5のデータ属性にも対応していましたが、jQuery.dataメソッドは対応していません。サンプル(jData/test01.html)を開いて、div要素内の属性が以下の様に設定されいることを確認してください。

<div data-name="john"></div>

属性をデータとして扱うためには上記の様に、属性の名前を「data-」と始める必要があり、「data-」に続く名前がプロパティ名となります。つまり上記のdiv要素にはnameプロパティに値「john」が設定されていることになります。

実際に以下のjQueryでデータが取得できるか確認できるようにしてあります(サンプルjData/02.htmlと同じ処理です)。しかしbuttonをクリックしても何も起きません。やはりdataメソッドを利用した方がよいでしょう。

$("button").click(function(){
	var myName = $.data($("div")[0], "name");
	$("div").text(myName);
});

複数のデータをまとめて設定したり取得できます

本家サイトでは複数のデータをまとめて「取得」することは可能と説明があったのですが、まとめて「設定」することについては説明がありませんでした。なのでサンプルを作成して確認します。

サンプル(jData/test02.html)はdataメソッドのサンプルdata/04.htmlをjQuery.dataメソッドで書き換えたものです。まず以下の様にobjectオブジェクトを作成し、それに2つのプロパティ(nameとage)を設定しました。そして4行目でjQuery.dataメソッドを利用してdiv要素に設定しています。

var myObj = new Object();
myObj.name = "john";
myObj.age = 18;
$.data($("div")[0],myObj);

データを取得する部分は以下の様に記述されています。jQuery.dataメソッドの引数にプロパティ名を指定しないと、引数にあるdiv要素に設定された全てのプロパティを取得します。このように得られたデータはobjectオブジェクトになるので、jQuery.eachメソッドappendメソッドを利用してbody要素内に全てのプロパティを表示するようにしました。

$("button").click(function(){
	var ansObj = $.data($("div")[0]);
	$.each(ansObj, function(prop, value){
		$("body").append(prop + "の値は" + value + "<br/>");
	});
});

結果として、buttonをクリックするとnameプロパティの値とageプロパティの値がbody内に表示され、複数のデータをまとめて設定/取得できることが確認されました。