Rumah > Artikel > hujung hadapan web > jquery在元素中存储数据:data()

jquery在元素中存储数据:data()

无忌哥哥asal: 2018-06-29 13:39:501968semak imbas

在元素中存储数据:data()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.在元素中存储数据:data()</title>
</head>
<body>
<img src="../images/peter.jpg" width="200" alt="php中文网" title="朱老师" id="pic" data-job="php中文网朱老师">
</body>
</html>

data():读取元素中属性名以data-开始的自定义数据,可以省略data-前缀

var res = $(&#39;#pic&#39;).data(&#39;job&#39;)

如果用之前的attr()方法必须写出完整的属性名

var res = $(&#39;#pic&#39;).attr(&#39;data-job&#39;)

data()也是一个自带读取器和设置器的方法

$(&#39;#pic&#39;).data(&#39;data-course&#39;, &#39;php项目开发课程&#39;)

如果是动态设置的自定义属性,省略前缀是获取不到的

var res = $(&#39;#pic&#39;).data(&#39;course&#39;)

需要加上前缀

var res = $(&#39;#pic&#39;).data(&#39;data-course&#39;)

data()能获取元素上的原生属性吗?无法读取

var res = $(&#39;#pic&#39;).data(&#39;title&#39;)

但是支持动态设置title属性,仅限于脚本中使用,原始值并未发生变化

var res = $(&#39;#pic&#39;).data(&#39;title&#39;,&#39;hellow&#39;)

现在就可以在脚本中读取了title的值了,尽管这个值与原生的alt值并不相同

var res = $(&#39;#pic&#39;).data(&#39;title&#39;)

同样,data()也有一个对应的removeData()用来删除自定义或由它创建的属性

var res = $('#pic').removeData('title')  //仅删除临时创建的,原值不受影响
var res = $('#pic').removeData('data-course')  //仅删除临时创建的
var res = $(&#39;#pic&#39;).data(&#39;data-course&#39;)  //仅删除临时创建的

原始标签自带的自定义属性中删除不了的

var res = $('#pic').removeData('data-job') 
var res = $(&#39;#pic&#39;).data(&#39;job&#39;)

在控制台查看结果

console.log(res)

Atas ialah kandungan terperinci jquery在元素中存储数据:data(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Vue组件选项props的使用介绍Artikel seterusnya：vue的项目优化之通过keep-alive数据缓存的方法

Artikel berkaitan

Lihat lagi