使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据；
使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的。
我们可以使用jQuery的data方法来为页面中的某个元素存储数据：
html部分：
<form id="testform">
<input type="text" class="clear" value="Always cleared" />
<input type="text" class="clear once" value="Cleared only once" />
<input type="text" value="Normal text" />
</form>
js部分：
$(function() {
//取出有clear类的input域
//(注: "clear once" 是两个class clear 和 once)
$('#testform input.clear').each(function(){
//使用data方法存储数据
$(this).data( "txt", $.trim($(this).val()) ); //这里的this是指下面focus事件的this元素
}).focus(function(){
// 获得焦点时判断域内的值是否和默认值相同，如果相同则清空
if ( $.trim($(this).val()) === $(this).data("txt") ) {
$(this).val("");
}
}).blur(function(){
// 为有class clear的域添加blur时间来恢复默认值
// 但如果class是once则忽略
if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
//Restore saved data
$(this).val( $(this).data("txt") );
}
});
});
注意：
1.js部分，第4行代码，我们使用each遍历所有选择器元素（有时不仅只有一个元素需要此效果）
2.js部分，第6行代码，把去除前后空格的val值（$.trim方法）存入data('tet')中。这里的this代表each遍历的所有元素中的this
