自定义属性data-options怎么用

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 。
时间: 2024-10-11 03:14:01

自定义属性data-options怎么用的相关文章

jQuery中使用data()方法读取HTML5自定义属性data-*实例

如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如下: 复制代码代码如下: .data( key, value ).data( obj ).data( key ).data() 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中.例如HTML: 复制代码代码如下: <div data-role =

jQuery1.9.1源码分析--数据缓存Data模块

阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(elem, name, data)源码分析 internalRemoveData方法源码分析 internalData方法的源码分析 jQuery.fn.extend({data: function( key, value ) {}})源码分析 jQuery.extend({removeData: function( elem, name ) {}})源码分

HTML5数据存储方案data与jQuery数据存储方案$.data()的区别

我们先看下$.fn.data()的使用,这个和$.data()是不一样的,前者是和某个jquery对象相关,后者则是全局方法.主要有data()和removeData()这2个实例方法.通过下面的例子和执行结果可以看到:$.fn.data()和$.fn.removeData()跟$.data的使用方式没有什么差别. // 支持任何数据类型 2. $( "body" ).data( "name", "xx" ); 3. $( "body&

jquery data()

data() .data( key, value ) Description: Store arbitrary data associated with the matched elements. .data( key, value ) .data( obj ) .data( key ) Description: Return the value at the named data store for the first element in the jQuery collection, as

jquery中attr、prop、data

在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. .data()看作是存取data-xxx这样DOM附加信息的方法 上面的描述也许有点模糊,举几个例子就知道了. <a href="http://www.baidu.com" target="_self"

jQuery attr() prop() data()用法及区别

.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1.6引入,读/写DOM的property..data(),此方法在jq1.2.3引入,作用是把任意的值读取/存储到DOM元素对应的jq对象上.从性能上对比,.prop() > .data() > .attr(),不同浏览器不同版本.data()和.attr()的性能关系有差异,不过.prop()总

jQuery中attr()、prop()、data()用法及区别

.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1.6引入,读/写DOM的property..data(),此方法在jq1.2.3引入,作用是把任意的值读取/存储到DOM元素对应的jq对象上. 从性能上对比,.prop() > .data() > .attr(),不同浏览器不同版本.data()和.attr()的性能关系有差异,不过.prop()

jQuery .attr() .prop() .data()区别及全选等问题

DOM的attribute和property 今天讲一个JS的小话题,就是DOM节点的attribute和property的区别,这个点看起来很小,其实背后别有洞天.如果面试一个前端,听他讲讲对这个问题的理解,基本能分辨是不是菜鸟.下面的内容请各位细心体会. 页面有一个INPUT输入框   这个比较简单,没什么好说的,两个值都是’1′.现在我把输入框的值改成100,然后重新取一遍值: 为什么两个值不同了?这就是attribute和property在作怪. Attibute 这 个INPUT节点有

Reading binary data using jQuery Ajax

jQuery is an excellent tool to make web development easy and straightforward. It helps while doing DOM manipulation and makes Ajax requests painless across different browsers and platforms. But if you want make an Ajax request, which is giving binary