jQuery,data()方法学习

浏览数：36 / 时间：2015年06月09日

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