<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery渲染数据练习</title>
</head>
<body>
<ul class="itemBox" id="itemBox">
<!-- 初始模版 -->
<!-- <li class="item">
<h3>姓名：</h3>
<h4>性别</h4>
<h4>城市：</h4>
<h4>年龄：</h4>
</li> -->
</ul>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
// 这是模拟的数据
var data = [
{name: '小明', age: 12, sex: '男', city: '西安'},
{name: '小王', age: 34, sex: '女', city: '榆林'},
{name: '小张', age: 45, sex: '男', city: '宝鸡'},
{name: '小李', age: 17, sex: '女', city: '咸阳'},
{name: '小赵', age: 11, sex: '女', city: '山西'},
{name: '小孙', age: 2, sex: '男', city: '湖南'},
];
// 这是模拟的处理数据的函数
function success(data) {
// 对数据进行判断，若数据存在
if(data) {
// 遍历数据
data.forEach(function (v) { // 这里可以换为箭头函数，注意兼容性
console.log(v)
// 创建元素的模版并拼接数据
// es5的写法，帮你注释了
// var str = '<li class="item"><h3>姓名：'+ v.name +'</h3><h4>性别：'+ v.sex +'</h4><h4>城市：'+ v.city +'</h4><h4>年龄：' + v.age + '</h4></li>';
// es6的写法
var str = `<li class="item">
<h3>姓名：${v.name}</h3>
<h4>性别：${v.sex}</h4>
<h4>城市：${v.city}</h4>
<h4>年龄：${v.age}</h4>
</li>`;
// 创建元素
var oLi = $(str);
// // 可以在这绑定事件，添加样式等操作，也可以事件委托交给父元素（推荐）
oLi.on('click', () => {
alert('你点击了元素');
});
// 添加到页面
$('#itemBox').append(oLi)
//或者这样一次到位，不用创建中间变量
// $('#itemBox').append(`<h3>${v.name}</h3>`);
});
} else {
alert('数据加载失败');
}
}
// 模拟调用过程
success(data);
</script>
</body>
</html>