jQuery中$.each()和json实例

最新推荐文章于 2024-08-23 10:35:13 发布

VLilyV

最新推荐文章于 2024-08-23 10:35:13 发布

阅读量336

点赞数

分类专栏： jquery 文章标签： json jquery

本文链接：https://blog.csdn.net/VLilyV/article/details/72510390

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>挑战题</title>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    </head>
    <body>
        <div>
            <span>姓名：</span>
            <span><input id="text" type="text" name="UserName" placeholder="请输入姓名"></span></br>
            <span>性别：</span>
            <span><select id="sex">
                <option>男</option>
                <option>女</option>
            </select></span></br>
            <input id="btn" type="button" value="提交">
        </div>
       <ul id="list">

       </ul> 
       <script>
           $('#btn').on("click",function(){
               //方法1，直接获取，记得写在函数里面，当改变时动态获取 
                var  json=[{
                    "name": $("#text").val(),
                    "sex": $("#sex").val()
                }]
                //方法2动态添加  var json=[];  json.push({"name": $("#text").val(),"sex":$("#sex").val()});
               $.each(json,function(index){
                   $('#list').append("<li>姓名为："+json[index].name+"</br>性别："+json[index].sex+"</li>");
               })
           })
       </script>
    </body>
</html>

VLilyV

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中$.each()和json实例

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>挑战题</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery
复制链接

扫一扫

专栏目录