js填坑

菜鸡王山而
90 阅读4分钟

​

循环遍历创建DOM只能插入一个

问题：在动态创建列表时，通过页面加载函数获取到后台数据后，循环遍历创建dom节点时，只能插入最后一个的数值的节点
​编辑
然而获取的数据结构为：
​编辑

对应下可以看出执行遍历后，只是传递了最后一个值，之前的值都被覆盖了，问题代码如下：

	window.onload =  function getdata(){
		$.ajax({
		 url:'index',
		 async:false,
		 dataType:'json',
		 success:function(e){
		 var data = e;
		 console.log("已经获取数据");
		 var father = document.getElementById('.showbox');
		 var div = document.createElement('div');//问题就出在这里
		 for (let key in data) {
		   for(let i=0,res=data[key];i<=res.length-1;i++){ 
			 console.log(res[i]);
			 var html='';
			html+='<label style="background-color:#40c0c31c;margin-top: 5px;">';
			html+='<a href="emergencyreportingdetail.html" class="mui-navigate-right" style="color: #333;">';
		    html+='<p>应急事件编号：'+res[i].id+'</p>';
		    html+='<p>应急事件名称：'+res[i].name+'</p>';
			html+='<p>发布单位名称：'+res[i].danwei+'</p>';
			html+='<p>提报日期：'+res[i].data+'</p>';
			html+='</a>';
            html+='</label>';
		    html+='<input name="radio1" type="radio" style="margin-top:25px"/>';	
			div.innerHTML = html;
			// console.log(html);
			showbox.appendChild(div);
				 }
			 }
		 }
	 })
},

因为动态创建的dom节点都会被appendChild()方法添加到，一个div父盒子中，但是父盒子却并没有放在遍历循环中，所以始终只有一个父盒子，所传递参数就会覆盖之前的参数，就造成了只会插入最后一个的情况。

解决办法
将父元素也放入循环遍历中，代码如下：

	window.onload =  function getdata(){
		$.ajax({
		 url:'index',
		 async:false,
		 dataType:'json',
		 success:function(e){
		 var data = e;
		 console.log("已经获取数据");
		 var father = document.getElementById('.showbox');
		 var div = document.createElement('div');//问题就出在这里
		 for (let key in data) {
		   for(let i=0,res=data[key];i<=res.length-1;i++){ 
			 console.log(res[i]);
			 var html='';
			html+='<label style="background-color:#40c0c31c;margin-top: 5px;">';
			html+='<a href="emergencyreportingdetail.html" class="mui-navigate-right" style="color: #333;">';
		    html+='<p>应急事件编号：'+res[i].id+'</p>';
		    html+='<p>应急事件名称：'+res[i].name+'</p>';
			html+='<p>发布单位名称：'+res[i].danwei+'</p>';
			html+='<p>提报日期：'+res[i].data+'</p>';
			html+='</a>';
            html+='</label>';
		    html+='<input name="radio1" type="radio" style="margin-top:25px"/>';	
			div.innerHTML = html;
			// console.log(html);
			showbox.appendChild(div);
				 }
			 }
		 }
	 })
},

效果如下：
​

本地存储和会话存储

localStorage：
是一种你不主动清除它，它会一直将存储数据存储在客户端的存储方式，即使你关闭了客户端（浏览器)，属于本地持久层储存

sessionStorage：
用于本地存储一个会话（session）中的数据，一旦会话关闭，那么数据会消失，比如刷新。

localStorage与sessionStorage具有相同的API，以下方法都可以用于sessionStorage

localStorage存储方法

localStorage.name ='vanida；
localStorage["name"]='vanida'；
localStorage.setItem("name","vanida");

localStorage获取值方法

var name = localStorage["name"]
var name= localStorage.name
var name＝ localStorage.getItem("name");

localStorage清除特定值方法

//清除name的值

localStorage.removeItem("name");
localStorage.name＝'';

localStorage清除所有值方法

 localStorage.clear()

localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()；

var person = {name:"vanida","sex":"girl","age":25};
localStorage.setItem("person",JSON.stringify(person));
// localStorage.person="{"name":"vanida","sex":"girl","age":25}"

注意：JSON.stringify()中不要忘了“i”,stringify而不是stringfy！

然后取出person的对象你可以用JSON.parse();

person = JSON.parse(localStorage.getItem("person"));
// {name: "vanida", sex: "girl", age: 25}

输出语句 document.write

这个可以直接把内容输出在页面上(可以解析标签)，除数字类型外需要用单引号包裹

document.write(111)
document.write('abc')
document.write('<h1>')
document.write(111)
document.write('</h1>')
var i=0
document.write(i)

输出结果：

变量命名规则

两种数据类型检测的区别

各种数据类型的转换

1.数字类型的转换

1、数字类型的转换

语法：Number（你要转换的数据）

返回值：转换好的数据

特点：将转换数据当作一个整体；能转成数字就转数字类型，不能转为数字类型就会返回NaN

2、整型转换

语法：parseInt()

返回值：转换好的数据

特点：将转换数据拆分成一个个的字符，挨个转换直到一个不能转为合法字符串的位置为止，且不认识小数点

3、浮点转换

语法：parseFloat()

返回值：转换好的数据

特点：整型转换特点一样，只不过多认识了一个小数点

4、正负值的添加

语法：+变量 、-变量

返回值：转换好的数据

特点：和Number的解析规则一样

5、非加法的数学运算

语法：parseFloat()

返回值：转换好的数据

特点：整型转换特点一样，只不过多认识了一个小数点

Numer('100') //100
Numer('abc') //NaN
Numer('100.123') //100.123

parseInt('100') //100
parseInt('100abc') //100
parseInt('100.123') //100

parseFloat('100.123')//100.123

var b1 =true
parseInt(b1) //NaN

var b2 ='100'
var b3 = +b2
var b4 = -b2
console.log(b3,b4) // 100 100

var b2 ='100'
var b3 = b2 - 0
var b4 = b2 * 1
var b5 = b2 / 1
console.log(b3,b4,b5) // 100 100 100

2.字符串的转换

1、string（）

语法：string（你要转换的数据）

返回值：转换好的数据

特点：任何数据类型都能转

2、tostring（）

语法：要转换的数据.tostring（）

返回值：转换好的数据

特点：undefined null不能转换

3、+运算符

js里的加法运算符有两种情况

1.进行字符串的拼接

+符号任意一边是字符串的时候就是字符串拼接

2.进行数学运算

+符号两边都是布尔值或者数字类型时，才是数学运算

​

avatar
文章
阅读
粉丝