jQuery技术

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

字号+ 作者:H5之家 来源:H5之家 2015-09-30 08:03 我要评论( )

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

  网页制作Webjx文章简介:jQuery代码的14条改善技巧.
  
  4.存储数据
  
  使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据:
  
  $('selector').attr('alt','databeingstored');
  
  //之后可以这样读取数据:
  
  $('selector').attr('alt');
  
  使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的,我们可以使用jQuery的data方法来为页面中的某个元素存储数据:
  
  $('selector').data('参数名','要存储的数据');
  
  //之后这样取得数据:
  
  $('selector').data('参数');
  
  这个data方法能让你自己明明数据的参数,更语义更灵活,你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍,可以看看jQuery官方讲解
  
  这个方法的经典应用是给input域一个默认值,然后在聚焦的时候清空它:
  
  HTML部分:
  
  <formid="testform">
  
  <inputtype="text"class="clear"value="Alwayscleared"/>
  
  <inputtype="text"class="clearonce"value="Clearedonlyonce"/>
  
  <inputtype="text"value="Normaltext"/>
  
  </form>
  
  JavaSript部分:
  
  $(function(){
  
  //取出有clear类的input域
  
  //(注:"clearonce"是两个classclear和once)
  
  $('#testforminput.clear').each(function(){
  
  //使用data方法存储数据
  
  $(this).data("txt",$.trim($(this).val()));
  
  }).focus(function(){
  
  //获得焦点时判断域内的值是否和默认值相同,如果相同则清空
  
  if($.trim($(this).val())===$(this).data("txt")){
  
  $(this).val("");
  
  }
  
  }).blur(function(){
  
  //为有classclear的域添加blur时间来恢复默认值
  
  //但如果class是once则忽略
  
  if($.trim($(this).val())===""&&!$(this).hasClass("once")){
  
  //Restoresaveddata
  
  $(this).val($(this).data("txt"));
  
  }
  
  });
  
  });
  
  查看Demo
  
  5.jQuery手册常备身边
  
  大多数人都很难记住所有的编程细节,即使再好的程序员也会有对某个程序语言的疏忽大意,所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
  
  oscaroterojquery1.3(壁纸版)
  
  

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
/