您的当前位置:首页html5的自定义data-*属性与jquery的data()方法的使用_html5教程技巧

html5的自定义data-*属性与jquery的data()方法的使用_html5教程技巧

2023-11-26 来源:瑞奇养生

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。 下面的一个代码片段是一个有效的HTML5标记: 代码如下: data-myid="3e4ae6c4e">Some awesome data 可是,怎么来读取这些数据呢?你当然可以遍历页面元素来读取你想要的属性,但jquery已经内置了方法来操作这些属性。使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj),这个方法是在 jQuery1.4.3版本后出现的,它能返回相应的data属性。 举个例子,你可以用下面的写法读取 data-myid属性值: 代码如下: var myid= jQuery("#awesome").data('myid'); console.log(myid); 你还可以在"data-*" 属性里使用json语法,例如,如果你写出下面的html: 代码如下: 你可以通过js直接访问这个数据,通过json的key值,你能得到相应的value: 代码如下: var gameStatus= jQuery("#awesome-json").data('awesome').game; console.log(gameStatus); 你也可以通过.data(key,value)方法直接给"data-*" 属性赋值。一个重要的你要注意的事情是,这些"data-*" 属性应该和它所在的元素有一定的关联,不要把它当成存放任意东西的存储工具。 译者补充:尽管"data-*" 是HTML5才出现的属性,但jquery是通用的,所以,在非HTML5的页面或浏览器里,你仍然可以使用.data(obj)方法来操作"data-*" 数据。

小编还为您整理了以下内容,可能对您也有帮助:

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

主要的方法如下:
复制代码
代码如下:
.data(
key,
value
)
.data(
obj
)
.data(
key
)
.data()
从jQuery
1.4.3起,
HTML
5
data-
属性
将自动被引用到jQuery的数据对象中。
例如HTML:
复制代码
代码如下:<div
data-role
=
"page"
data-last-value
=
"43"
data-hidden
=
"true"
data-options
=
'{"name":"John"}'
>
</div>
下面的
jQuery代码都是返回
true
的:
复制代码
代码如下:
$
(
"div"
)
.
data
(
"role"
)
===
"page"
;
$
(
"div"
)
.
data
(
"lastValue"
)
===
43
;
$
(
"div"
)
.
data
(
"hidden"
)
===
true
;
$
(
"div"
)
.
data
(
"options"
)
.
name
===
"John"
;
和html5的api不同的是,jQuery会尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。如果这样做不会改变数值的表示,那么该值将转换为一个数字(number)。例如,“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变他们的表示,所以他们被保留为字符串。字符串值“100”被转换为数字100。
如果数据(data)属性是一个对象(以“{”开始)或数组(以'[‘开始),可以用jQuery.parseJSON
将其解析成字符串;它必须遵循
有效的JSON的语法
,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。
如果想将取出的属性值直接当作字符串的话,请使用
attr()
方法。
data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。
调用
.data()
时如果不带参数,将会以
JavaScript
对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的
.data(obj)
操作,将不会再影响这个对象。另外,直接操作这个对象会比每次调用
.data()
来设置或获取值要快一些。

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

主要的方法如下:
复制代码
代码如下:
.data(
key,
value
)
.data(
obj
)
.data(
key
)
.data()
从jQuery
1.4.3起,
HTML
5
data-
属性
将自动被引用到jQuery的数据对象中。
例如HTML:
复制代码
代码如下:<div
data-role
=
"page"
data-last-value
=
"43"
data-hidden
=
"true"
data-options
=
'{"name":"John"}'
>
</div>
下面的
jQuery代码都是返回
true
的:
复制代码
代码如下:
$
(
"div"
)
.
data
(
"role"
)
===
"page"
;
$
(
"div"
)
.
data
(
"lastValue"
)
===
43
;
$
(
"div"
)
.
data
(
"hidden"
)
===
true
;
$
(
"div"
)
.
data
(
"options"
)
.
name
===
"John"
;
和html5的api不同的是,jQuery会尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),数组(arrays)和空(null))。如果这样做不会改变数值的表示,那么该值将转换为一个数字(number)。例如,“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变他们的表示,所以他们被保留为字符串。字符串值“100”被转换为数字100。
如果数据(data)属性是一个对象(以“{”开始)或数组(以'[‘开始),可以用jQuery.parseJSON
将其解析成字符串;它必须遵循
有效的JSON的语法
,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。
如果想将取出的属性值直接当作字符串的话,请使用
attr()
方法。
data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。
调用
.data()
时如果不带参数,将会以
JavaScript
对象的形式获取所有数据。这个对象可以安全的存放在变量中,因为一旦这个新对象被提取出来,之后对元素进行的
.data(obj)
操作,将不会再影响这个对象。另外,直接操作这个对象会比每次调用
.data()
来设置或获取值要快一些。

H5 标签里加的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 。

H5 标签里加的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 。

html5中的个别疑问求大湿详细说说

html5中的data-*属性,data-src data-position data-size都是自定义属性,用来存储数据。如游戏中的生命值,魔法量,攻击力,后缀名自定义。data-属性所以浏览器都支持,可用getAttribute,setAttribute,dataset获取、设置值,jquery中data()方法也可以访问data-属性。data-属性可以作为css的样式标准,如[data-xxx]{background:red;},但最好不要用。

html5中的个别疑问求大湿详细说说

html5中的data-*属性,data-src data-position data-size都是自定义属性,用来存储数据。如游戏中的生命值,魔法量,攻击力,后缀名自定义。data-属性所以浏览器都支持,可用getAttribute,setAttribute,dataset获取、设置值,jquery中data()方法也可以访问data-属性。data-属性可以作为css的样式标准,如[data-xxx]{background:red;},但最好不要用。

jquery data 怎么使用

jquery中data() 方法向被选元素附加数据,或者从被选元素获取数据。
jquery中data() 方法向被选元素附加数据,或者从被选元素获取数据。这使我们通过HTML自定义属性,操作数据,显得非常方便。通常我们也会通过给html自定义属性这样的做法,来存储和操作数据。在jquery中也给我们
提供了data(name,value)这样的方法,来非常方便的实现。有了data()这个方法,你就可以很方便的在一个html标签中添加data-*这样的自定义属性。接下来,就data()方法简单的做下了解。
以下是摘自w3school中对data用法的说明:
data方法从元素中读取数据的语法:
$(selector).data(name) name:可选。规定要取回的数据的名称。

如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。

data方法从元素中存储数据的语法:
$(selector).data(name,value)

name:必需。规定要设置的数据的名称。

value:必需。规定要设置的数据的值。

当然,我们在这里,也可以把一个包含键/值对的对象,向被选元素添加数据。语法如下:

$(selector).data(object)

object:必需。规定包含名称/值对的对象。

Html代码如下:
data方法之读取数据:

<div id="divName" data-name="lichaoqiang">单个数据:data-name="lichaoqiang"</div>
<div id="divJson" data-user='{"user_id":20141111,"user_name":"lichaoqiang"}'>存储json数据:{"user_id":20141111,"user_name":"lichaoqiang"}</div>
<script type="text/javascript">
console.log($("#divName").data("name")); //通过name输出单个数据
console.log($("#divJson").data("user").user_name); //通过name输出json数据
</script>

注意:在元素data-*属性中设置json数据时,需要注意单双引号,否则可能出现undefined的,获取不到数据。正确的做法是用双引号。
data方法之存储数据:

<div id="container">这是一个div标签</div>

<script type="text/javascript">
$("#container").data("name", "lichaoqiang");//存储数据
console.log($("#container").data("name"));//通过name读取数据
</script>

jquery data 怎么使用

jquery中data() 方法向被选元素附加数据,或者从被选元素获取数据。
jquery中data() 方法向被选元素附加数据,或者从被选元素获取数据。这使我们通过HTML自定义属性,操作数据,显得非常方便。通常我们也会通过给html自定义属性这样的做法,来存储和操作数据。在jquery中也给我们
提供了data(name,value)这样的方法,来非常方便的实现。有了data()这个方法,你就可以很方便的在一个html标签中添加data-*这样的自定义属性。接下来,就data()方法简单的做下了解。
以下是摘自w3school中对data用法的说明:
data方法从元素中读取数据的语法:
$(selector).data(name) name:可选。规定要取回的数据的名称。

如果没有规定名称,则该方法将以对象的形式从元素中返回所有存储的数据。

data方法从元素中存储数据的语法:
$(selector).data(name,value)

name:必需。规定要设置的数据的名称。

value:必需。规定要设置的数据的值。

当然,我们在这里,也可以把一个包含键/值对的对象,向被选元素添加数据。语法如下:

$(selector).data(object)

object:必需。规定包含名称/值对的对象。

Html代码如下:
data方法之读取数据:

<div id="divName" data-name="lichaoqiang">单个数据:data-name="lichaoqiang"</div>
<div id="divJson" data-user='{"user_id":20141111,"user_name":"lichaoqiang"}'>存储json数据:{"user_id":20141111,"user_name":"lichaoqiang"}</div>
<script type="text/javascript">
console.log($("#divName").data("name")); //通过name输出单个数据
console.log($("#divJson").data("user").user_name); //通过name输出json数据
</script>

注意:在元素data-*属性中设置json数据时,需要注意单双引号,否则可能出现undefined的,获取不到数据。正确的做法是用双引号。
data方法之存储数据:

<div id="container">这是一个div标签</div>

<script type="text/javascript">
$("#container").data("name", "lichaoqiang");//存储数据
console.log($("#container").data("name"));//通过name读取数据
</script>

自定义属性data-options怎么用

data-options={typeId:"aaaa"}中的typeId值可以用以下方法取得,但是表格内编辑器只有在编辑时才创建,单独调用无效。 

<input id="p1" class="mini-combobox" data-options='{typeId:"aaaa"}' />varcombox= mini.get("p1")alert(combox.typeId)。    

通过属性data-options,可以对easyui组件的实例化可以完全写入到html中。

例:

了解easyui tree组件的估计都知道tree的node有他自己单独的属性(id,text,iconCls,checke d,state,attribute,target),而原先这个几个属性想要通过html的方式赋值实例的话,是不能完全做到的。

attribute属性必须json的方式才能赋值,这也给开发带来了一下不便,有了data-options这个属性,一切问题都迎刃而解了。

html5 自定义属性需要以data开始吗

所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。确切的说data-*并不是自定义属性,而是解决自定义属性的一种方案。因为大部分自定义属性都是为了在标签上存储数据。

    data-*里存储的内容可以使用JavaScript语言直接读取。相比不用data-*自定义属性更容易读取和存储。

    data-*可以大大提高工作效率,例如ajax请求后获得的一列数据需要放在li标签里,那么我们在循环生产li标签的同时,可以依次设置data-*属性,这样,我们在写JavaScript语言来操作li标签的时候,可以直接读取自定义的属性来获取li标签对应的数据对象。

    data-*自定义属性可以使用jQuery库来解决兼容问题。

瑞奇养生还为您提供以下相关内容希望对您有帮助:

H5 标签里加的data属性

1.使用getAttribute setAttribute 方法 div.setAttribute('data-options',{/*数据*/});div.getAttribute("data-options");2.使用dataset属性返回一个集合 div.dataset --&gt; DOMStringMap { options:"{\"name\":\"J...

jquery data 怎么使用

(selector).data(object)object:必需。规定包含名称/值对的对象。Html代码如下:data方法之读取数据:&lt;div id="divName" data-name="lichaoqiang"&gt;单个数据:data-name="lichaoqiang"&lt;/div&gt; &lt;div id="divJson" data-use...

html5中的个别疑问求大湿详细说说

html5中的data-*属性,data-src data-position data-size都是自定义属性,用来存储数据。如游戏中的生命值,魔法量,攻击力,后缀名自定义。data-属性所以浏览器都支持,可用getAttribute,setAttribute,dataset获取、设置...

自定义属性data-options怎么用

data-options={typeId:"aaaa"}中的typeId值可以用以下方法取得,但是表格内编辑器只有在编辑时才创建,单独调用无效。&lt;input id="p1" class="mini-combobox" data-options='{typeId:"aaaa"}' /&gt;varcombox= mini.get("...

如何设置HTML自定义属性

首先,添加一些简单的内容和自定义属性以及ID等元素,以便能够识别JavaScript示例。正如所看到的那样,自定义属性的形式为:“data-*”,在“data-”部分设定名称或者选定的名称。在HTML5中使用自定义属性,这是唯一有效的方法...

怎样使用HTML5中的Data属性

html 文件代码如下: html5_input_typedate type="date"只在支持它的浏览器有效,所以在不支持的浏览器(如IE6)中,会把所有不支持类型的type默认为type="text"

html5 自定义属性需要以data开始吗

data-*里存储的内容可以使用JavaScript语言直接读取。相比不用data-*自定义属性更容易读取和存储。data-*可以大大提高工作效率,例如ajax请求后获得的一列数据需要放在li标签里,那么我们在循环生产li标签的同时,可以依次设置data...

自定义属性data-options怎么用

这是html5新增的方法,对象的.data("options")即可获得值 也可以使用jquery ("xxx").data("options")

html5如何自适应屏幕

Console.log(p.dataset.hello)//这是自定义属性的值。您还可以通过jquery获得自定义属性的值。(p).data(hello)//这是自定义属性的值当然,您也可以通过传统方法获得自定义属性的值。letp=document.querySelector(p)p....

web前端开发中的自定义属性怎么进行数据存放

在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。&lt;div id = "user" data-uid = "12345" data-uname =...

Top