目录
0x00 JSON简介
JSON:JavaScript Object Notation,是一种数据交换格式
JSON基于文本，优于轻量（快），用于交换数据
JSON主要用于前后端交互时的传输。几乎所有的编程语言都有解析JSON的库
JSON和XML的比较
- JSON是简易的写法，XML是规范的标签写法
- JSON更快，更适合js
0x01 JSON字符串，JSON对象和数组
JSON语法规定：
JSON字符串必须为双引号包着而不是单引号。
JSON对象内的键也必须为双引号包着而不是单引号
JSON对象内的值可以是json字符串，数字，json对象，json数组，布尔值或者null
JSON数组中的元素只可以是JSON对象或者JSON字符串
JSON对象：
{
"name":"xiaoming",
"age":21,
"address":["香港","九龙"],
"isMarried":true,
"childNum":null,
"girlfrient":{
"name":"xiaohong",
"age":18
}
}JSON数组：
[
{"name":"xiaoming","age":21},
{"name":"xiaohong","age":22}
]JSON字符串
'{"name":"xiaomign","age":12}'这里之所以能用单引号是因为字符串的内容是符合JSON语法规范的一个对象。
演示：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var jsonObj = {"name":'xiaoming',"age":21,"school":'xdu'};
console.log(jsonObj,typeof(jsonObj));
var jsonArr =[
{"name":'xiaoming',"age":21,"school":'xdu'},
{"name":'xiaohong',"age":22,"school":'cdu'},
"json字符串"
];
console.log(jsonArr);
var jsonString='{"name":"xiaomign","age":12}';
console.log(jsonString);
</script>
</body>
</html>0x02 JSON数据序列化和反序列化
序列化 JSON.stringify()
把js对象转化为JSON字符串
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// 序列化，js对象转JSON字符串
var obj ={name:"小明",age:13};
console.log(obj,typeof(obj));
console.log(JSON.stringify(obj),typeof(JSON.stringify(obj)));
</script>
</body>
</html>
反序列化 JSON.parse()
把JSON字符串转js对象
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// 反序列化，JSON字符串转js对象
var JSONString ='{"name":"小明","age":13}';
console.log(JSON.parse(JSONString),typeof(JSON.parse(JSONString)));
</script>
</body>
</html>0x03 JSON的使用
对于JSON对象的操作
增：obj.xxx='xxx'
删:delete obj.xxx
改:obj.xxx='xxx'
查:obj.xxx
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
JSONobj={"name":"xiaoming","age":24};
// 增
JSONobj.height=175;
// 删
delete JSONobj.age;
// 改
JSONobj.name ="tim";
console.log(JSONobj);
// 查
console.log(JSONobj.name);
</script>
</body>
</html>0x04php处理json
firefox的插件:json lite
$res = json_decode(json字符串)
将json字符串解码为json对象，当第二个参数为true时，解码为php数组
$res = json_encode($arr/$obj)
将数组或者对象序列化为json字符串
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<?php
header("Content-type:text/html;charset=utf-8");
// 1.读取json文件，返回值为字符串类型
$json = file_get_contents("1.json");
// 2.将字符串反序列化为json对象
$oJson = json_decode($json);
//也可以将字符串反序列化为php数组
$arrJson = json_decode($json,true);
echo $oJson->name;
print_r($arrJson);
echo $arrJson['name'];
?>
</body>
</html>字符串 http_build_query(数组)：把数组构建成 url中get查询的字符串,例如:?id=1&name="xiaoming"
0x04 数组的常见操作
1.shift()删除数组的第一个元素，返回被删除元素
2.pop()删除数组最后一个元素，返回被删除的元素
3.unshift() 头插法，返回数组长度
4.push() 尾插法，返回数组长度
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var arr=['刘德华','郭富城','黎明','梁朝伟'];
var first= arr.shift();
console.log(first,arr);
end = arr.pop();
console.log(end,arr);
// 头插法
var length = arr.unshift("咖啡");
console.log(length,arr);
// 尾插法
length = arr.push("米酒");
console.log(length,arr);
</script>
</body>
</html>5.concat() 合并两个或多个数组，不会改变原来的数组，返回一个合并完的数组。如果传入的数据类型不是数组，则会当做一个push操作将该数据加入到调用它的数组中。
6.join(separator) 数组转字符串,可传入一个参数用于分隔元素
separator可选，指定要使用的分隔符。如果省略，则使用逗号作为分隔符。
7.split(separator,howmany)字符串转数组，可以传入两个参数
separator必选,指定按什么字符分隔字符串
howmany可选，指定返回数组的最大长度。
8.reverse() 反转数组，返回值为反转后的数组，原数组也发生了变化。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//数组合并
var arr=['刘德华','郭富城','黎明','梁朝伟'];
var arr2=['杨幂','邱淑贞','高圆圆','赵敏'];
console.log(arr.concat(arr2),arr);
//数组转字符串
console.log(arr.join('和'));
console.log(arr.join());
//字符串转数组
var string = '蔡徐坤,打篮球,真垃圾';
console.log(string.split(',',2));
var str='xiaoming';
console.log(str.split('')); //按照空的字符串来分隔
//数组反转
console.log(arr.reverse(),arr);
</script>
</body>
</html>9.sort(sortfun) 数组排序。可以传入一个参数，直接改变原数组。
sortfun可选，规定排序顺序，必须是函数，不传即按照字典序排序
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//数组合并
//从小到大排序
function cmp1(a,b){
return a-b;
}
//从大到小排序
function cmp2(a,b){
return b-a;
}
var arr=[1,2,3,11,4,12]
//字典序
console.log(arr.sort());
console.log(arr.sort(cmp1));
console.log(arr.sort(cmp2));
</script>
</body>
</html>10.slice(strat,end) 对数组进行切片，前闭后开区间
返回值为数组的切片部分。
start必须，规定从什么地方开始，如果是负数，表示倒数。例如：-1表示倒数第一个
end可选，规定到什么地方结束，如果没有指定，则是到结尾。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var arr=[1,2,3,11,4,12];
console.log(arr.slice(0,3));
console.log(arr.slice(-2));
</script>
</body>
</html>11.splice(index,howmany,x,y,z)
可以对数组进行增加，删除，更改的操作，非常灵活。会返回被删除的项目
index必须。整数，规定增删的位置
howmany必须，要删除的元素的数量，如果设置为0，则不会删除项目
x,y,z为可选项，是添加的新的元素。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var arr=[1,2,3,11,4,12];
// 增
arr.splice(0,0,'排球');
console.log(arr);
// 删
arr.splice(0,1);
console.log(arr);
//改
arr.splice(0,1,'L');
// 将数组的第0个元素替换成L
console.log(arr);
</script>
</body>
</html>12.indexOf(item,start) 返回元素的索引，如果没有查找到就返回-1
item必须，查找的元素
start可选，规定从哪里开始查找。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var arr=[1,2,3,11,4,12];
console.log(arr.indexOf(11));
</script>
</body>
</html>13.lastIndexOf(元素值) 返回元素值最后一次出现的索引
14.filter(function) 用于过滤数组成员,满足条件的成员组成一个新的数组返回。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var arr=[1,2,3,4,5];
console.log(arr.filter(function(a){
return a>3;
}))
</script>
</body>
</html>15.some() every()
16.map(function) 将数组的所有成员依次传入参数函数，然后把每一次执行结果组成一个新数组返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var arr=[1,2,3,4,5];
arr.map(function(value,key,arr){
console.log(arr[key]);
})
</script>
</body>
</html>17.forEach(function) 几乎和map一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var arr=[1,2,3,4,5];
arr.forEach(function(value,key,arr){
console.log(arr[key]);
})
</script>
</body>
</html>18.for(key in 数组)循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
var arr=[1,2,3,4,5];
arr['username'] ='xiaoming';
for(var key in arr){
console.log(arr[key]);
}
</script>
</body>
</html> 0x05 定时器
1.间隔性与延时性定时器的区别
间隔性定时器 setInterval(fun,time)
fun为执行的函数
time为间隔执行的时间，单位为毫秒，每过time时间就执行一次fun里面的代码
返回定时器句柄
2.延时性定时器setTimeout(fun,time)
fun为执行的函数
time为延时执行的时间，单位为毫秒，进过time时间后执行fun里面的代码，只执行一次
返回定时器句柄
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// 延时性定时器
setTimeout(function(){
alert("我是延时3秒执行的弹窗");
},3000);
//间隔性定时器
setInterval(function(){
alert("每隔1秒执行一次");
},1000);
</script>
</body>
</html>0x06如何停止定时器
clearInterval(定时器句柄) 清除间隔性定时器
clearTimeout(定时器句柄) 在时间还没到的时候，清除延时性定时器。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// 延时性定时器
var time1 =setTimeout(function(){
console.log("我是延时3秒执行的弹窗");
clearInterval(time2);
},3000);
//间隔性定时器
var time2 =setInterval(function(){
console.log("每隔1秒执行一次");
},1000);
</script>
</body>
</html>0x07 利用延时性定时器制作延时提示框
当我们鼠标移入小div的时候，会有一个弹窗大div显示在隔壁，鼠标离开两个div的时候，弹窗div延时消失。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1{
float:left;
width:50px;
height:50px;
background: black;
margin-right: 30px;
}
#div2{
float:left;
width:200px;
height:200px;
background: green;
display: none;
/*不展示*/
}
</style>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer =null;
oDiv2.οnmοuseοver=oDiv1.onmouseover = function(){
clearTimeout(timer);
oDiv2.style.display='block';
};
oDiv2.οnmοuseοut=oDiv1.onmouseout = function(){
timer=setTimeout(function(){
oDiv2.style.display='none';
},1000);
};
}
</script>
</body>
</html>0x08 利用间隔性定时器制作无缝滚动图片
思路：
轮播图片其实就是用ul li 把一堆图片排列好，即让这些图片左浮动排列成一行，ul的宽度等于所有图片宽度之和。然后在这堆排列好的图片外套一个容器。设置好容器的宽和高。然后设置为overflow:hidden,即这行图片超出容器的部分会被隐藏。
那么怎么让图片滚动呢？其实这就要用到定位布局了。让这行图片相对容器定位。然后每个30ms就让图片和容器之间left值--即可。
如何让图片滚动完之后从头滚动呢？
首先应该将相同的图片再续一遍
然后设置当offsetLeft < -总图片长度/2 时，left=0 即可以完美骗过观众。
为什么需要将相同的图片续一遍？如果不这样做，直接从图片尾修改到图片头会看到大段空白的。
注意：
style.left
style.width 只能用来写，不能用来读。
读需要用
offsetLeft和offsetWidth
https://blog.csdn.net/willard_cui/article/details/81712989
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#banner{
position: relative;
width:600px;
height:150px;
margin:0 auto;
overflow: hidden;
}
#banner ul{
position:absolute;
left:0;
top:0;
width:2000px;
}
#banner ul li{
list-style: none;
float:left;
width:100px;
height:150px;
}
#banner li img{
width:100px;
height:150px;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
<li><img src="img/8.jpg"></li>
<li><img src="img/9.jpg"></li>
<li><img src="img/10.jpg"></li>
</ul>
</div>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv = document.getElementById('banner');
var oUl=document.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var timer = null;
function moving(){
if(oUl.offsetLeft < -oUl.offsetWidth/2 ){
oUl.style.left = '0';
}
oUl.style.left=oUl.offsetLeft - 2 +'px';
};
//多拼接一份ul中的内容
oUl.innerHTML += oUl.innerHTML;
// 计算ul的宽度
var width=0;
for(var i=0;i<oLi.length;i++){
width += oLi[i].offsetWidth;
}
oUl.style.width = width+'px';
//轮播
timer = setInterval(moving,30);
oDiv.οnmοuseοver=function(){
clearInterval(timer);
};
oDiv.onmouseout = function(){
timer = setInterval(moving,30);
};
}
</script>
</body>
</html>