<!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,city: ‘宝鸡‘},{name: ‘小李‘,age: 17,city: ‘咸阳‘},{name: ‘小赵‘,age: 11,city: ‘山西‘},{name: ‘小孙‘,age: 2,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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
