内容简介：以上代码先 alert 123，再 alert 456，这都在预料之中。不过，F12，查看 DOM 结构，并没有任何改变。原来 data() 是只读 DOM 的，并不会改变 DOM 结构。用 data 赋值，虽然会改变值，但是这个值并不会写回 DOM。
<div id="d1" data-name="123"></div>
<div id="d2"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
alert($("#d1").data("name"));
$("#d1").data("name", "456");
alert($("#d1").data("name"));
$("#d2").data("name", "123");
});
</script>
以上代码先 alert 123，再 alert 456，这都在预料之中。
不过，F12，查看 DOM 结构，并没有任何改变。
原来 data() 是只读 DOM 的，并不会改变 DOM 结构。用 data 赋值，虽然会改变值，但是这个值并不会写回 DOM。
再看继续看引入 attr() 的情况。
<div id="d2"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#d2").attr("data-name", "456");
alert($("#d2").data("name"));
});
</script>
<div id="d2" data-name="123"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#d2").attr("data-name", "456");
alert($("#d2").data("name"));
});
</script>
以上两段代码，alert 都是 456。
<div id="d2"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
alert($("#d2").data("name"));
$("#d2").attr("data-name", "456");
alert($("#d2").data("name"));
});
</script>
<div id="d2" data-name="123"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
alert($("#d2").data("name"));
$("#d2").attr("data-name", "456");
alert($("#d2").data("name"));
});
</script>
上述第一段代码，第一次 alert undefined，第二次 alert 456。
上述 第二段 代码，第一次 alert 123，第二次 alert 也是 123。
进一步研究，可以得出结论：
- 至始至终，data() 都不会改变 DOM，但 DOM 的改变是否影响 data() 要继续看下面两条结论。
- 如果没有对某元素、某 data-使用 data() 方法、或者虽然使用了 data() 方法但没有取到值（data- 属性不存在，导致取得值为 undefined）：则通过 attr() 赋值、改变值后，data() 方法获取的是 DOM 最新的。
- 如果已经对某元素、某 data-使用 data() 方法，且取到值了：就相当于与 DOM 断开了，attr() 赋值不会影响 data() 值，data() 赋值也不会影响 DOM 表现。
- 所以不建议对 DOM 会有变化的 data- 采用 data() 方法取值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
信息论、推理与学习算法
麦凯 / 高等教育出版社 / 2006-7 / 59.00元
本书是英国剑桥大学卡文迪许实验室的著名学者David J．C．MacKay博士总结多年教学经验和科研成果，于2003年推出的一部力作。本书作者不仅透彻地论述了传统信息论的内容和最新编码算法，而且以高度的学科驾驭能力，匠心独具地在一个统一框架下讨论了贝叶斯数据建模、蒙特卡罗方法、聚类算法、神经网络等属于机器学习和推理领域的主题，从而很好地将诸多学科的技术内涵融会贯通。本书注重理论与实际的结合，内容组......一起来看看 《信息论、推理与学习算法》 这本书的介绍吧!
