jQuery教程:14个实用的jQuery技巧(2)

4.存储数据

使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据：

 $('selector').attr('alt', 'data being stored');
//之后可以这样读取数据:
$('selector').attr('alt');

使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据：

 $('selector').data('参数名', '要存储的数据');
//之后这样取得数据:
$('selector').data('参数');

这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍，可以看看jQuery官方讲解

这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:

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>

JavaSript部分：

 $(function() {
 //取出有clear类的input域
 //(注: "clear once" 是两个class clear 和 once)
 $('#testform input.clear').each(function(){
   //使用data方法存储数据
   $(this).data( "txt", $.trim($(this).val()) );
 }).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") );
   }
 });
});

查看Demo

5.jQuery手册常备身边

大多数人都很难记住所有的编程细节，即使再好的程序员也会有对某个程序语言的疏忽大意，所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
oscarotero jquery 1.3 (壁纸版)