zoukankan      html  css  js  c++  java
  • 繁星——jquery的data()方法

      今天在看JQuery文档的时候偶然看到了data()方法,觉得挺好用的,这里做个记录。

      这个方法用于在元素上存放数据,返回jQuery对象。在文档中提到V1.4.3 新增用法NEW data(obj) 可传入key-value形式的数据。这个方法的用法如下:

      (1)在一个div上存取数据

     1 //HTML代码:
     2 <div></div>
     3 
     4 //JQuery代码:
     5 $("div").data("blah");  // undefined
     6 $("div").data("blah", "hello");  // blah设置为hello
     7 $("div").data("blah");  // hello
     8 $("div").data("blah", 86);  // 设置为86
     9 $("div").data("blah");  //  86
    10 $("div").removeData("blah");  //移除blah
    11 $("div").data("blah");  // undefined

      (2)在div上存取键值对

    1 //HTML代码:
    2 <div></div>
    3 
    4 //JQuery代码:
    5 $("div").data("test", { first: 16, last: "pizza!" });
    6 $("div").data("test").first  //16;
    7 $("div").data("test").last  //pizza!;

      这个方法用来在前端存取数据看起来很方便,实际使用时还需注意以下问题:

      (1)如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。

      (2)当使用.data()获取值时,jQuery会首先尝试将获取的字符串值转化成JS类型,包括布尔值,null,数字,对象,数组: 
          若值是”true|false”,则返回相应的布尔值; 
          若值是”null”,则返回null; 
          若值是纯数字构成的字符串(+data + ”” === data),则返回相应的数字(+data); 
          若值是由(?:{[sS]*}|[[sS]*])$,比如”{key:value}“或[1,2,3],则尝试使用jQuery.parseJSON解析之; 
           否则返回字符串值。

      那么,若想获取字符串值而不想获得自动转换的值,可以使用.attr(“data-”+key)来获取相应的值,代码示例如下:

     1 var bieh = $(div).attr(“data-”+bieh) 

  • 相关阅读:
    2.vue插件总结——总有你能用上的插件
    1.前端数据可视化插件:Highcharts、Echarts和D3(区别)
    git学习地址
    node vue 微信公众号(四)配置环境 本地测试
    解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题
    导入excel并进行数据提取
    后端返回字符串中带换行符,前端需转换
    正则表达式tab表示
    FormData
    interval
  • 原文地址:https://www.cnblogs.com/kemir1105/p/6016236.html
Copyright © 2011-2022 走看看