)ver1.4〜機能jQueryオブジェクトで指定した要素にデータ(プロパティ名と値)を設定します。v1.4.3から引数にobjectオブジェクトを設定して、複数のデータをまとめて設定できるようになりました。引数にプロパティだけ指定すると、jQueryオブジェクトで指定した要素に設定されたプロパティの値を取得します。引数を設定しないと要素に設定された全てのデータをobjectオブジェクトとして取得します。要素にデータを設定しますサンプル(data/01.html)を開いてbody内にdiv要素しかないことを確認して下さい。jQueryは以下の様に記述され、dataメソッドを利用してdiv要素にデータを設定しています。設定されるデータはプロパティ名は「name」で値が「john」となります。"john");});このサンプルでは、保存しただけなので何も変化しません。次項で設定した値を取得します。要素からデータを取得しますサンプル(data/02.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryはサンプルdata/01.htmlと同じようにdataメソッドを利用してdiv要素にデータが設定されていますが、さらに以下の処理が追加されています。$("div").data("name");$("div").text(myName);});この処理によって、buttonをクリックするとdiv要素に設定されたデータの内、プロパティ名が「name」の値を取得します。textメソッドによってdiv要素内に表示します。結果として、buttonをクリックするとdiv要素に設定されたnameプロパティの値である「john」がdiv要素内に表示されます。複数のデータをまとめて設定するv1.4.3からdataメソッドの引数にobjectオブジェクトを設定して、複数のデータをまとめて設定できるようになりました。サンプル(data/03.html)を開いてbody内の構成はdata/02.htmlと同じ事を確認して下さい。jQueryでは、まず以下の部分を確認してください。新規にobjectオブジェクト「myObj」が作成され、2つのプロパティ(nameとage)が設定され、それぞれに値(johnと18)が設定されています。4行目でdataメソッドを利用してdiv要素にデータとして設定しています。18;$("div").data(myObj);続いて以下の部分を確認してください。textメソッドによってdiv要素内に表示します。$("div").data("age");$("div").text(myAge);});buttonをクリックするとdiv要素内にプロパティ「age」の値である「18」が表示されることから、objectオブジェクトを利用してデータが設定できたことを確認できます。要素のデータをまとめて取得するサンプルdata/03.htmlでは、複数設定したデータのうちageプロパティの値しか取得していません。複数のデータをまとめて取得するためには、dataメソッドの引数を省略して利用します。サンプル(data/04.html)を開いて、ほとんどdata/03.htmlと同じ事を確認してください。異なるのはbuttonをクリックした時の以下の処理です。2行目で「引数無し」のdataメソッドを利用して、div要素に設定された複数のデータをまとめて取得し変数「ansObj」に代入します。appendメソッドを利用して、すべてのプロパティと値をbody要素に表示するようにしました。"<br/>");});});結果として、buttonをクリックするとdiv要素に設定したすべてのデータ(プロパティと値)がbody要素内に表示されます。この結果からもサンプルdata/03.htmlの方法で、複数のデータをまとめて設定できていることが確認できます。removeDataメソッドを利用して下さい。メモHTML5のデータ属性に対応していますdataメソッドはHTML5のデータ属性にも対応しています。これを利用するとdataメソッドを利用することなく、タグ中にデータを設定することができます。サンプル(data/test01.html)を開いて、div要素内の属性が以下の様に設定されいることを確認してください。data-name="john"></div>属性をデータとして扱うためには上記の様に、属性の名前を「data-」と始める必要があり、「data-」に続く名前がプロパティ名となります。上記のdiv要素にはnameプロパティに値「john」が設定されていることになります。実際に以下のjQueryでデータが取得できるか確認できるようにしてあります(サンプルdata/02.htmlと同じ処理です)。結果として、buttonをクリックするとdiv要素のタグに設定されたnameプロパティの値「john」がdiv要素内に表示されます。$("div").data("name");$("div").text(myName);});値の型を自動的に設定してくれますattrメソッドでもdata/test01.htmlのような処理が可能ですが、このdataメソッドがスゴイのはプロパティの値を自動的に適した「型」に設定してくれる点です。サンプル(data/test02.html)を開いて、div要素内の属性が以下の様に設定されいることを確認してください。data-age="18"></div>上記ではdiv要素にageプロパティの値として18が設定されています。htmlなので18という数値でもクォートで囲んで「文字列」として設定しています。この値をdetaメソッドで取得すると、その値の「型」は何になるかを確認します。以下の様にbuttonをクリックしたら、dataメソッドによってdiv要素のageプロパティの値を取得し変数「myAge」に代入しています。jQuery.typeメソッドでチェックしアラートで表示するようにしました。$("div").data("age");alert($.type(myAge));});結果として、buttonをクリックするとアラートで「number」と表示され、dataメソッドで取得した「18」という値が数値になっていることが確認できます。これは結構便利なのではないでしょうか。念のため計算を追加したサンプルを作成しました。ンプル(data/test02b.html)を開いてjQueryが以下の様に変更されているのを確認して下さい。2行目の最後で10を掛けており、3行目のアラートで計算結果を表示するようにしています。$("div").data("age")*10;alert(myAge);});buttonをクリックすると、10倍された「180」が表示されることから、きちんと数値として扱われていることが確認できます。NotesdataメソッドはXMLドキュメントにも利用できますが、IEではdataメソッドでデータを設定することができません。上記のテクニックでタグの中に設定するのは大丈夫だと思います。