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. Codeforces Round #379 (Div. 2) 总结分享

    前言 初入acm的新手,打算在cf混.这几天没有比赛,就做了个最新的Virtual participation.虽然说div2比较简单,但还是被虐得体无完肤...Orz.两个小时,共6道题.最后只AC ...

  2. This in JavaScript

    声明 本文仅为读书笔记并致力于理解Js中的this关键字.如有雷同,纯属巧合.原因有二,其一:有幸看了同一本书,其二:this这玩意已被说烂了~ 为什么要用this? this提供了优雅的方式隐式传递 ...

  3. (转)阴影锥(Shadow Volume)

    转自:http://blog.csdn.net/zjull/article/details/11819923 Shadow Map和Shadow Volume是当今比较流行的实时阴影渲染方法,跟Sha ...

  4. Navi.Soft30.框架.WebMVC.开发手册

    1概述 1.1应用场景 互联网高速发展,互联网软件也随之越来越多,Web程序越来越被广泛使用.它部署简单,维护方便,深得众多软件公司使用 Bootstrap前端框架,是最近非常流行的框架之一.它简洁, ...

  5. @Html.DropDownList 设置选中值无效

    有时候在ASP.NET  MVC中用@Html.DropDownList 设置选中值无效,如图: 具体原因说不清,反正只要改个名字就行了!!!,如图:::

  6. Flink 剖析

    1.概述 在如今数据爆炸的时代,企业的数据量与日俱增,大数据产品层出不穷.今天给大家分享一款产品—— Apache Flink,目前,已是 Apache 顶级项目之一.那么,接下来,笔者为大家介绍Fl ...

  7. Android实现自适应正方形GridView(陌陌引导页面效果)

    1.http://blog.chengyunfeng.com/?p=465 2.备注,慢慢研究

  8. 如何安装最新版本的memcached

    转载自孟叔的博客:  https://learndevops.cn/index.php/2016/06/10/how-to-install-the-latest-version-of-memcache ...

  9. 让IE8支持HTML5及canvas功能!

    微软出的IE9支持HTML5,但因为不支持XP系统,暂时我还用不了. 即使能用,现阶段如果开发HTML5页面,并考虑到兼容性问题的话,恐怕也得让自己的界面支持IE6-8吧. 首先,需要让IE支持HTM ...

  10. 所有博客已经迁移到个人空间 blog.scjia.cc

    所有博客已经迁移到个人空间 blog.scjia.cc