zoukankan      html  css  js  c++  java
  • HTML5中添加了data-*

    Html5 data-* 属性定义和用法:
    data-* 属性用于存储页面或应用程序的私有自定义数据。
    data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
    存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

    data-* 属性包括两部分:

    • 属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符
    • 属性值可以是任意字符串

    注释:用户代理会完全忽略前缀为 "data-" 的自定义属性。

    有三种方法访问和修改data:
    1.使用getAttribute setAttribute 方法
    div.setAttribute('data-options',{/*数据*/});
    div.getAttribute("data-options");
    2.使用dataset属性返回一个集合
    div.dataset --> DOMStringMap { options:"{"name":"John"}", hidden:"true", lastValue:"43"}
    可以访问,添加,删除
    div.dataset.hidden
    div.dataset.newAttr = "123"
    delete div.dataset.hidden
    3.使用jquery的data方法
    .data( key, value )
    .data( key, value )
    .data( obj ) --> 设置多个键值对
    .data( key )
    .data( key )
    .data() -->返回一个集合
    jQuery比较特殊的是,它会将返回值字符串自动转换为对应的数据类型。
    比如上面的 $("div").data() --> {options : {"name":"John"}, hidden: true, lastValue: 43 }
    注意:对于dataset属性和jQuery的data方法: data- 属性名如果包含了连字符,例如:data-last-value ,连字符将被去掉,并转换为驼峰式的命名,前面的属性名转换后应该是:lastValue 。

  • 相关阅读:
    springboot(十)使用LogBack作为日志组件
    springboot(九)文件上传
    django 安装
    macbook使用“终端”远程登录linux主机
    Mac 怎么通过自带终端连接linux服务器
    什么是变量?
    选择最好用的PyCharm IDE
    开发你的第一个Python程序
    Python介绍
    PyCharm 2017 安装教程
  • 原文地址:https://www.cnblogs.com/wfy680/p/15391926.html
Copyright © 2011-2022 走看看