一个案例——忘记的时候可以翻阅参考↓<务必放在服务器内才能看效果哟~>
 
html文件内容如下↓
<!DOCTYPE html>

<html>

    <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             * {

                 margin: 0;

                 padding: 0;

             }

             ul li {

                 list-style: none;

             }

             a {

                 text-decoration: none;

                 color: #666;

             }

             a:hover {

                 color: red;

             }

             ul {

                 width: 450px;

                 border: 1px solid green;

                 margin: 20px auto;

             }

             li {

                 margin: 5px;

                 background: #ccc;

             }

             li img {

                 height: 100px;

                 display: block;

             }

             li span {

                 color: #ff5701;

                 font: 25px/1 "";

             }

         </style>

         <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

         <script>

             $.getJSON("practice.json",function(json){

                 //console.log(json.goods);

                 //console.log(json.goods[0]);

                 //console.log(json.goods[0].price);

                 var goods = json.goods;

                 $.each(goods,function(j){

                      $("<li>" + "<img src='" + goods[j].pic + "' />" + goods[j].name + "<br />" + "<a href='#'>" +goods[j].description + "</a>" + "<br />" + "<span>" + "¥：" + goods[j].price + "</span>" + "</li>").appendTo($("ul"));

                      console.log(goods[j].name);

                 });

             });

         </script>

    </head>

    <body>

         <ul>

         </ul>

    </body>

</html>
 
json文件内容如下↓
{

    "goods": [

         {"pic":"img/1.jpg","name":"男鞋","description":"【热销1万双】骆驼沙滩鞋凉鞋 男女士休闲运动凉鞋夏","price":"119"},

         {"pic":"img/2.jpg","name":"连衣裙","description":"夏天连衣裙女装2017新款夏季韩版时尚显瘦裙子粉色","price":"219"},

         {"pic":"img/3.jpg","name":"荷叶边","description":"正品代购明星杨幂同款连衣裙新款海滩假日荷叶边气","price":"78"},

         {"pic":"img/4.jpg","name":"一字领","description":"一字领露肩连衣裙夏韩范收腰腰带短袖刺绣蓝色竖条","price":"233"},

         {"pic":"img/5.jpg","name":"旗袍","description":"中老年真丝连衣裙旗袍夏装短款女装显瘦桑蚕丝2017新款妈","price":"159"},

         {"pic":"img/6.jpg","name":"小香风","description":"原创设计师泰国OL小香风蝴蝶结夜店黑色显瘦a字连","price":"301"}

    ]

}


效果图↓







												


											
一看就懂——利用getJSON（）与each（）方法动态创建内容的更多相关文章
	

    
								
  1. c# 利用反射 从json字符串 动态创建类的实例 并动态为实例成员赋值
		
    转自 http://hi.baidu.com/wjinbd/item/c54d43d998beb33be3108fdd 1 创建自己要用的类 class stu { string _name; int ...
    
		
    2. 
						
  2. 利用MAP动态创建C++类对象
		
    MFC的CRuntimeClass利用链表实现了C++类的动态创建.但是如果项目中对动态创建的要求比较低,我们完全可以利用map实现简单的动态创建. http://blog.csdn.net/yeji ...
    
		
    3. 
						
  3. 【算法】变邻域搜索算法(Variable Neighborhood Search,VNS)超详细一看就懂的解析
		
    更多精彩尽在微信公众号[程序猿声] 变邻域搜索算法(Variable Neighborhood Search,VNS)一看就懂的解析 00 目录 局部搜索再次科普 变邻域搜索 造轮子写代码 01 局部 ...
    
		
    4. 
						
  4. 一看就懂的 安装完ubuntu 18.04后要做的事情和使用教程
		
    一看就懂的 安装完ubuntu 18.04后要做的事情和使用教程原创CrownP 最后发布于2019-02-05 00:48:30 阅读数 2982 收藏展开1.更改为阿里云的源点击软件和更新 点击其 ...
    
		
    5. 
						
  5. 一看就懂的Android APP开发入门教程
		
    一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载   这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤 ...
    
		
    6. 
						
  6. mysql取出现在的时间戳和时间时间戳转成人类看得懂的时间
		
    mysql取出现在的时间戳和时间时间戳转成人类看得懂的时间,我们在mysql里面他封装了一个内置的时间戳转化的函数,比如我们现在的时间戳是:1458536709 ,"%Y-%m-%d&quo ...
    
		
    7. 
						
  7. 一看就懂的ReactJs入门教程（精华版）
		
    一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...
    
		
    8. 
						
  8. JavaScript一看就懂(2)闭包
		
    认识闭包之前需要先了解作用域,如果你对作用域还没有足够了解,请移步JavaScript一看就懂(1)作用域 什么是闭包? 我们可以先简单认为:一个函数a定义在另一个函数b里面,这个函数a就是闭包: f ...
    
		
    9. 
						
  9. 看我是如何利用升级系统一键GetShell
		
    i春秋作家:小猪 原文来自:看我是如何利用升级系统一键GetShell 漏洞名称:看我是如何利用升级系统一键GetShell 程序下载地址:https://pan.baidu.com/s/1VdoPL ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 第八节、图片分割之GrabCut算法、分水岭算法
			
    所谓图像分割指的是根据灰度.颜色.纹理和形状等特征把图像划分成若干互不交迭的区域,并使这些特征在同一区域内呈现出相似性,而在不同区域间呈现出明显的差异性.我们先对目前主要的图像分割方法做个概述,后面再 ...
    
			
    2. 
						
  2. request鉴权的处理和判断
			
    一般查看蝉道bug管理工具bug列表的时候,会提示 Unauthorized  access,那是因为需要用户名和密码,一般用基本的认证,代码如下: 不是所有的系统都是开放的,有些人是不可以访问的,所 ...
    
			
    3. 
						
  3. 自定义QMenu
			
    参考: http://blog.csdn.net/qq1623803207/article/details/77449884 http://blog.sina.com.cn/s/blog_a6fb6c ...
    
			
    4. 
						
  4. 新建体（3）：dbms_job下新建一个job定期自动执行存储过程
			
    http://blog.csdn.net/thinkscape/article/details/7411012http://java-admin.iteye.com/blog/231159sql窗口执 ...
    
			
    5. 
						
  5. Java的一些基本术语
			
    1. 反射 获取类本身,就叫“反射”,有以下3种方式: // 通过“实例”获取类 String str = "hello"; Class cls1 = str.getClass() ...
    
			
    6. 
						
  6. MySQL入门介绍（mysql-8.0.13）
			
    MySQL入门介绍(mysql-8.0.13单机部署) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL数据库介绍 1>.MySQL是一种开放源代码的关系型数据库 ...
    
			
    7. 
						
  7. linux备份用户权限
			
    1:切换root用户,进入home目录,执行以下命令: [root@localhost home]# ll /home/wangfajun 2: home目录下执行以下命令进行wangfajun用户的 ...
    
			
    8. 
						
  8. Javascript的作用域和闭包（一）
			
    一.作用域是什么? 几乎所有的编程语言最基本的功能之一,就是能够存储变量的值,并且能访问和修改这些值. 修改变量值的过程我们通常在程序执行时,称为改变一个对象的状态.有了状态,让程序变得有非常有趣.  ...
    
			
    9. 
						
  9. svn Edge访问规则配置
			
    权限的配置方法: 首先在用户页面定义用户,然后在版本库页面,手工填写访问规则. 以下面的配置为例(实际配置中应删除“//”及其后的注释): [groups]               //定义用户组 ...
    
			
    10. 
						
  10. sqoop 使用
			
    spark 环境搭建 下载解压 wget https://mirrors.tuna.tsinghua.edu.cn/apache/sqoop/1.4.7/sqoop-1.4.7.bin__hadoop ...
    
			
    11.