jQuery：基础4---小知识点

1.在html页面中，向一个标签元素里面存入数据，在js里面取出数据。

[code]<!-- 方法一 -->
<div id="d1" data-dt="hello" data-num=68 data-area="信阳" data-user="{{phone}}">存取数据</div>
<script>
// 取出数据
var a = $("#d1").data("dt");
var b = $("#d1").data("num");
var c = $("#d1").data("user");
var d = $("#d1").data("area");
console.log(a, b, c, d);      //结果：hello  68  {{phone}}  信阳

var e = $("#d1").attr("data-dt");
var f = $("#d1").attr("data-num");
var m = $("#d1").attr("data-user");
var n = $("#d1").attr("data-area");
console.log(e, f, m, n);      //结果：hello  68  {{phone}}  信阳
// 附加：第一个68是数字，第二个68是字符串。
</script>

<!-- 方法二 -->
<div id="d2" data-dt="hello">存取数据</div>
<script>
// 存入数据，标签元素不会添加属性。
$("#d2").data("age", 18);
$("#d2").data("sex", "男");
$("#d2").data("name", "liu");

// 取出数据
var a = $("#d2").data("dt")
var b = $("#d2").data("age")
var c = $("#d2").data("sex")
var d = $("#d2").data("name")
console.log(a, b, c, d);      //结果：hello  18  男  liu
// 附加：可以在一个事件方法中存数据，在另一个事件方法中取数据。

var e = $("#d2").attr("data-dt");
var f = $("#d2").attr("data-age");
var m = $("#d2").attr("data-sex");
var n = $("#d2").attr("data-name");
console.log(e, f, m, n);      //结果：hello  undefined  undefined  undefined
</script>

<!-- 方法三 -->
<div id="d3" data-dt="hello">存取数据</div>
<script>
// 存入数据，标签元素会添加属性。
$("#d3").attr("data-age", 20);
$("#d3").attr("data-sex", "男");
$("#d3").attr("data-name", "liu");

// 取出数据
var a = $("#d3").data("dt");
var b = $("#d3").data("age");
var c = $("#d3").data("sex");
var d = $("#d3").data("name");
console.log(a, b, c, d);      //结果：hello  20  男  liu

var e = $("#d3").attr("data-dt");
var f = $("#d3").attr("data-age");
var m = $("#d3").attr("data-sex");
var n = $("#d3").attr("data-name");
console.log(e, f, m, n);      //结果：hello  20  男  liu
// 附加：第一个20是数字，第二个20是字符串。
</script>