THE HAM MEDIA BLOG

jQueryのdata()を勉強したけど構造がイメージできずに撃沈気味…

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
日記
タグ:
jquery
data

data()を勉強したけどよくわからん...

実はどんな風に動作するのか全然わかっていないjQueryのdata()
このスクリプトの作り方とかその動作の仕方とか
勉強しようといろいろ調べながらサンプル作ろうとしたのですが、
まずは基本すらその動作の仕方よくわかっていない・・・
とりあえずサンプルのスクリプト部分だけも
動作がどんなものになるのか、メモのためにエントリー。

jQuery.data()

あれ?data()ってこんなだったけと思いつつスタート。
(この実験の途中で・・・とあることに気づいたがとりあえずそのまま)

■スクリプト

$("#test1 ul li").click(function(e) {
	var id = jQuery.data(e.target);
	$("#test1 p span").text(id);
});

■プレビュー

  • ここをクリック
  • ここをクリック
  • ここをクリック

クリックしたところは

まったくよくわかっていないのは、
まずはこの数字はどこでどう取られた数字が返っているのだろう?
クリックされた要素の位置的なものか、それとも48番目ってことか?
わからないと、まず悩む。。。

とりあえずお次。

■スクリプト

$("#test2 button").click(function(e) {
  var adiv = $("div").get(0);
  var value;

  switch ($("#test2 button").index(this)) {
	case 0 :
	  value = jQuery.data(adiv, "blah");
	  break;
	case 1 :
	  jQuery.data(adiv, "blah", "hello");
	  value = "Stored!";
	  break;
	case 2 :
	  jQuery.data(adiv, "blah", 86);
	  value = "Stored!";
	  break;
	case 3 :
	  jQuery.removeData(adiv);
	  value = "Removed!";
	  break;
  }
  $("#test2 span").text("" + value);
});

■プレビュー

A div

The "blah" value of this div is ?

もうこの辺で頭が混乱。
DOMにデータを保持するってどういうことなんだろう???
それはまぁいいとして、そのDOMってなんでもいいのだろうか・・・
実験したところによるとなんでもよさそうなのですが・・・
いまいちぱっとしておりません。

上記のでいえば、"blah"に該当する部分は、他の文字でもOK。
これが保存しておく部分の名前になるっぽい。

つまり、jQuery.data( elem, name, value )
()の中で、(保存する場所、保存する名前、保存する値)
みたいな感じになっているのかなというイメージ。
そしてそこで保存したのを呼び出すのが
jQuery.data( elem, name )で、保存している値を取り出せるということ
・・・という流れでいいのだろうか?
いまいちピンときていない。

■スクリプト

$("#test3 button").click(function(){
	var adiv = $("div").get(0);
	$.data(adiv, "test", { first: 16, last: "pizza!" });
	$("#test3 span:first").text(jQuery.data(adiv, "test").first);
	$("#test3 span:last").text(jQuery.data(adiv, "test").last);
});

■プレビュー


The values stored were and

この場合は、divにtestって名前のobjectが保存されて、
その変数に格納されているのは{ first: 16, last: "pizza!" }で、
.firstと、.pizzaでよびだされているということか。

そしていまさらながらここで気づく・・・
これ、古いバージョンの書き方っぽい!?

なんというミス・・・

data()

ってことで新しいほう。

■スクリプト

$("#test4 button").click(function(e) {
  var value;

  switch ($("#test4 button").index(this)) {
    case 0 :
	  value = $("div").data("blah");
	  break;
    case 1 :
	  $("div").data("blah", "hello");
	  value = "Stored!";
	  break;
    case 2 :
	  $("div").data("blah", 86);
	  value = "Stored!";
	  break;
    case 3 :
	  $("div").removeData("blah");
	  value = "Removed!";
	  break;
  }
  $("#test4 span").text("" + value);
});

■プレビュー

A div

The "blah" value of this div is ?

結局同じことをしていることはわかったし、
こっちの方がさっきのよりも感覚的に扱いやすい。

$("div")に"blah"って名前でデータ保存しときますってイメージか。

■スクリプト

$("#test5 button").click(function(){
	$("div").data("test", { first: 555, last: "pizza?bread?" });
	$("#test5 span:first").text($("div").data("test").first);
	$("#test5 span:last").text($("div").data("test").last);
});

■プレビュー


The values stored were and

今回の理解度は・・・?

最終的にいろいろ変化させてみたりしたんだけど、
結局良くわかっていない部分がかなりある。。。
ってことで今回の理解度20%くらいだろうか。
引き続き勉強しようと思います。

トップ画のソース

Dogs. The rest
Photographer
akras
License
Creative Commons (by)
jQueryで作る Ajaxアプリケーション
沖林 正紀
技術評論社
売り上げランキング: 30247
おすすめ度の平均: 4.0
3 最初の一歩
3 初心者に優しくない
5 jQueryの知識を深めるのにはちょうどいい。
4 jQueryへの理解を深める上で最適な教科書
この記事へのコメント
たぶんdata()に2つの機能があることで混乱されているのではないかと。
いちばん上はjQueryがDOM要素の識別のために内部的に振るIDの取得、そのほかはDOM要素のプロパティをデータ保管場所として利用することだと思います。

後者に関してはこのページが参考になります。
http://james.padolsey.com/javascript/element-datastorage/
Posted by とおる at 2009年02月27日
>とおるさん
なるほど、data()には2つの機能があったのですね!
「DOM要素の識別のために内部的に振るIDの取得」というのが一切理解できていなかったので混乱しておりました。
後者の方も、まだまだ勉強が必要な状態なので、もっと学ぼうと思います!

参考も含め、教えていただき、ありがとうございます!
Posted by ハム at 2009年03月03日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

jQuery.data() について
Excerpt: 最近、jQuery のプラグインを作っていて、DOM 要素毎にデータを一時的に保持できる機能を持ったメソッド jQuery.data() がかなり便利であることに気がつきました。 例と..
Weblog: sukechan.net
Tracked: 2009-04-09 21:44

トップに戻る

×

この広告は90日以上新しい記事の投稿がないブログに表示されております。