json篇

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

JSON

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

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

JSON和JS对象

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）。

//例1setTimeout(function(){ ???????????alert(333); ???????},2000);//例2setTimeout(‘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);

时间和日期

//每隔一秒打印一次，弹出时间累加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前面 ???????}

json篇

原文地址：https://www.cnblogs.com/zhuzq/p/9534607.html