html5  自定义数据属性 ,也就是 data-* 自定义属性。

     例如

<div  data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

可以有三种方法访问和修改data:
                1.使用getAttribute setAttribute 方法   例如 div.getAttribute("data-last-value")
                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 。

html5 自定义数据属性 ,也就是 data-* 自定义属性---笔记。的更多相关文章

  1. 如何使用HTML5自定义数据属性

    在本文中,我将向你介绍如何使用HTML5自定义数据属性.我还将向你介绍一些开发人员在工作中经常使用的优秀实例. 为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信 ...

  2. Html5 自定义数据属性

    html5 可以为元素添加自定义属性,但是要添加前缀data-.(下面这个例子中的自定义属性的命名,其实是不规范的,不应该包含大写字符,例如:data-myName 应改命名为:data-myname ...

  3. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  4. HTML5中的数据集dataset和自定义属性data-*

    在html5中可为所有元素添加一种自定义的属性,这种属性的前缀以data-开头,比如:data-name,目的是为元素提供与页面渲染无关,但与dom元素强相关的属性.添加完自定义属性后我们可以通过元素 ...

  5. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  6. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  7. html5 file upload and form data by ajax

    html5 file upload and form data by ajax 最近接了一个小活,在短时间内实现一个活动报名页面,其中遇到了文件上传. 我预期的效果是一次ajax post请求,然后在 ...

  8. Django关于设置自定义404和安装debug-toolbar的笔记

    Django关于设置自定义404和安装debug-toolbar的笔记 关于设置404 先做好404页面,然后在views.py文件中做好映射,最后是在urls.py做好路由,而这个urls.py必须 ...

  9. HTML5自定义select标签样式的方法

    HTML5自定义select标签样式的方法 -webkit-appearance: none; 这个东西可以隐藏箭头 不过手机端就直接 设置透明度为0就行了(如果这种做法比前面个要麻烦点 毕竟还要对他 ...

随机推荐

  1. Django配置与静态文件

    settings.py """ Django settings for myproject project. Generated by 'django-admin sta ...

  2. Gridview用法大总结

    Gridview用法大总结啦!精彩效果截图加详细源代码注释,需要的朋友赶紧过来看看吧:走过路过,千万不要错过哦!     由于篇幅限制,代码就不贴啦,要下载源码的请点击这里:希望朋友们能给出一些好的建 ...

  3. 虚拟机评估——如何确定一个CPU核上部署的虚拟机数量?

    最近研究虚拟化技术,不可避免遇到一个问题:如何评估物理主机上虚拟主机的容量?下面这篇文章的思路有一定的启发性,转发一下. 如何确定一个CPU核上部署的虚拟机数量? 摘要:本文说明一个CPU核上部署虚拟 ...

  4. 解决VS2010中在项目上右键鼠标,无“添加STS引用”菜单的问题

    解决方法:将Windows Identity Foundation SDK文件夹C:\Program Files (x86)\Windows Identity Foundation SDK\v3.5\ ...

  5. ie8下jquery改变PNG的opacity出现黑边,ie6下png透明解决办法

    目前互联网对于网页效果要求越来越高,不可避免的用到PNG图片,PNG分为几种格 式,PNG8 PNG24 PNG32,其中最常用的,也是显示效果和大小比较适中的则是PNG24,支持半透明,透明,颜色也 ...

  6. 使用adb shell dumpsys检测Android的Activity任务栈

    谈起Android程序开发,就需要了解其四个主要的部件:Activity.Service.ContentProvider. BroadcastReceiver.而其中Activity是唯一直接控制程序 ...

  7. Android Studio 中关于NDK编译及jni header生成的问题

    之前由于工作原因使用grails这个基于groovy的框架做项目,对groovy感觉很好. 基于groovy的gradle构建系统对我而言自然也是好的没得说. Android Studio 正式版出来 ...

  8. .NET Core:面向未来的开源跨平台开发技术

    作为一种全新的开源和跨平台的开发平台,.NET Core 历经两年多的开发,终于在于2016年6月27日针对所有主流服务器和桌面操作系统发布 1.0 RTM 版本..NET Core 是一种通用开发平 ...

  9. 利用cmdline和gradle快速编译出apk

    http://blog.csdn.net/qq_16628781/article/details/49365139 gradlew.bat clean build --info > bugtag ...

  10. mac系统如何关闭root账户

    第一步:系统偏好设置 ->用户与群组 第二步:登录选项 ->解锁 ->单击网络帐户服务器加入 第三步:打开目录实用工具 第四步:菜单栏 ->编辑 ->停用 Root 用户 ...