网页前台存储数据,jquery data方法

泡在网上的日子 / 文 发表于2012-03-07 01:25 次阅读 jquery

有些前端开发者喜欢使用HTML的属性来存储数据:

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

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

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

这个data方法能让你自己明明数据的参数,更语义更灵活,你可以在页面上的任何元素存储数据信息。这个方法的经典应用是给input域一个默认值,然后在聚焦的时候清空它:

 
  1. <form id="testform">
  2. <input type="text" class="clear" value="Always cleared" />
  3. <input type="text" class="clear once" value="Cleared only once" />
  4. <input type="text" value="Normal text" />
  5. </form> 

JavaSript部分:

 
  1. $(function() { 
  2. //取出有clear类的input域 
  3. //(注: "clear once" 是两个class clear 和 once) 
  4. $('#testform input.clear').each(function(){ 
  5.    //使用data方法存储数据 
  6.    $(this).data( "txt", $.trim($(this).val()) ); 
  7. }).focus(function(){ 
  8.    // 获得焦点时判断域内的值是否和默认值相同,如果相同则清空 
  9.    if ( $.trim($(this).val()) === $(this).data("txt") ) { 
  10.      $(this).val(""); 
  11.    } 
  12. }).blur(function(){ 
  13.    // 为有class clear的域添加blur时间来恢复默认值 
  14.    // 但如果class是once则忽略 
  15.    if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) { 
  16.      //Restore saved data 
  17.      $(this).val( $(this).data("txt") ); 
  18.    } 
  19. }); 
  20. }); 
收藏 赞 (0) 踩 (0)
上一篇:jquery和javascript分别实现checkbox全选,反选,取消选择
假设html文件如下 a href=javascript:; id=all全部选择/abr a href=javascript:; id=delAll取消选择/abr a href=javascript:; id=antiAll反向选择/a pinput type=checkbox name=checkbox1A input type=checkbox name=checkbox1 B input type=checkbox name=c
下一篇:js和css中WEB元素的距离和宽度高度等问题
网页元素的宽高度 以及距边界的距离问题一直困扰着很多人,虽然网上有很多文章,但是基本都不兼容各种浏览器或者是没讲清楚,把外文解释不加思考的翻译过来。