jQuery,data()メソッド学習

3190 ワード

<!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>