使用jQuery的data方法来为页面中的某个元素存储数据,（获取焦点，清除默认值）

使用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