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

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

<!-- 方法一 -->
<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>

2.常见的寻找节点元素