web前端

一、json
1、json：是对象的一个表示方法
作用：是存储数据和文本信息的，是后端给前端交互返回的数据格式，类似于xml（也就是里面的标签使用自定义来写的）
json文件比xml更小、更快、更容易解析。
2、格式
先建立一个json文件、然后写出自定义属性

{
  "name": "毛豆",
  "sex": 23,
  "hobby":[
    {"name":"篮球"},
    {"name":"乒乓球"},
    {"name":"棒球"},
    {"name":"足球"}
  ]
}

也可以直接写出json内容

var info = {
        "name": "毛豆",
        "sex": 23,
        "hobby": [
            {"name": "篮球", "color": "red"},
            {"name": "乒乓球", "color": "blue"},
            {"name": "棒球", "color": "yellow"},
            {"name": "足球", "color": "green"}
        ]
    };

3、json的数据类型是object类型以及array类型
4、取值

console.log(info.name, info.sex);     //输出结果：毛豆 23

若想输出hobby，因为它是一个array类型，则需要遍历这个数组集合

for (var key in info.hobby) {
        /*console.log(info.hobby[key].name);*/
        console.log(info.hobby[key]["name"]);    //输出结果：篮球 乒乓球 棒球 足球
}

5、json的数据转换
object转换为string
JSON.stringify()

var str = JSON.stringify(info);
console.log(str);

string转换为object
JSON.parse()

console.log(JSON.parse(str));

二、枚举：可以看成是一个对象，具有属性和行为，数据类型是object类型。

var meiju={};
    meiju.name="maodou";
    meiju.sex="男";
    meiju.eat=function (){
        return "正在吃饭！"
    }
console.log(meiju);        //输出的是object类型，里面包含的是一个函数
console.log(meiju.eat());  //输出结果：正在吃饭！

枚举里面的this：代表当前的枚举对象或者实例化对象。
例题：
1、图片切换的图片轮播：
（1）图片的切换
先创建一个一div并设置样式，里边含有图片；
要想让图片来回切换，其实就是不断切换它的src路径；
先获取图片，通过计时器让它进行切换图片，即通过计时器里边的方法和时间来确定切换；
要想切换路径，先建立一个数组，里边是不同图片的路径，通过其索引来获取路径；
要使的图片来回切换，则最后一张图片一用的是第一张图片的索引，这时候就需要用if语句来进行条件限制；
（2）当鼠标进入div时，图片停止切换，当鼠标移出div时，图片继续切换
建一个全局变量接受计时器；先获取div，通过鼠标进入事件来停止计时器；
同样通过鼠标离开事件在加入计时器
（3）通过点切换图片
先对div进行相对定位，并设置点元素的属性，并进行绝对定位；
获取所有的点元素，设置其默认背景色为红色，当切换下一张图片时，当前的变红，之前的变白；

var list = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
var img = document.querySelector(".imglist");
var banner = document.querySelector(".banner");
var diandian = document.getElementsByClassName("diandian");
diandian[0].style.background = "red";
var time = null;
var count = 0;
showinter();
function showinter() {
    time = setInterval(function () {
        diandian[count].style.background = "#fff";
        count++;
        if (count >= list.length) {
            count = 0;
        }
        diandian[count].style.background = "red";
        img.src = "./img/" + list[count];
    }, 2000);
}
banner.onmouseenter = function () {
    clearInterval(time);
}
banner.onmouseleave = function () {
    showinter();
}

只有通过大量的练习将语法逻辑和练习结合起来我们才能真正学懂它，并且灵活应用。