jQuery,data()方法學習

時間 2020-01-08

原文原文鏈接

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>返回值:jQuerydata([key],[value])</title>
</head>
<body>
    <!-- demo3 data方法的使用 -->
    <a href="javascript:;" id="demo3">demo3</a>
    <div></div>
    <button id="clear">clear</button>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        /**
         *返回值:jQuerydata([key],[value])
         *key:存儲的數據名
         *value:將要存儲的任意數據
         *
         *在元素上存放數據,返回jQuery對象。
         *V1.4.3 新增用法NEW data(obj) 可傳入key-value形式的數據。
         *
         */
        $(document).ready(function(){
            /**
             * demo3
             */
            $("#demo3").click(function(){
                //賦值
                $(this).data("value","hanchao");
                //取值
                var value = $(this).data("value");
                console.log(value);
                //從新賦值
                $(this).data("value",78);
                //從新取值
                var value_new = $(this).data("value");
                console.log(value_new);
                //賦值一個對象
                $(this).data("user",{username:"tom",password:"123456",address:"China"});
                //取值
                var username = $(this).data("user").username;
                var password = $(this).data("user").password;
                var address = $(this).data("user").address;
                console.log("username:" + username + ", password:" + password + ", address:" + address);
                //咱們還能夠把值放在一個div中
                $("div").data("test",{username:"tom",password:"123456",address:"China"});
                //取值
                var username1 = $("div").data("test").username;
                var password1 = $("div").data("test").password;
                var address1 = $("div").data("test").address;
                console.log("username1:" + username1 + ", password1:" + password1 + ", address1:" + address1);
            });
            /**
             * [ description] 清除div中的data數據
             * @return {[type]}
             */
            $("#clear").click(function(){
                $("div").removeData("test");
                //取值
                var username = $("div").data("test");
                console.log("username1:" + username);
            });
        });
    </script>
</body>
</html>