参考地址：http://firequery.binaryage.com/
http://www.cnblogs.com/by1990/archive/2011/07/26/2117360.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<h1>FireQuery test page</h1>
<div id="header" class="box">
<p>
Hello from header
</p>
<button onclick="$('h1').data('added-data', 'this value should appear as a mutation event '+new Date())">
Add H1 data
</button>
<button onclick="$('h1').data('added-data', null)">
Nullify H1 data
</button>
<button onclick="$('h1').removeData('added-data')">
Remove H1 data
</button>
</div>
<iframe src="frame1.html"></iframe>
<iframe src="frame2.html"></iframe>
<div id="main" class="box">
<p>
Hello from body
</p>
</div>
<div id="footer" class="box">
<p>
Hello from footer
</p>
<ul class="long-list">
Here is some long list
<li>
01
</li>
<li>
02
</li>
<li>
03
</li>
<li>
04
</li>
<li>
05
</li>
<li>
06
</li>
<li>
07
</li>
<li>
08
</li>
<li>
09
</li>
<li>
10
</li>
<li>
11
</li>
<li>
12
</li>
<li>
13
</li>
<li>
14
</li>
<li>
15
</li>
<li>
16
</li>
<li>
17
</li>
<li>
18
</li>
<li>
19
</li>
<li>
20
</li>
<li>
21
</li>
<li>
22
</li>
<li>
23
</li>
<li>
24
</li>
<li>
25
</li>
<li>
26
</li>
<li>
27
</li>
<li>
28
</li>
<li>
29
</li>
<li>
30
</li>
</ul>
</div>
<script type="text/javascript">
$('body')
.data('Firebug', 'makes it possible')
.data('jQuery', "is pretty damn cool!")
.data('FireQuery', 'is just a cherry');
$('p').data('hasData', 'yeah!');
$('iframe').eq(0).data('framedata', 1);
$('iframe').eq(1).data('framedata', 2);
$('#main').data('me', {
structured: "yep!",
test: "",
arr: [1,2,3],
fn: function(a,b) {
alert("123");
alert("456");
},
nool: null,
undef: undefined
});
try{
console.log($('body'));
console.log($('.box'));
console.log($('#footer ul'));
console.log($('p'));
console.log($('li'));
console.log($('#nonsense'));
$('#main').data("me").fn();
}catch(e){
alert("123456");
}
$(function() {
var counter = 0;
setInterval(function() {
$('body').data('counter', counter++);
}, 1000);
});
</script>
</body>
</html>
修改：
//测试一下Data的用法
//1、定义
$("#buttonBrowse").data("MyData", { filename: "", guid: "" });
//2、使用
alert($("#buttonBrowse").data("MyData").filename);
//3、修改
$("#buttonBrowse").data("MyData").filename = "文件的名字";
alert($("#buttonBrowse").data("MyData").filename);
完