json篇

Posted 2021-01-01 冉庆之

Date:2017-07-20 | By Author:Grit

JSON

一种轻量级的数据交互格式，是字符串类型(早期是使用XML：清晰易懂，占用空间大)

JSON是学习Ajax前后端数据交互的基础

JSON和JS对象

DateType	DES
JS对象	js的一种数据类型，是js特有的，无法传递数据。
JSON	一个交互的格式，可以传递数据，实际上传递的是"字符串"。

JSON语法规则

1. JSON数据格式键和值的字符串 必须使用双引号

2. 可以装通用的数据类型，数字、字符串、布尔、数组、对象、null
   (除了undefined、function、NaN……之外)

   JSON在JS里的定义方式

//第一种
var obj = {
    "name":"grit",
    "age":18,
    "gender":man,//早期IE7以前版本并不支持末尾逗号
};
//第二种
var obj = new Object();//先创建对象
obj.name = "grit";//再添加属性
obj.age = 18;
obj.gender = man;

JS对象转JSON字符串

JSON.stringify(js对象) 返回JSON字符串，用于发送到后台。

//例：
var obj = {name:"slice", age: 18};
obj = JSON.stringify(obj);
alert(typeof obj);

JSON字符串转JS对象

主要将后台返回的JSON数据转换成js对象，便于操作

<script src="json2.js"></script>//引用json2.js，兼容IE7以下版本
<script>
var obj = JSON.parse(‘{"name":"grit", "age":18, "marry": true}‘);
alert(obj.name);
</script>

定时器

延时定时器（setTimeout()）：

参一：延时执行的函数function,如果传参数使用字符串，会讲字符串当做js代码来执行；
参二：延时多少毫秒ms（1000ms=1s）。

//例1
setTimeout(function(){
            alert(333);
        },2000);
//例2
setTimeout(‘fn("grit")‘,2000);
        function fn(x){
            alert(x)
        };

循环定时器(setInterval())：

参一：循环执行的函数function,如果传参数使用字符串，会讲字符串当做js代码来执行;
参二：延时多少毫秒ms，循环执行。

var i = 0;
var num = setInterval(function(){//定义循环
            i++;
            if(i>=3){
                clearInterval(num);//清除循环
            }else{
                alert(i);   
            }   
        },2000);

时间和日期

Method	DES
getTime()	十三位时间戳
getFullYear()	获取年份
getMonth()	获取月份 从一份月开始为0
getDate()	获取某一天 多少号
getDay()	星期几 星期天返回0
getHours	获取时
getMinutes	获取分
getSeconds	获取秒

//每隔一秒打印一次，弹出时间累加
setInterval(function(){
        var date = new Date();
        console.log(date.getHours() + "时" +date.getMinutes() + "分" + date.getSeconds()+"秒");
        },1000);

DOM（节点操作）

区分：
DOM:Document Object Model
BOM:Browser Object Model
Attribute|DES
---|---
Node.children|所有子节点，类数组
Node.nextSibling|下一个兄弟节点IE8-
Node.nextElementSibling|下一个兄弟节点Chrome，IE9+
Node.previousSibling|上一个兄弟节点IE8-
Node.previousElementSibling|上一个兄弟节点Chrome，IE9+
Node.parentNode|找父元素
Node.nodeName|打印出大写的标签名字
ParentNode.removeChild(child)|通过父元素移除子元素
ParentNode.appendChild(child)|追加元素在内容末尾
document.createElement("a")|创建元素
parent.insertBefore( xxx, box)|把xxx元素插入到box之前
Node.className|获取元素名字

//添加元素示例
var btn = document.getElementById("btn");//button元素
var imgs = document.createElement("img");//创建img标签
var box2 =document.getElementById("box2");
imgs.src = "http://sc.jb51.net/uploads/allimg/131031/2-13103115593HY.jpg";//给图片元素img添加地址路径
btn.onclick = function(){
            //box3.parentNode.appendChild(imgs);
            box3.parentNode.insertBefore( imgs,box2);//将图片添加到box2前面
        }