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>

创建json对象的更多相关文章

  1. 简单使用JSON,JavaScript中创建 JSON 对象(一)

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...

  2. js如何创建JSON对象

    js如何创建JSON对象 一.总结 一句话总结:直接创建js数组和js对象即可,然后JSON.stringify就可以获取json字符串,js中的一切都是对象,而且js中的对象都是json对象 js ...

  3. javascript学习-创建json对象数据,遍历

    之前我已经有讲过后台返回json数据到前台,并在前台遍历json数据. 这里讲下直接在JS里创建JSON数据,然后遍历使用~ 创建代码例如以下:(创建的是JSON对象) var YearSelect ...

  4. java链式创建json对象

    我们主要介绍一下:java中如何通过最简单的方式实现链式创建json对象,解决创建json代码臃肿的问题. 1.假设我们要创建一个json对象格式如下: { "code": 0, ...

  5. Java对象与JSON互相转换jsonlib以及手动创建JSON对象与数组——(二)

    首先声明一下,jsonlib转换与GSON相比太差劲了,操作不是一般的繁琐.GSON可以直接转换成各种集合与对象类型.强烈推荐使用GSON.而且GSON一个方法就可以解决,jsonlib转来转去太繁琐 ...

  6. Jquery创建JSON对象

    <html> <body> <h2>通过 JSON 字符串来创建对象</h3> <p> First Name: <span id=&q ...

  7. js创建json对象

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js 创建 JSON对象

    //定义变量 var Type = [{}]; Type.push({ label: "labelname", value: "value" });

  9. java对象和json对象之间互相转换

    import java.util.ArrayList;import java.util.Collection;import java.util.Iterator;import java.util.Li ...

随机推荐

  1. 网站title,meta,description如何设置,长度大小多少合适!

    转自:http://www.os1010.com/archives/1682 如 何 把 握 html 网 页 中 的 meta 标 签 对于高级的搜索引擎来说,html 的meta 标签并不是什么新 ...

  2. WPF学习笔记 - 如何用WPF创建单实例应用程序

    使用一个已命名的(操作系统范围的)互斥量. bool mutexIsNew; using(System.Threading.Mutex m = new System.Threading.Mulex(t ...

  3. [CDH] Cloudera's Distribution including Apache Hadoop

    You may choose to install spark, yarn, hive, etc one by one. [Spark] 00 - Install Hadoop & Spark ...

  4. centos6 安装tensorflow

    1.升级python2.6.6 至 python2.7.12+ 升级时./configure --prefix=/usr/local/python27 --enable-unicode=ucs4 2. ...

  5. Python3 编程第一步_斐波纳契数列_连续赋值

    # Fibonacci series: 斐波纳契数列 # 两个元素的总和确定了下一个数 a, b = 0, 1 while b < 10: print(b) a, b = b, a+b # 1 ...

  6. MySQL时间相关操作

    本文主要介绍MySQL使用过程中有关时间处理的相关操作: MySQL时间更新(加上或减去一段时间) MySQL毫秒数和日期之间的转换 一.MySQL时间更新(加上或减去一段时间) 1.1 MySQL时 ...

  7. JAVA 面向对象编程 --自我总结

    子系统 系统结构是指由系统多个子系统组成,以及子系统由多个更小的子系统组成的结构.那么子系统又具备哪些特点呢? 特点: 1.结构的稳定性 :软件在设计阶段,在把一个系统划分成更小的子系统时,设计合理, ...

  8. 关于lombok插件的使用,强大的简化代码工具

    关于下载和安装lombok插件,过程特别简单,可以参考: https://blog.csdn.net/longloveqing/article/details/81539749 安装好后,下面介绍下l ...

  9. Nmap使用手册参数详细说明

      nmap –iflist : 查看本地主机的接口信息和路由信息 -A :选项用于使用进攻性方式扫描 -T4: 指定扫描过程使用的时序,总有6个级别(0-5),级别越高,扫描速度越快,但也容易被防火 ...

  10. Openstack知识点总结

    Openstack: 一.云计算+openstack概念: 1.云计算是一种按使用量付费的模式,这种模式提供可用的,便捷的,按需的访问,通过互联网进入可配置的计算资源共享池(资源包括网络,计算,存储, ...