了解jQuery技巧来提高你的代码质量

发表于:2011-1-17 10:28  作者:Lee\\\'s程序人生   来源:51Testing软件测试网采编

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签:

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

  • $('selector').data('参数名', '要存储的数据');  
  • //之后这样取得数据:  
  • $('selector').data('参数');
  •   这个data方法能让你自己明明数据的参数,更语义更灵活,你可以在页面上的任何元素存储数据信息。这个方法的经典应用是给input域一个默认值,然后在聚焦的时候清空它:

  •  <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") );  
  •    }  
  •  });  
  • });
  •   5、jQuery手册常备身边

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

      6、在FireBug控制台记录jQuery

      FireBug是我最喜欢用的一个浏览器扩展工具之一,这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript,并在该工具下完成即时开发。作为jQuery或JavaScript开发人员,FireFox对于记录你的JavaScript代码也得到支持。写入FireBug控制台的最简单方式如下:


    【福利】填问卷送精选测试礼包+接口测试课程!为测试行业做点事!
    52/5<12345>

    评 论

    论坛新帖

    顶部 底部


    建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海瀛东律师事务所 张楠律师
    版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2020, 沪ICP备05003035号
    投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

    沪公网安备 31010102002173号

    51Testing官方微信

    51Testing官方微博

    扫一扫 测试知识全知道