文章目录

• JavaScript简介
• • js的编写位置
  • 基本的语法
  • 输出语句
  • 字面量和变量
  • • 字面量
    • 变量
    • 标识符
• 数据类型
• • 基本类型
  • 引用类型
  • 类型转换
  • • 转换为String
    • 转换为Number
    • 转换为布尔值
• 基础语法
• • 运算符
  • • typeof运算符
    • 算数运算符
    • 一元运算符
    • 逻辑运算符
    • 赋值运算符
    • 关系运算符
    • 相等运算符
    • 三元运算符
  • 流程控制语句
  • • 条件分支语句
    • swich语句
  • 循环语句
  • • for循环
    • for/In 循环
    • while 循环
    • do/while 循环
• 对象（Object）
• • 对象的分类：
  • 遍历
• 函数（Function）
• • 函数的概念
  • 函数的属性和方法
  • 作用域
  • 构造函数
  • 原型（prototype）
  • toString方法
  • 垃圾回收（GC）
• 数组（Array）
• • 什么是数组?
  • 数组的操作：
  • 数组的方法
  • • slice(sart,[end])
    • splice()
    • join([splitor])
  • 遍历数组
• Date
• • 方法：
• Math
• 字符串的相关的属性和方法
• 正则表达式
• • 语法：
  • 正则表达相关方法
• DOM
• • DOM操作
  • 事件（Event）
  • DOM查询
  • document对象的其他的属性和方法
  • DOM修改
  • DOM对CSS的操作
  • • 读取和修改内联样式
    • 读取元素的当前样式
    • 其他的样式相关的属性
• 事件（Event）
• • 事件对象
  • 事件的冒泡（Bubble）
  • 事件的委派
  • 事件的绑定
  • 事件的传播
  • 常用事件
  • • 鼠标事件
    • 键盘事件
• BOM
• • Navigator
  • History
  • Location
  • window
  • • 定时器
    • 延时调用
• 类的操作
• JSON
• • JSON 格式

JavaScript简介

• JavaScript负责页面中的的行为。
• 它是一门运行在浏览器端的脚本语言。
• 它是一个轻量级，但功能强大的编程语言

js的编写位置

1. 编写到标签的指定属性中

<button onclick="alert('hello');">按钮</button>  
<a href="javascript:alert('hello');">超链接</a>

2. 编写到script标签中

<script type="text/javascript">  
//编写js代码  
</script>  

3. 编写到外部的js文件中，通过标签将其引入
   注意：script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略 ,如需要则可以在创建一个新的script标签用于编写内部代码

<script type="text/javascript" src="js文件路径"></script>  

基本的语法

注释：

• 单行注释

//这里的内容不会被执行

• 多行注释

/*  
这里的内容同样不会被执行
*/  

JS严格区分大小写
JS中会自动忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

输出语句

alert("要输出的内容");  

该语句会在浏览器窗口中弹出一个警告框

document.write("要输出的内容");  

该语句会将内容写到body标签中，并在页面中显示

console.log("要输出的内容");  

该语句会将内容打印到控制台

字面量和变量

字面量

字面量实际上就是一些固定的值，比如 1 2 3.5 true false null NaN “hello” 等等…
字面量都是不可以改变的
由于字面量不是很方便使用，所以在JS中很少直接使用字面量

变量

变量是用于存储信息的"容器"（即可以用来保存字面量，使用起来比较方便）

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

var 关键词来声明变量

var a

变量赋值

a=1

声明和赋值同时进行

var a=5

标识符

在JS中所有的可以自主命名的内容，都可以认为是一个标识符,
比如：变量名、函数名、属性名等…

• 标识符中可以含有字母、数字、_、$
• 标识符不能以数字开头
• 标识符不能是JS中的关键字和保留字
• 标识符一般采用驼峰命名法：xxxYyyZzz

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

基本类型

字符串

字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号：

var carname="Volvo XC60";
var carname='Volvo XC60';

Number 数值

JS中所有的整数和浮点数都是Number类型
特殊的数字：

• Infinity 正无穷
• Infinity 负无穷
• NaN 非法数字（Not A Number）

Boolean 布尔值

布尔值主要用来进行逻辑判断，只要两个值

• true 逻辑的真
• false 逻辑的假

Null 空值

空值专门用来表示为空的对象，Null类型的值只有一个
null

• 用来初始化一个对象
• 垃圾回收

Undefined 未定义

该类型只有一个undefined值

引用类型

Object 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566}
//另一种写法，也是经常使用
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
}

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

类型转换

类型转换就是指将其他的数据类型，转换为String Number 或 Boolean

转换为String

1.调用被转换数据的toString()方法

var a = 12 
a = a.toString()

注：这个方法不适用于null和undefined

2.调用String()函数

var a = 12 
a = String(a)  

原理：对于Number Boolean String都会调用他们的toString()方法来将其转换为字符串，对于null值，直接转换为字符串"null"。对于undefined直接转换为字符串"undefined"

3.为任意的数据类型+""

var a = true
a = a + "" 

转换为Number

1.调用Number()函数

var a = "123"
a = Number(a)

转换的情况：

• 字符串 > 数字
  如果字符串是一个合法的数字，则直接转换为对应的数字
  如果字符串是一个非法的数字，则转换为NaN
  如果是一个空串或纯空格的字符串，则转换为0
• 布尔值 > 数字
  true转换为1
  false转换为0
• 空值 > 数字
  null转换为0
• 未定义 > 数字
  undefined 转换为NaN

2.调用parseInt()或parseFloat()
这两个函数专门用来将一个字符串转换为数字的
parseInt() 可以将一个字符串中的有效的整数位提取出来，并转换为Number

var a = "123.456px"  
a = parseInt(a) //123  

如果需要可以在parseInt()中指定一个第二个参数，来指定进制。
parseFloat()可以将一个字符串中的有效的小数位提取出来，并转换为Number

var a = "123.456px"  
a = parseFloat(a) //123.456  

3.使用一元的“+”来进行转换

var a = "123"  
a = +a  

原理：和Number()函数一样

转换为布尔值

1.使用Boolean()函数

var s = "holle"  
s = Boolean(s) //true 

转换的情况 ：

• 字符串 > 布尔
  除了空串其余全是true

• 数值 > 布尔
  除了0和NaN其余的全是true

• null、undefined > 布尔
  都是false

• 对象 > 布尔
  都是true

2.为任意的数据类型做两次非运算，即可将其转换为布尔值

var a = "hello"  
a = !!a //true  

基础语法

运算符

• 运算符也称为操作符
• 通过运算符可以对一个或多个值进行运算或操作

typeof运算符

用来检查一个变量的数据类型
语法：typeof 变量

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

算数运算符

• + 对两个值进行加法运算并返回结果
• - 对两个值进行减法运算并返回结果
• * 对两个值进行乘法运算并返回结果
• / 对两个值进行除法运算并返回结果
• % 对两个值进行取余运算并返回结果

除了加法以外，对非Number类型的值进行运算时，都会先转换为Number然后在做运算。
任何值和字符串做加法，都会先转换为字符串，然后再拼串

一元运算符

一元运算符只需要一个操作数

1.一元的+
相当于正号，不会对Number数值产生任何影响，但是可以将一个非数字转换为数字

var a = true
a = +a

2.一元的-
相当于负号，可以对一个数字进行符号位取反

var a = 5
a = -a

3.自增
自增可以使变量在原值的基础上自增1
无论是a++还是++a都会使a自增1，但是a++的值和++a的值不同

• ++a的值是变量的新值（即自增后的值）
• a++的值是变量的原值（即自增前的值）

4.自减
自减可以使变量在原值的基础上自减1
无论是a–还是–a都会使a自减1，但是a–的值和–a的值不同

• –a的值是变量的新值（即自减后的值）
• a–的值是变量的原值（即自减前的值）

逻辑运算符

1. ！
非运算可以对一个布尔值进行取反，可以对非布尔值取两次反转化为布尔值

2. &&
&&可以对符号两侧的值进行与运算
只有两端的值都为true时，才会返回true。只要有一个false就会返回false。

• 如果第一个值为true，则返回第二个值

3. | |
| |可以对符号两侧的值进行或运算
只有两端都是false时，才会返回false。只要有一个true，就会返回true。

赋值运算符

1. =
可以将符号右侧的值赋值给左侧变量

var a=5

2. +=

a += 5 相当于 a = a+5

3. -=

a -= 5  相当于 a = a-5  

4. *=

a *= 5 相当于 a = a*5 

5. /=

a /= 5 相当于 a = a/5	

6. %=

a %= 5 相当于 a = a%5 

关系运算符

关系运算符用来比较两个值之间的大小关系的

• >     大于，判断两个值谁大
• >=    大于等于，判断两个值谁大或者相等
• <    小于，判断两个值谁小
• <=   小于等于，判断两个值谁次奥或者相等

相等运算符

1. ==
判断左右两个值是否相等，如果相等返回true，如果不等返回false 。
如果对不同的类型进行比较，会将其转换为相同的类型然后再比较。

2. !=
判断左右两个值是否不等，如果不等则返回true，如果相等则返回false。也会自动做类型转换。

3. ===
判断左右两个值是否全等，如果全等则返回true，如果不全等等则返回false。
如果对不同的类型进行比较，不会做类型转换，因为全等的判断值和类型都要一致。

4. !==
判断左右两个值是否不全等，如果不全等则返回true，如果全等则返回false。和全等一样不会做类型转换。

三元运算符

1. ?:
语法：条件表达式?语句1:语句2;

流程控制语句

程序都是自上向下的顺序执行的，
通过流程控制语句可以改变程序执行的顺序，或者反复的执行某一段的程序。

条件分支语句

1. if语句
条件语句用于基于不同的条件来执行不同的动作。

语法1：

if(条件表达式){  
	语句...  
}  

语法2：

if(条件表达式){  
	语句...  
}else{  
	语句...  
} 

语法3：

if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else if(条件表达式){  
	语句...  
}else{  
	语句...  
}	

swich语句

switch 语句用于基于不同的条件来执行不同的动作。

语法：

switch(条件表达式){  
	case 表达式:  
		语句...  
		break  
	case 表达式:  
		语句...  
		break  
	case 表达式:  
		语句...  
		break  
	default:  
		语句...  
		break 
}  

循环语句

循环语句可以将代码块执行指定的次数。

for循环

语法：

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

for/In 循环

for/in 语句循环遍历对象的属性

var person={fname:"Bill",lname:"Gates",age:56}
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x]
}

while 循环

语法：

while (条件)
{
    需要执行的代码
}

do/while 循环

语法：

do
{
    需要执行的代码
}
while (条件);

对象（Object）

对象是一种引用数据类型，在对象中可以保存多个不同数据类型的属性

对象的分类：

1. 内建对象

• 由ES标准中定义的对象，在任何的ES的实现中都可以使用

• 比如：Math String Number Boolean Function Object…

2. 宿主对象

• 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
• 比如 BOM DOM

3. 自定义对象

• 由开发人员自己创建的对象

如何创建对象？
方式1：

 var obj = new Object() 

方式2：

var obj = {}

向对象中添加属性
语法：

对象.属性名 = 属性值;  
对象["属性名"] = 属性值;	 

属性值也可以任意的数据类型。

读取对象中的属性
语法：

对象.属性名  
对象["属性名"]   

如果读取一个对象中没有的属性，它不会报错，而是返回一个undefined

删除对象中的属性
语法：

delete 对象.属性名  
delete 对象["属性名"]  

遍历

使用in检查对象中是否含有指定属性
语法：

"属性名" in 对象  

如果在对象中含有该属性，则返回true
如果没有则返回false

var obj = {'0':'bob','1':'tom','2':'lisa'};  
  
for(var i in obj) {  
     console.log(i,"-",obj[i]);  
}  

​
使用对象字面量，在创建对象时直接向对象中添加属性
语法：

var obj = {  
    属性名:属性值,  
    属性名:属性值,  
    属性名:属性值,  
    属性名:属性值  
} 

基本数据类型的数据，变量是直接保存的它的值。
变量与变量之间是互相独立的，修改一个变量不会影响其他的变量。
引用数据类型的数据，变量是保存的对象的引用（内存地址）。
如果多个变量指向的是同一个对象，此时修改一个变量的属性，会影响其他的变量。
比较两个变量时，对于基本数据类型，比较的就是值， 对于引用数据类型比较的是地址，地址相同才相同

函数（Function）

函数的概念

• 函数也是一个对象，也具有普通对象的功能
• 函数中可以封装一些代码，在需要的时候可以去调用函数来执行这些代码
• 使用typeof检查一个函数时会返回function

如何创建函数？
方式1：函数声明

function 函数名([形参1,形参2...形参n]){  
语句...  
}  

方式2：函数表达式

var 函数名 = function([形参1,形参2...形参N]){  
语句...  
} 

调用函数
语法：

函数对象([实参1,实参2...实参N])

立即执行函数
函数定义完，立即被调用，这种函数叫做立即执行函数
立即执行函数往往只会执行一次

(function(a,b){  
    console.log("a = "+a)  
    console.log("b = "+b)  
})(12,34) 

形参和实参

1. 形参：形式参数

• 定义函数时，可以在()中定义一个或多个形参，形参之间使用,隔开
• 定义形参就相当于在函数内声明了对应的变量但是并不赋值
• 形参会在调用时才赋值。

2. 实参：实际参数

• 调用函数时，可以在()传递实参，传递的实参会赋值给对应的形参,

• 调用函数时JS解析器不会检查实参的类型和个数，可以传递任意数据类型的值。

    如果实参的数量大于形参，多余实参将不会赋值
    如果实参的数量小于形参，则没有对应实参的形参将会赋值undefined
  

返回值，就是函数执行的结果。
使用return 来设置函数的返回值。
可以通过一个变量来接收返回值
一旦执行到return语句时，函数将会立刻退出。
如果return后不跟值，或者是不写return则函数默认返回undefined。

方法（method）
可以将一个函数设置为一个对象的属性，
当一个对象的属性是一个函数时， 我们称这个函数是该对象的方法。

 对象.方法名()
 函数名()  

函数的属性和方法

call()
apply()
这两个方法都是函数对象的方法需要通过函数对象来调用
通过两个方法可以直接调用函数，并且可以通过第一个实参来指定函数中this
不同的是call是直接传递函数的实参而apply需要将实参封装到一个数组中传递

arguments

arguments是一个类数组元素，它用来封装函数执行过程中的实参  
所以即使不定义形参，也可以通过arguments来使用实参  

this（调用函数的那个对象）
this是函数的上下文对象，根据函数的调用方式不同会指向不同的对象

作用域

作用域简单来说就是一个变量的作用范围。

1.全局作用域

• 直接在script标签中编写的代码都运行在全局作用域中
• 全局作用域在打开页面时创建，在页面关闭时销毁。
• 全局作用域中有一个全局对象window，window对象由浏览器提供，
• 可以在页面中直接使用，它代表的是整个的浏览器的窗口。
• 在全局作用域中创建的变量都会作为window对象的属性保存
• 在全局作用域中创建的函数都会作为window对象的方法保存
• 在全局作用域中创建的变量和函数可以在页面的任意位置访问。
• 在函数作用域中也可以访问到全局作用域的变量。
• 尽量不要在全局中创建变量，减少一定内存使用

2.函数作用域

• 函数作用域是函数执行时创建的作用域，每次调用函数都会创建一个新的函数作用域。
• 函数作用域在函数执行时创建，在函数执行结束时销毁。
• 在函数作用域中创建的变量，不能在全局中访问。
• 当在函数作用域中使用一个变量时，它会先在自身作用域中寻找， 如果找到了则直接使用，如果没有找到则到上一级作用域中寻找， 如果找到了则使用，找不到则继续向上找，直到找到全局作用域，如果全局作用域中也没有，则返回undefined。

变量的声明提前

• 在全局作用域中，使用var关键字声明的变量会在所有的代码执行之前被声明，但是不会赋值。 所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
• 在函数作用域中，使用var关键字声明的变量会在函数所有的代码执行前被声明， 如果没有使用var关键字声明变量，则变量会变成全局变量 。

函数的声明提前

• 在全局作用域中，使用函数声明创建的函数,会在所有的代码执行之前被创建，也就是我们可以在函数声明前去调用函数，但是使用函数表达式创建的函数不行。
• 在函数作用域中，使用函数声明创建的函数，会在所有的函数中的代码执行之前就被创建好了。

构造函数

例子：

function Person(name , age , gender){  
    this.name = name  
    this.age = age 
    this.gender = gender  
    this.sayName = function(){  
        alert(this.name)  
    }  
}  

instanceof 可以用来检查一个对象是否是一个类的实例
语法：

对象 instanceof 构造函数  

如果该对象时构造函数的实例，则返回true，否则返回false
Object是所有对象的祖先，所以任何对象和Object做instanceof都会返回true

原型（prototype）

创建一个函数以后，解析器都会默认在函数中添加一个prototype
prototype属性指向的是一个对象，这个对象我们称为原型对象。
当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象。

这个隐含的属性可以通过对象.__proto__来访问。  

我们可以将对象中共有的属性和方法统一添加到原型对象中， 这样我们只需要添加一次，就可以使所有的对象都可以使用。
当我们去访问对象的一个属性或调用对象的一个方法时，它会先自身中寻找， 如果在自身中找到了，则直接使用。 如果没有找到，则去原型对象中寻找，如果找到了则使用， **如果没有找到，则去原型的原型中寻找，**依此类推。直到找到Object的原型为止，Object的原型的原型为null，
如果依然没有找到则返回undefined

hasOwnProperty()

 这个方法可以用来检查对象自身中是否含有某个属性  
 语法：对象.hasOwnProperty("属性名")  

toString方法

当我们直接在页面中打印一个对象时，事件上是输出的对象的toString()方法的返回值
如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法

//修改Person原型的toString  
Person.prototype.toString = function(){  
	return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";  
} 

垃圾回收（GC）

就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾  ,这些垃圾积攒过多以后，会导致程序运行的速度过慢，  所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾。

当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象， 这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢， 所以这种垃圾必须进行清理。
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作 。我们需要做的只是要将不再使用的对象设置null即可

数组（Array）

什么是数组?

数组对象是使用单独的变量名来存储一系列的值。
如果你有一组数据（例如：车名字），存在单独变量如下所示：

var car1="Saab";
var car2="Volvo";
var car3="BMW";

然而，如果你想从中找出某一辆车？并且不是3辆，而是300辆呢？这将不是一件容易的事！
最好的方法就是用数组。
数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

数组的操作：

创建数组

var arr = new Array() 
var arr = []

向数组中添加元素

arr[0] = 123  
arr[1] = "hello"  

创建数组时直接添加元素

 var arr = [元素1,元素2....元素N]

 var arr = [123,"hello",true,null]  

访问数组

var name=myCars[0]
myCars[0]="Opel"

获取和修改数组的长度

 获取长度：  
	数组.length  
	 length获取到的是数组的最大索引+1  
	 对于连续的数组，length获取到的就是数组中元素的个数  
 修改数组的长度  
	数组.length = 新长度  
		 如果修改后的length大于原长度，则多出的部分会空出来  
		 如果修改后的length小于原长度，则原数组中多出的元素会被删除  
 向数组的最后添加元素  
	数组[数组.length] = 值;  

数组的方法

slice(sart,[end])

 可以从一个数组中截取指定的元素  
 该方法不会影响原数组，而是将截取到的内容封装为一个新的数组并返回  
 参数：  
	1.截取开始位置的索引（包括开始位置）  
	2.截取结束位置的索引（不包括结束位置）  
第二个参数可以省略不写，如果不写则一直截取到最后  
参数可以传递一个负值，如果是负值，则从后往前数  

splice()

 可以用来删除数组中指定元素，并使用新的元素替换  
 该方法会将删除的元素封装到新数组中返回  
 参数：  
	1.删除开始位置的索引  
	2.删除的个数  
	3.三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边  

join([splitor])

可以将一个数组转换为一个字符串  
参数：  
需要一个字符串作为参数，这个字符串将会作为连接符来连接数组中的元素  
如果不指定连接符则默认使用,  

遍历数组

遍历数组就是将数组中元素都获取到
一般情况我们都是使用for循环来遍历数组

for(var i=0 ; i<arr.length ; i++){  
    //arr[i]  
}  

使用forEach()方法来遍历数组（不兼容IE8）

数组.forEach(function(value , index , obj){  
  
}) 

forEach()方法需要一个回调函数作为参数， 数组中有几个元素，回调函数就会被调用几次， 每次调用时，都会将遍历到的信息以实参的形式传递进来。
我们可以定义形参来获取这些信息。
value:正在遍历的元素
index:正在遍历元素的索引
obj:被遍历对象

Date

日期的对象，在JS中通过Date对象来表示一个时间

创建一个当前的时间对象

var d = new Date() 

创建一个指定的时间对象

var d = new Date("月/日/年 时:分:秒")  

方法：

Math

Math属于一个工具类，它不需要我们创建对象，它里边封装了属性运算相关的常量和方法
我们可以直接使用它来进行数学运算相关的操作
方法：

字符串的相关的属性和方法

slice(start,[end])
可以从一个字符串中截取指定的内容，并将截取到内容返回，不会影响原变量
参数：
第一个：截取开始的位置（包括开始）
第二个：截取结束的位置**（不包括结束）**
可以省略第二个参数，如果省略则一直截取到最后
可以传负数，如果是负数则从后往前数

substr()
和slice()基本一致，不同的是它第二个参数不是索引，而是截取的数量

substring()
和slice()基本一致，不同的是它不能接受负值作为参数，如果设置一个负值，则会自动修正为0，
substring()中如果第二个参数小于第一个，自动调整位置*

正则表达式

正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，
也可以将一个字符串中符合规则的内容提取出来。

创建正则表达式

 var reg = new RegExp("正则","匹配模式")

语法：

匹配模式：

• i:忽略大小写（ignore）
• g:全局匹配模式（默认为1次）

正则语法:

元符号:

量词
通过量词可以设置一个内容出现的次数 （只对前面的内容起作用）

边界表达式
^:正则开始
$:正则结束 ：

reg = /^a/;  
reg = /b$/;  

正则表达相关方法

test()
可以用来检查一个字符串是否符合正则表达式
如果符合返回true，否则返回false

去掉两端的空格:

var s = "        	f    afa    ";   
s = s.replace(/^\s*|\s*$/g,"");  

split()
可以根据指定内容将一个字符串拆分为一个数组
参数：
需要一个字符串作为参数，将会根据字符串去拆分数组
可以接收一个正则表达式，此时会根据正则表达式去拆分数组

match()
可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果

replace()
可以将字符串中指定内容替换为新的内容 （默认替换第一个）
参数：
1.被替换的内容，可以接受一个正则表达式作为参数
2.新的内容 ，空串则为删除""

search()
可以搜索字符串中是否含有指定内容
如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回1
它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
serach()只会查找第一个，即使设置全局匹配也没用

DOM

文档对象模型（Document Object Model ），通过DOM可以来任意来修改网页中各个内容

• 文档指的是网页，一个网页就是一个文档
• 对象指将网页中的每一个节点都转换为对象 ，转换完对象以后，就可以以一种纯面向对象的形式来操作网页
• 模型用来表示节点和节点之间的关系，方便操作页面

节点（Node）
节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
虽然都是节点，但是节点的类型却是不同的

DOM操作

DOM查询
在网页中浏览器已经为我们提供了document对象，它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。

读取元素的属性：
语法：元素.属性名

ele.name    
ele.id    
ele.value   
ele.className  

注意：class属性不能采用这种方式， 读取class属性时需要使用 元素.className

修改元素的属性：
语法：元素.属性名 = 属性值

innerHTML
使用该属性可以获取或设置元素内部的HTML代码

事件（Event）

事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动…
我们可以为事件来绑定回调函数来响应事件。
绑定事件的方式：
方式1：可以在标签的事件属性中设置相应的JS代码

<button onclick="js代码">按钮</button>  

方式2：可以通过为对象的指定事件属性设置回调函数的形式来处理事件

<button id="btn">按钮</button>  
<script>  
    var btn = document.getElementById("btn")  
    btn.onclick = function(){  
  		alter("我是一个按钮")
    }  
</script>  

文档的加载
浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。
如果将js代码编写到head标签里或者页面的都没DOM对象之前，当代码执行时，页面中的DOM对象还没有加载，此时将会无法正常获取到DOM对象，导致DOM操作失败。

解决方式1：
将js代码编写到要操作的DOM对象后面或者body标签的下面

<body>  
		<button id="btn">按钮</button>  
  
		<script>  
			var btn = document.getElementById("btn")  
			btn.onclick = function(){  
		  		alter("我是一个按钮")
			};  
	</script>  
</body>  

解决方式2：
将js代码编写到window.onload = function(){}中
window.onload 对应的回调函数会在整个页面加载完毕以后才执行， 所以可以确保代码执行时，DOM对象已经加载完毕了

<script>  
    window.onload = function(){  
        var btn = document.getElementById("btn");  
        btn.onclick = function(){ 
        	alter("我是一个按钮") 
        } 
    } 
</script>	    

DOM查询

通过具体的元素节点来查询
元素.getElementsByTagName()
通过标签名查询当前元素的指定后代元素

元素.childNodes
获取当前元素的所有子节点

childNodes属性会获取包括文本节点在内的所有节点 ，DOM标签标签间空白也会当成文本节点
注意：在IE8及以下的浏览器中，不会将空白文本当成子节点

innerHTML和innerText
这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
两个属性作用类似，都可以获取到标签内部的内容，
不同是innerHTML会获取到html标签，而innerText会自动去除标签

document对象的其他的属性和方法

DOM修改

document.createElement(“TagName”)
可以用于创建一个元素节点对象，

document.createTextNode(“textContent”)
可以根据文本内容创建一个文本节点对象

父节点.appendChild(子节点)
向父节点中添加指定的子节点

父节点.insertBefore(新节点,旧节点)
将一个新的节点插入到旧节点的前边

父节点.replaceChild(新节点,旧节点)
使用一个新的节点去替换旧节点

父节点.removeChild(子节点)
删除指定的子节点
推荐方式：子节点.parentNode.removeChild(子节点)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style type="text/css">
    body {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    button {
        width: 300px;
        margin-bottom: 10px;
        text-align: left;
    }

    #btnList {
        float: left;
    }

    #total {
        width: 450px;
        float: left;
    }

    ul {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    .inner li {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        margin: 5px;
        background-color: #99ff99;
        float: left;
    }

    .inner {
        width: 400px;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 10px;
        padding: 10px;
        float: left;
    }
</style>
<script>
    window.onload = function () {
        //构建一个函数
        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }
        // 1.创建一个"广州节点，添加到#city下"
        myClick("btn01", function () {
            // 创建li节点
            var li = document.createElement("li")
            // 创建li的文本节点
            var gztext = document.createTextNode("广州")
            // 将gztext设置为li的子节点
            li.appendChild(gztext)
            // 获取city
            var city = document.getElementById("city")
            // 将li设置为city的子节点
            city.appendChild(li)
        })
        // 2.将"广州"节点插入到#bj前面
        myClick("btn02", function () {
            // 创建li节点
            var li = document.createElement("li")
            // 创建li的文本节点
            var gztext = document.createTextNode("广州")
            // 将gztext设置为li的子节点
            li.appendChild(gztext)
            //获取北京
            var bj = document.getElementById("bj")
            // 获取city
            var city = document.getElementById("city")
            // 将li插入到bj前面
            city.insertBefore(li, bj)
        })
        //3.使用"广州"节点替换bj节点
        myClick("btn03", function () {
            // 创建li节点
            var li = document.createElement("li")
            // 创建li的文本节点
            var gztext = document.createTextNode("广州")
            // 将gztext设置为li的子节点
            li.appendChild(gztext)
            //获取北京
            var bj = document.getElementById("bj")
            // 获取city
            var city = document.getElementById("city")
            // 广州节点替换北京节点
            city.replaceChild(li, bj)
        })
        // 4.删除北京节点
        myClick("btn04", function () {
            /*  
              //获取北京
                var bj = document.getElementById("bj")
                // 获取city
                var city = document.getElementById("city")
                // 删除北京节点
                city.removeChild(bj)
             */
            //获取北京
            var bj = document.getElementById("bj")
            // 删除北京节点
            bj.parentNode.removeChild(bj)
        })
        // 5.读取city内的html代码
        myClick("btn05", function () {
            // 获取city
            var city = document.getElementById("city")
            alert(city.innerHTML)
        })
        //6.设置bj的Html代码
        myClick("btn06", function () {
            //获取北京
            var bj = document.getElementById("bj")
            // 将北京改为陆丰
            bj.innerHTML = "陆丰"
        })
        //7.创建一个"广州"节点添加到city下
        myClick("btn07", function () {
            // 创建li节点
            var li = document.createElement("li")
            //设置li的html代码
            li.innerHTML="广州"
            // 获取city
            var city =document.getElementById("city")
            //将li设置为city的子节点
            city.appendChild(li)
        })
    }
</script>

<body>
    <div id="total">
        <div class="inner">
            <p>你喜欢哪个城市?</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">1、创建一个"广州"节点,添加到#city下</button></div>
        <div><button id="btn02">2、将"广州"节点插入到#bj前面</button></div>
        <div><button id="btn03">3、使用"广州"节点替换#bj节点</button></div>
        <div><button id="btn04">4、删除#bj节点</button></div>
        <div><button id="btn05">5、读取#city内的HTML代码</button></div>
        <div><button id="btn06">6、设置#bj内的HTML代码</button></div>
        <div><button id="btn07">7、创建一个"广州"节点,添加到#city下</button></div>
    </div>
</body>

</html> 

DOM对CSS的操作

读取和修改内联样式

使用style属性来操作元素的内联样式
读取内联样式
语法：元素.style.样式名

注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法将-去掉，-后的字母改大写
比如：background-color > backgroundColor  
border-width > borderWidth  

修改内联样式
语法：元素.style.样式名 = 样式值

读取元素的当前样式

正常浏览器
使用getComputedStyle()
这个方法是window对象的方法，返回一个对象，这个对象中保存着当前元素生效样式
参数：
第1个：要获取样式的元素
第2个：可以传递一个伪元素，默认传null

获取元素的宽度

getComputedStyle(box , null)["width"];  

通过该方法读取到样式都是只读的不能修改

IE8
使用currentStyle
语法： 元素.currentStyle.样式名

box.currentStyle["width"]  

通过这个属性读取到的样式是只读的不能修改

实现兼容性

/*  
* 定义一个函数，用来获取指定元素的当前的样式  
* 参数：  
* 		obj 要获取样式的元素  
* 		name 要获取的样式名  
*/  
function getStyle(obj , name){  
	//判断浏览器是否存在window.getComputedStyle，如果有则调用getComputedStyle(obj , null)[name]，没有则调用obj.currentStyle[name]
    return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];			  
}  

其他的样式相关的属性

事件（Event）

事件对象

当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向…

获取到鼠标的坐标
clientX和clientY
用于获取鼠标在当前的可见窗口的坐标

pageX和pageY
用于获取鼠标相对于当前页面的坐标

事件的冒泡（Bubble）

事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
可以将事件对象的cancelBubble设置为true，即可取消冒泡
例子：

div.onclick = function(event){  
    event = event || window.event;  
    event.cancelBubble = true;  
};  

事件的委派

事件的绑定

addEventListener() （不支持IE8及以下的浏览器 ）
通过这个方法可以为元素绑定响应函数
参数：
1.事件的字符串，不要on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，默认传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数， 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行。

btn01.addEventListener("click",function(){  
	alert("hello");  
},false);  
  
btn01.addEventListener("click",function(){  
	alert("hello");  
},false);					  

attachEvent()

在IE8中可以使用attachEvent()来绑定事件
参数：
1.事件的字符串，要on
2.回调函数

这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反

btn01.attachEvent("onclick",function(){  
alert("hello");  
});  
  
btn01.attachEvent("onclick",function(){  
alert("hello World");  
});	  

实现兼容性

//定义一个函数，用来为指定元素绑定响应函数  
			 * 参数：  
			 * 	obj 要绑定事件的对象  
			 * 	eventStr 事件的字符串(不要on)  
			 *  callback 回调函数  
			 */  
function bind(obj , eventStr , callback){  
    if(obj.addEventListener){  
        //大部分浏览器兼容的方式  
        obj.addEventListener(eventStr , callback , false);  
    }else{  
        //IE8及以下  
        obj.attachEvent("on"+eventStr , function(){  
            //在匿名函数中调用回调函数  
            callback.call(obj);  
        });  
    }  
}  

事件的传播

W3C综合了两个公司的方案，将事件传播分成了三个阶段

1. 捕获阶段
     在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2. 目标阶段
     事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3. 冒泡阶段
     事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false

常用事件

鼠标事件

div跟着鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
   	window.onload = function() {
			
				//获取box1
				var box1 = document.getElementById("box1");
				//绑定鼠标移动事件
				document.onmousemove = function(event) {
					//解决兼容问题
					event = event || window.event;
					//获取滚动条滚动的距离
					/*
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
					 * 火狐等浏览器认为浏览器的滚动条是html的，
					 */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					//var st = document.documentElement.scrollTop;
 
					//获取到鼠标的坐标
					/*
					  clientX和clientY
					 	用于获取鼠标在当前的可见窗口的坐标
					  div的偏移量，是相对于整个页面的
					 */
					var left = event.clientX;
					var top = event.clientY;
					//设置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
				};
    }
</script>
<style>
    #box1{
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
    }
</style>
<body style="height: 1000px;width: 1500px;">
    <div id="box1"></div>
</body>
</html>

键盘事件

移动div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移
			 * 。。。
			 */
			window.onload = function() {
				//定义一个变量，来表示移动的速度
				var speed = 10;
 
				//创建一个变量表示方向
				//通过修改dir来影响移动的方向
				var dir = 0;
 
				//开启一个定时器，来控制div的移动
				setInterval(function() {
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch (dir) {
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
				}, 30);
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event) {
					event = event || window.event;
					//当用户按了ctrl以后，速度加快
					if (event.ctrlKey) {
						speed = 50;
					} else {
						speed = 10;
					}
					//使dir等于按键的值
					dir = event.keyCode;
				};
				//当按键松开时，div不再移动
				document.onkeyup = function() {
					//设置方向为0
					dir = 0;
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

BOM

浏览器对象模型(browser object model)
BOM可以使我们通过JS来操作浏览器

BOM对象

这些BOM对象在浏览器中都是作为window对象的属性保存的，
可以通过window对象来使用，也可以直接使用

Navigator

代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
一般我们只会使用userAgent来判断浏览器的信息，
userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
不同的浏览器会有不同的userAgent

火狐的userAgent
Mozilla5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko20100101 Firefox50.0

Chrome的userAgent
Mozilla5.0 (Windows NT 6.1; Win64; x64) AppleWebKit537.36 (KHTML, like Gecko) Chrome52.0.2743.82 Safari537.36

IE8
Mozilla4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

IE9
Mozilla5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

IE10
Mozilla5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)

IE11
Mozilla5.0 (Windows NT 6.1; WOW64; Trident7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了

alert(navigator.appName);  
  
var ua = navigator.userAgent;  
  
console.log(ua);  
  
if(firefoxi.test(ua)){  
alert("你是火狐！！！");  
}else if(chromei.test(ua)){  
alert("你是Chrome");  
}else if(msiei.test(ua)){  
alert("你是IE浏览器~~~");  
}else if("ActiveXObject" in window){  
alert("你是IE11，枪毙了你~~~");  
}  

History

对象可以用来操作浏览器向前或向后翻页
length
属性，可以获取到当成访问的链接数量
back()
可以用来回退到上一个页面，作用和浏览器的回退按钮一样
forward()
可以跳转下一个页面，作用和浏览器的前进按钮一样
go()
可以用来跳转到指定的页面

Location

该对象中封装了浏览器的地址栏的信息
如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
如果直接将location属性修改为一个完整的路径，或相对路径，则我们页面会自动跳转到该路径，并且会生成相应的历史记录

location = "http:www.baidu.com" 
location = "01.BOM.html"

assign()
用来跳转到其他的页面，作用和直接修改location一样
reload()
用于重新加载当前页面，作用和刷新按钮一样
如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面

location.reload(true)  

replace()
可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
不会生成历史记录，不能使用回退按钮回退

window

定时器

setInterval()
定时调用 ：可以将一个函数，每隔一段时间执行一次
参数：
第1个：回调函数，该函数会每隔一段时间被调用一次
第2个：每次调用间隔的时间，单位是毫秒

返回值： 返回一个Number类型的数据
这个数字用来作为定时器的唯一标识
clearInterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

clearInterval()可以接收任意参数，

• 如果参数是一个有效的定时器的标识，则停止对应的定时器
• 如果参数不是一个有效的标识，则什么也不做

var num = 1;  
var timer = setInterval(function() {  
	count.innerHTML = num++;  
	if(num == 20) {  
		//关闭定时器  
		clearInterval(timer);  
	}  
}, 500);  

延时调用

setTimeout

延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择

var timer = setTimeout(function(){  
	console.log(num++);  
},3000);  

使用clearTimeout()来关闭一个延时调用

clearTimeout(timer);  

类的操作

直接修改元素的类css：

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面。 这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便。
我们希望一行代码，可以同时修改多个样式

我们可以通过修改元素的class属性来间接的修改样式.这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好， 并且这种方式，可以使表现和行为进一步的分离 。

//定义一个函数，用来向一个元素中添加指定的class属性值  
/*  
 * 参数:  
 * 	obj 要添加class属性的元素  
 *  cn 要添加的class值  
 */  
function addClass(obj, cn) {  
	if (!hasClass(obj, cn)) {  
		obj.className += " " + cn;  
	}  
}  
/*  
 * 判断一个元素中是否含有指定的class属性值  
 * 	如果有该class，则返回true，没有则返回false  
 * 	  
 */  
function hasClass(obj, cn) {  
	var reg = new RegExp("\\b" + cn + "\\b");  
	return reg.test(obj.className);  
}  
/*  
 * 删除一个元素中的指定的class属性  
 */  
function removeClass(obj, cn) {  
	//创建一个正则表达式  
	var reg = new RegExp("\\b" + cn + "\\b");  
	//删除class  
	obj.className = obj.className.replace(reg, "");  
}  
/*  
 * toggleClass可以用来切换一个类  
 * 	如果元素中具有该类，则删除  
 * 	如果元素中没有该类，则添加  
 */  
function toggleClass(obj , cn){	  
	//判断obj中是否含有cn  
	if(hasClass(obj , cn)){  
		//有，则删除  
		removeClass(obj , cn);  
	}else{  
		//没有，则添加  
		addClass(obj , cn);  
	}  
}  

JSON

JavaScript Object Notation JS对象表示法

JSON 格式

1. 复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
2. 原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
3. 字符串必须使用双引号表示，不能使用单引号。
4. 对象的键名必须放在双引号里面。

JS中的对象只有JS自己认识，其他的语言都不认识
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别， 并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号

JSON分类：
1.对象 {}
2.数组 []

JSON中允许的值：
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组

举例：

var arr = '[1,2,3,"hello",true]' 
			  
var obj2 = '{"arr":[1,2,3]}'  
  
var arr2 ='[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]'  

JSON工具类

var obj = JSON.parse(json)

var str = JSON.stringify(obj3) 

JSON这个对象在IE7及以下的浏览器中不支持

​