一看就懂——利用getJSON（）与each（）方法动态创建内容
<!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>
{
"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（）方法动态创建内容的更多相关文章
- c# 利用反射 从json字符串 动态创建类的实例 并动态为实例成员赋值
转自 http://hi.baidu.com/wjinbd/item/c54d43d998beb33be3108fdd 1 创建自己要用的类 class stu { string _name; int ...
- 利用MAP动态创建C++类对象
MFC的CRuntimeClass利用链表实现了C++类的动态创建.但是如果项目中对动态创建的要求比较低,我们完全可以利用map实现简单的动态创建. http://blog.csdn.net/yeji ...
- 【算法】变邻域搜索算法(Variable Neighborhood Search,VNS)超详细一看就懂的解析
更多精彩尽在微信公众号[程序猿声] 变邻域搜索算法(Variable Neighborhood Search,VNS)一看就懂的解析 00 目录 局部搜索再次科普 变邻域搜索 造轮子写代码 01 局部 ...
- 一看就懂的 安装完ubuntu 18.04后要做的事情和使用教程
一看就懂的 安装完ubuntu 18.04后要做的事情和使用教程原创CrownP 最后发布于2019-02-05 00:48:30 阅读数 2982 收藏展开1.更改为阿里云的源点击软件和更新 点击其 ...
- 一看就懂的Android APP开发入门教程
一看就懂的Android APP开发入门教程 作者: 字体:[增加 减小] 类型:转载 这篇文章主要介绍了Android APP开发入门教程,从SDK下载.开发环境搭建.代码编写.APP打包等步骤 ...
- mysql取出现在的时间戳和时间时间戳转成人类看得懂的时间
mysql取出现在的时间戳和时间时间戳转成人类看得懂的时间,我们在mysql里面他封装了一个内置的时间戳转化的函数,比如我们现在的时间戳是:1458536709 ,"%Y-%m-%d&quo ...
- 一看就懂的ReactJs入门教程（精华版）
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...
- JavaScript一看就懂(2)闭包
认识闭包之前需要先了解作用域,如果你对作用域还没有足够了解,请移步JavaScript一看就懂(1)作用域 什么是闭包? 我们可以先简单认为:一个函数a定义在另一个函数b里面,这个函数a就是闭包: f ...
- 看我是如何利用升级系统一键GetShell
i春秋作家:小猪 原文来自:看我是如何利用升级系统一键GetShell 漏洞名称:看我是如何利用升级系统一键GetShell 程序下载地址:https://pan.baidu.com/s/1VdoPL ...
随机推荐
- 一个时间上的比较 if else
if (w<b.w) ; if (w>b.w) ; if (w<b.w) ; else if (w>b.w) ; 对于任何情况,执行的次数都是一样.只是对于汇编的代码,第二个方 ...
- R语言实现两文件对应行列字符替换(解决正负链统一的问题)
假设存在文件file1.xlsx,其内容如下: 存在文件file2.xlsx,其内容如下: 现在我想从第七列开始,将file2所有的字符替换成file1一样的,即第七.八.九.十列不需要改变,因为fi ...
- Day11--Python--函数名,闭包,迭代器
通过 lst.__iter__()拿到lst.的迭代器 1.函数名第一类对象 函数名就是变量名 1.函数名可以像变量一样互相赋值. 2.可以作为函数的参数,进行传递 3.可以作为返回值返回 4.可以作 ...
- C++基础知识--DAY1
1. C语言是面向过程的语言,C++是面向对象的语言,相对于C语言来说,C++语法规则更为严格,其存在类型增强的问题. 类型增强,顾名思义就是C++相对于C语言来说有更加严格的类型检查,很多C语言的语 ...
- （线性回归）Liner Regression简单应用
警告:本文为小白入门学习笔记 数据连接: http://openclassroom.stanford.edu/MainFolder/DocumentPage.php?course=DeepLearni ...
- (BFS) leetcode 690. Employee Importance
690. Employee Importance Easy 377369FavoriteShare You are given a data structure of employee informa ...
- mac crontab调用python时出现ImportError: No module named XXX的问题
写了一个监控mq的脚本,把这个脚本加入crontab里进行时刻监控,于是#crontab -e,添加语句: * * * * * cd /目录 && python mq脚本名.py &g ...
- break #立即终止本次循环
#!/user/bin/python# -*- coding:utf-8 -*-# print(111)# while True:# print(222)# print(333)# break #立即 ...
- 解决pycharm问题：module 'pip' has no attribute 'main'
问题 更新pip之后,Pycharm安装package出现如下报错: 解决 找到安装目录下 helpers/packaging_tool.py文件,找到如下代码: 修改为如下,保存即可.
- Linux学习笔记：【000】Linux系统入门
什么是Linux? Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX(可移植操作系统接口 Portable Operating System Interface of UN ...