什么是json，json是一种数据格式，例如图片切换，有图片，有文字，之前的做法是存在数组里，json更好一点
***
### 语法及遍历
~~~
<script>
var json = {'name1':'张三','name2':'李四'}
for(attr in json){
alert(attr + " " + json[attr]);
}
</script>
~~~
课堂回顾练习：图片切换（使用json存路径和文字描述）
课堂练习-1：省市联动（二维数组，json）
***
### 数组添加元素
~~~
<script>
var arr = [1,2,3];
// arr.push(4);//将4添加到数组的最后面
// alert(arr.push(4));//返回4，4是长度还是元素？
alert(arr.push('abc'));//返回还是4
// push的确是添加元素，但是返回值是长度
// 在数组前面添加
// arr.unshift(0);
// alert(arr);//0,1,2,3
alert(arr.unshift(0));//依旧返回长度，IE6,7不支持返回值
</script>
~~~
### 数组删除元素
~~~
<script>
var arr = ['张三','李四','王五','赵六','田七'];
// arr.pop();//扔掉最后一个元素
// alert(arr.pop());//返回扔掉的元素
// arr.shift();//扔掉第一个元素
alert(arr.shift());//依然返回扔掉的元素
</script>
~~~
### splice方法
~~~
<script>
//splice有删除、替换、添加功能
var arr = ['张三','李四','王五','赵六','田七'];
//删除第0位，删除1个，从第几个干掉几个
// arr.splice(0,1);//'李四','王五','赵六','田七'
// 替换
// arr.splice(0,1,'leo');//'leo','李四','王五','赵六','田七'
// arr.splice(0,2,'leo');//'leo','王五','赵六','田七'
// 添加
// arr.slice(1,0,'周八');//'张三','周八'，'李四','王五','赵六','田七'
// 第二个参数如果是1，会把李四干掉，添加可以多个
// alert(arr.splice(0,2));//返回删除掉的俩
// alert(arr.splice(0,2,'aaa'));//依旧返回删除的俩
</script>
~~~
***
### 数组的去重
~~~
<script>
var arr = [1,2,2,4,2];
for(var i = 0;i <arr.length;i++){
for(var j = i + 1;j < arr.length;j++){
if(arr[i] == arr[j]){
arr.splice(j,1);//会去修改数组长度，循环会减少
j--;
}
}
}
alert(arr);
</script>
~~~
### 随机排序（打乱）
~~~
<script>
var arr = [1,2,3,4,5,6,7,8];
arr.sort(function (a,b) {
return Math.random() - 0.5;
});
alert(arr);
</script>
~~~
***
课堂练习-2：随机切换广告
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{padding:0;margin:0;}
ul,li{list-style: none;}
ul{width: 220px;margin:200px auto;}
li{
width: 100px;
height: 50px;
float:left;
margin-right: 10px;margin-bottom: 5px;
overflow: hidden;
position: relative;
}
div{
width: 100px;
font-size: 0;
position: absolute;
left:0;
top:0;
}
</style>
<script src="js/neusoft.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i = 0;i < aLi.length;i++){
imgTab(aLi[i]);
}
function imgTab(li){
var oDiv = li.getElementsByTagName('div')[0];
oDiv.tab = setInterval(function(){
oDiv.target = parseInt(getStyle(oDiv,'top')) == -50?0:-50;
doMove(oDiv,'top',10,oDiv.target);
},(Math.random()*4+1)*1000);
}
}
</script>
</head>
<body>
<ul>
<li>
<div id="">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/7.jpg" alt="" />
<img src="img/8.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/9.jpg" alt="" />
<img src="img/10.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/11.jpg" alt="" />
<img src="img/12.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/13.jpg" alt="" />
<img src="img/14.jpg" alt="" />
</div>
</li>
<li>
<div id="">
<img src="img/15.jpg" alt="" />
<img src="img/16.jpg" alt="" />
</div>
</li>
</ul>
</body>
</html>
~~~
拓展练习：消除表情小游戏
***
[图片素材下载](https://pan.baidu.com/s/11Luvx0SiX71Zk01lpSUS_g)
