创建json对象

jQuery创建json对象 方法二：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>创建json对象第二种方法</title>
    </head>
    <body>
        <ul>
            <li>姓名：<span class="name"></span></li>
            <li>年龄：<span class="age"></span></li>
            <li>性别：<span class="sex"></span></li>
            <li>地址：<span class="address"></span></li>
        </ul>
    </body>
    <script src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(function(){
            // 创建json对象
            var str=[
                {
                    name:"小明",
                    age:20,
                    sex:"男",
                    address:"火星"
                },
                {
                    name:"小芳",
                    age:18,
                    sex:"女",
                    address:"火星"
                }
            ];
            
            // 访问对象
            var main="";
            $.each(str,function(i){
                // 字符串模板拼接法
                main+=`
                    <li>姓名：<span class="name">${str[i].name}</span></li>
                    <li>年龄：<span class="age">${str[i].age}</span></li>
                    <li>性别：<span class="sex">${str[i].sex}</span></li>
                    <li>地址：<span class="address">${str[i].address}</span></li>
                `;
            });
            $("ul").html(main);
            
        });
    </script>
</html>

 

posted @ 2019-08-20 10:43  Mr▪小zhou  阅读(509)  评论(0)  编辑  收藏  举报