内容简介：以上代码先 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() 方法取值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
计算机科学概论（第12版）
[美] J.Glenn Brookshear、[美] Dennis Brylow / 刘艺、吴英、毛倩倩 / 人民邮电出版社 / 2017-1 / 69.00
《计算机科学概论》是计算机科学概论课程的经典教材，全书对计算机科学做了百科全书式的精彩阐述，充分展现了计算机科学的历史背景、发展历程和新的技术趋势。《计算机科学概论》首先介绍的是信息编码及计算机体系结构的基本原理，进而讲述操作系统和组网及因特网，接着探讨算法、程序设计语言及软件工程，然后讨论数据抽象和数据库方面的问题，讲述图形学的一些主要应用以及人工智能，以计算理论的介绍结束全书。《计算机科学概论......一起来看看 《计算机科学概论（第12版）》 这本书的介绍吧!
