承认入门就从vue开始学的前端，
到了原生与jq，我真滴是，感觉寸步难行。
记录两个这次做小dome的心得。
1、jq动态的生成html代码。
不会使用jq模板的情况下直接操作dom原生生成循环的代码片段。
首先后台数据：
`var response = {
"info": "鉴定结束",
"errcode": 200,
"result": [
{
"category": {
"res": "n",
"rate": 0.9760529398918152
},
"name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00001.jpg",
"time": 0
},
{
"category": {
"res": "n",
"rate": 0.6681641340255737
},
"name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00003.jpg",
"time": 2
},
{
"category": {
"res": "s",
"rate": 0.5017970204353333
},
"name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00005.jpg",
"time": 4
},
{
"category": {
"res": "n",
"rate": 0.8622422814369202
},
"name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00007.jpg",
"time": 6
},
{
"category": {
"res": "n",
"rate": 0.9994558691978455
},
"name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00009.jpg",
"time": 8
},
{
"category": {
"res": "n",
"rate": 0.7771035432815552
},
"name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00011.jpg",
"time": 10
},
{
"category": {
"res": "n",
"rate": 0.45609694719314575
},
"name": "/static/parseImgs/2020-03-04/f23eeabf18146704c0845d1d8ae94a14_20200304205623/f23eeabf18146704c0845d1d8ae94a14_00013.jpg",
"time": 12
}
]
};
`【javascript|记录一次使用原生js开发的日常jq生成列表】相对来说这算正常的简单数据了吧，
然后 开始创建基本模板
` var videoResult = [];
videoResult.push('');
resArr.forEach((item,index) => {
var resultImg = 'http://identify.neargh.com:7019'+ item.name;
var rate = item.category.rate.toString().substr(2,2) + '%';
var resDataType = item.category.res;
var resType = '';
switch (resDataType) {
case 'n':
resType = '正常';
break;
case 'p':
resType ='色情';
break;
case 's':
resType ='性感';
break;
case 't':
resType ='暴恐';
break;
case 'news':
resType ='新闻';
break;
default:
resType = '未知类型';
}videoResult.push(
'- ' +
'' + '识别结果：' + rate+ resType + '' +
'' + '出现时间：' + item.time + '秒' + '' +
"
![javascript|记录一次使用原生js开发的日常jq生成列表](https://www.it610.com/""+resultImg)
" +
' '
)
})
videoResult.push('
');
$('#resultText').html(videoResult)`其实对于文本内容还算ok了，但是当遇到img这样的 需要src着实困扰我。
最后得知，使用转义就可以动态的绑定了，
列入上面的
""然后用jq的html方法，追加到dom中。
全部的代码
`
Document 转为结果`
推荐阅读
- 前端|bootstrapvalidator表单验证、验证清除重置
- vue|【实战篇】使用 Vue3 + Ts + Egg 开发一个ProTable(包含接口实现)
- 前端|一道面试题牵出12个前端硬核知识点，你知道几个（（瀏覽器安全.網絡安全））
- javascript|Vue3 + Vite2 项目实战复盘总结（干货！）
- 详解 Cookie，Session，Token
- yarn简介
- 前端|axios在vue中的使用
- 【原创】Auto.js get和post 案例
- (JR)SpringBoot|SpringBoot 第一讲（图片上传MultipartFile）