实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.在元素中存储数据：data()</title>
</head>
<body>
<img src="./images/hzy.jpg" width="200" alt="浦北社区" title="黄忠倚" id="pic" data-job="浦北社区管理员">
</body>
</html>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var res = $('#pic').data('job')
//如果用之前的attr()方法必须写出完整的属性名
// var res = $('#pic').attr('data-job')
//
//data()也是一个自带读取器和设置器的方法
$('#pic').data('data-course','关注浦北，服务民生')
//
//如果是动态设置的自定义属性，省略前缀是获取不到的
var res = $('#pic').data('course')
//
//需要加上前缀
var res = $('#pic').data('data-course')
//
//data()能获取元素上的原生属性吗？无法读取
var res = $('#pic').data('title')
//
//但是支持动态设置title属性，仅限于脚本中使用，原始值并未发生变化
var res = $('#pic').data('title','hello')
//现在就可以在脚本中读取了title的值了，尽管这个值与原生的alt并不相同
var res = $('#pic').data('title')
//
//同样，data()也有一个对应的removeData()用来删除自定义或由它创建的属性(必须是动态的属性，不能是当前标签中已经存在的属性)
var res = $('#pic').removeData('titile') //仅删除临时创建的，原值不受影响
var res = $('#pic').removeData('data-course') //仅删除临时创建的
//
var res = $('#pic').data('data-course') //仅删除临时创建的
//
//原始标签自带的自定义属性中删除不了的
var res = $('#pic').removeData('data-job')
var res = $('#pic').data('job')
//
//控制台查看结果
console.log(res)
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
