请老师解答这是为什么

我有点懵了，这个data()不传参的意思难道不是获取所有的data吗，可是我这里不加参数就获取不到html里面的data为什么呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>练手jQuery</title>
</head>
<body>
<div class="box" est="newAt1" data-id="html data1"></div>
<div class="box" est="newAt2" data-id1="html data2"></div>
<script src="https:cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">


var $box1 = $('.box').first()

$box1.data('id','new data')
console.log($box1.data('id'))
$box1.removeData('id')
console.log($box1.data('id'))
</script>
</body>
</html>

慕村3232222 2018-07-09

源自：jQuery DOM操作 2-13 选择练习

收起

1回答

好帮手慕星星 2018-07-09 18:29:34

第一段代码是因为在脚本用data重新设置了一下id属性，这就涉及到了优先级的问题，如果用data重新设置了属性，先去访问本身data设置的，再去访问html里面设置的属性，（视频中有讲到的哦）也就是下面的任何操作是针对于新设置的这个id来说的，所以移除之后，再次打印data就是空的。第二段代码中第一次打印获取的是上面data新设置的id，移除之后用data获取的id是html中，因为新设置的已经没有了，所以获取的就是html里面的id。自己再理解下，祝学习愉快~~

收起回答

提问者慕村3232222 #1

可是为什么移除之后再用data()和data('id')的效果不一样呢？

2018-07-09 21:21:19
好帮手慕星星回复提问者慕村3232222 #2

还是优先级的问题，如果代码中有用data重新设置的属性，下面有关的操作都是和重新定义的属性相关的，第一段代码中移除重新设置的id属性之后，再次打印data()就是空的，第二段代码中，打印的是data获取的id，现在新设置的属性没有了，就会去找html里面的属性。

2018-07-10 09:39:04