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

有些前端开发者喜欢使用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. <formid="testform">
  2. <inputtype="text"class="clear"value="Always cleared"/>
  3. <inputtype="text"class="clear once"value="Cleared only once"/>
  4. <inputtype="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. });

版权声明:
作者:王金阁
链接:https://www.nnbbxx.net/post-6980.html
来源:王金阁博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>