jQueryの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); });
■プレビュー
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); });
■プレビュー
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%くらいだろうか。
引き続き勉強しようと思います。
技術評論社
売り上げランキング: 30247





いちばん上はjQueryがDOM要素の識別のために内部的に振るIDの取得、そのほかはDOM要素のプロパティをデータ保管場所として利用することだと思います。
後者に関してはこのページが参考になります。
http://james.padolsey.com/javascript/element-datastorage/
なるほど、data()には2つの機能があったのですね!
「DOM要素の識別のために内部的に振るIDの取得」というのが一切理解できていなかったので混乱しておりました。
後者の方も、まだまだ勉強が必要な状態なので、もっと学ぼうと思います!
参考も含め、教えていただき、ありがとうございます!