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

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-* 自定义属性---笔记。

时间: 2024-08-02 17:49:45

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

全栈JavaScript之路(十八)HTML5 自定义数据属性

HTML5 规范规定,用户可以为元素 自定义非标准属性, 但是要添加 data- 前缀. 目的是为元素提供与页面渲染无关的信息.或者语义信息.这些属性名可以随意添加,只要带上前缀 data- 开头就可以. <div id="myid" data-appid="1" data-appname="csdn"></div> 添加属性这后可以通过 dataset 访问自定义属性,dataset 属性 是DOMStringMap  

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

为什么需要自定义数据属性? 很多时候我们需要存储一些与不同DOM元素相关联的信息.这些信息对于读者来说可能是不需要的,但是可以轻松的访问这些信息将会给我们开发者的工作带来极大的便利. 例如,假设你有一份某个餐饮类网站上所有餐馆的名单.在HTML5之前,如果你想存储餐馆提供的食物种类或餐馆与用户之间的距离等信息,那么你将使用HTML的class属性.但是如果你还需要存储餐馆的id以便查看用户想要访问的特定餐厅该怎么办? 以下是基于HTMLclass属性的方法存在的一些问题: HTMLclass属性

Web开发技巧:使用自定义数据属性创建弹出窗口

在开发web应用时,有时会用JavaScript获取文档之外的信息,某些情况下,我们需要用一些技巧来处理这些额外信息以保证Web应用能够正常运行.一般而言,技巧无外乎是将额外的信息塞入事件处理程序或滥用rel属性或class属性以方便注入行为.感谢HTML规范引入了自定义数据属性,让不堪回首的往日一去不返. 所有的自定义数据属性都以data一前缀开头,HTML文档的验证器会在验证时忽略它.开发人员可以在任意元素中加入自定义数据属性,属性值可以是照片的元数据.经纬度坐标或者弹出窗口的尺寸.最棒的是

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

技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuery.HTML5.Node.js实例大全-读书笔记2 3.3 响应鼠标动作 图3-2的效果已经有了,须要鼠标来操作展示想看的照片.这就须要在对应的地方加上事件. 3.3.1 响应小照片单击动作 在3.2.3的代码里提供了显示小图列表的eg.showThumb()方法.在单击小图片时要显示大图片.

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

技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuery.HTML5.Node.js实例大全-读书笔记1 3.2 照片加载与定位 根据功能设计,可以先写好 HTML 结构基础,再配好 CSS 做出大致效果,最后用 JavaScript加上各种动作.首先请看 HTML 代码结构. 3.2.1 HTML 代码 CSS代码保存到 eg3.css 文件中,Ja

HTML5自定义data属性

可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role="header">     <h1>我是标题</h1> </div>  为什么写一个data-role="header"就能实现底部为黑色.文字居中显示的效果呢? 本文提供一种最简单的实现办法,让大家对这些用法有个直观的了解. 我们写

自定义组合控件及自定义属性

1.声明一个View对象继承相对布局或线性布局或其他的ViewGroup: 2.在自定义的View对象里面重写它的构造方法,在构造方法里面就把布局都初始化完毕: 3.根据业务需求 添加一些api方法,扩展自定义的组合控件: 4.扩展自定义属性: 5.声明自定义属性的命名空间: xmlns:android="http://schemas.android.com/apk/res/android"(系统自带的命名空间) xmlns:mAttrs="http://schemas.an

Spring Data学习笔记-查询方法

Spring Data支持类似Hibernate的查询语句,也可以写原生SQL语句,下面记录典型的例子. /**  * 1. Repository 是一个空接口. 即是一个标记接口  * 2. 若我们定义的接口继承了 Repository, 则该接口会被 IOC 容器识别为一个 Repository Bean.  * 纳入到 IOC 容器中. 进而可以在该接口中定义满足一定规范的方法.   *   * 3. 实际上, 也可以通过 @RepositoryDefinition 注解来替代继承 Rep

SQL Server Reporting Services 自定义数据处理扩展DPE(Data Processing Extension)

最近在做SSRS项目时,遇到这么一个情形:该项目有多个数据库,每个数据库都在不同的服务器,但每个数据库所拥有的数据库对象(table/view/SPs/functions)都是一模一样的,后来结合网络上众多的资源找到了解决方案,即Data Processing Extensio(DPE).所谓DPE,直白地说就是开发自己的DLL去扩展SSRS的数据源,具体的操作如下所示: 1. 新建类库项目,并引入以下两个DLL: C:\Program Files\Microsoft SQL Server\MS