标签：
three.js:3D框架 svg
tween:动画框架
一.js事件的组成：on+事件名，当触发某个事件做一些事情；
如：onclick：当点击鼠标，触发的事件；
二.在写一个页面时，结构(html)、样式(css)和行为(js)是要分离出来的；
好处：代码可复用，可读性好，可维护性好；
三.通过js获取元素方法：
1>通过元素中的id名，获取元素：document.getElementById("id名")；
2>通过元素名，直接获取元素：getElementsByTagName("元素名")；这里获取后，返回的是集合，是一组元素；
(1)用法：
a.document.getElementsByTagName("标签名")；
b.元素.getElementsByTagName("标签名")；
(2)查看取到集合的长度：使用length；
console.log(要打印的内容)：向控制台里面输入要打印的内容；
(3)当取一个集合里面的内容的时候,要用到下标(数字),这个集合的下标是从0开始的；
(4)获取设置属性值的方式：点（.）
如果属性名,不符合变量的命名规则，要用到[]
如：abc.0 ----> 这里的0，abc里面没有0这个属性，不可以使用点的方式。要用abc[0]；
四.函数的定义:
function (){} //匿名
function show(){}；
五.函数的调用：
函数名()；
事件调用；
注：函数定义后，一定要调用才有会意义；
六.操作元素：
1>第一种形式：点(.)
获取：
1. oDiv.style.width 形式只能获取行间的样式；
2. class:是一个保留字，属性的名也不能用保留字命名；
注意：如果要获取class的值，需要用到className；
3. innerHTML获取元素里面的内容；
赋值：
oDiv.innerHTML = "abc"；
赋值的过程：先清空掉元素里面的值，在赋值新的值；
七.变量：
作用：用来存放数据；
写法：var 变量名 = 要存放的数据；
好处：存一次，可以多次复用，把复杂的数据简单化；
变量名的规则：
1. 是由数字、字母、下划线、$组合而成的；
如：ab a_b a$b a0b...
注意：变量名不能用数字开头；不允许的：0ab 1ab 0 1；
2. 不能使用保留字和关键字；
关键字：js语法中正在使用的单词；
如：var function...
保留字：可能js以后用到的单词；
如：class...
八.window.onload：(先加载再执行)
当页面的资源加载完成之后，会触发这个事件，执行后面的函数；
cssText:批量设置样式的，先清空掉设置在行间中的样式，在设置新的样式值；
九.变量命名风格：
1. 匈牙利命名法：
o + 单词 o代表的就是object；
如：oDiv oBtn oInput
a +单词 a代表的就是array；
如：aLi aDiv
i + 单词 i 代表的是int；
如：iNum
2.驼峰命名法：
1>多个单词组合而成的命名的时候，第一个单词不大写，后面的单词首字母大写；
如：oneDiv oDivWidth oDivHeight
2>复合样式用作属性的时候，同样的遵循变量的命名规则
style属性下有很多的复合样式；
如：font-size background-color margin-top
注：把复合样式中间的-去掉，跟的后面的单词首字母大写；
十.流程控制：
1>for循环：
语法：for(初始化;条件;自增){循环体};
a.初始化：准备循环的工作，可以写也可以不写;
b.条件：如果这个条件为真（成立），进入循环体执行代码。如果这个条件始终为true，就会死循环;
c.自增：当循环体结束后 ，再把初始得值自增;
for循环中的break与continue;
break:当程序执行遇到break时，停止运行for循环，break后面的内容是不会在运行;
continue:当程序执行遇到continue时，会跳过当前循环，后面程度不执行;
2>if判断：
语法：(1).if(条件){ 代码体 }；当条件成立，为true时，执行代码体中的程序，否则直接执行后面代码;
(2).if(条件){ //当条件成功立，执行代码体，否则执行代码体1;
代码体
}else{
代码体1
}
说明：在进行判断时，注意以下几点：
(1).img标签中的src，不可以作判断。因为得到的是绝对路径；(标签中的src可读可写)
(2).a标签中的href，不可以作判断。因为得到的是绝对路径的地址；(标签中的href可读可写)
(3).background属性中的url、color值，都不可以作判断；
3>三目：
语法：条件 ？ 执行1 ：执行2；
说明：当条件成立，为true时，程序走"执行1"中的代码；为false时，程序走"执行2"中的代码；
这里的条件，默认为true;
例：var onOff = true，num = 0;
onOff ? num = 10 : num = -100;
4>switch case: 相当于if else if的另一种写法
语法：
switch(变量){
case 值1:
//当变量满足值1的时候，执行的代码
break; //终止向下运行
case 值2:
//当变量满足值1的时候，执行的代码
break; //终止向下运行
case 值3:
//当变量满足值1的时候，执行的代码
break; //终止向下运行
default:
//以上条件都不满的时候执行的代码
[break]
说明：当判断一个变量的值有不同结果，执行不同的代码的时候 ，可以用switch代替if；
十一.运算符：参与运算的符号；
运算数：参与运算的值；
1.算术运算：+ , - , * , / , %；
2.赋值运算：= += -= *= /= %=；
a.%：取模/取余/取得都是整数;
例：a % b；
a> 当a比b大，取两数相除的余数（取的是整数）；
b> 当a比b小，运算后的就是a；
c> 当a等于b，运算后得0；
3.比较运算：== === >= <= != !== > <；
【=、==、===】:
a.=：是赋值的意思
b.==：比较的是值,不会比较类型,会进行一次类型转换；(这个比较耗性能，因为每次比较都要转换)
a).两边的值相等的话，返回的是true（真）
b).两边的值不相等的话，返回的是false（假）
c.===：先比较类型，再比较值；(最好用这个，性能好)
4.逻辑运算：&& 与，|| 或 ! 非；
a.&&(与/并且)：两边的值都为真，那么整体为真。
1>如果前面为真，返回后面的值（无论真假都返回）；
2>如果前面为假，就返回前面的值；
b.||(或/或者)：两边只要有一个为真，整体就为真。
2>如果前面为真，返回前面的值；
3>如果前面的假，返回后面的值（无论真假都返回)；
c.!(非) 用法：!数据
操作过程：先把数据转换为布尔值，然后取反；
!!+数据：先把数据转换为布尔值，然后取反，再取反；(最后取的是本身的布尔值)
5.typeof:测试返回数据的类型，属于运算符；
使用方法：
typeof 数据
typeof(数据) 不建议使用的
typeof运算后取的类型值：
1. "number"
2. "string"
3. "boolean"
4. "undefined"
5. "object"
6. "function"
typeof返回的类型值跟数据类型有区别
特殊：
1.null 返回的是 "object";
2.function(){} 返回的是"function";
说明：比较运算和逻辑运算后，整体会返回一个布尔值；
十二.this:
含义：哪一个对象调用了这个函数，那么这个函数里面的this就指向调用的那个对象；
调用方法：this一共有6种调用方法；
在全局中，this指的是window；如：var a =0; console.log(this.a); //这里this指的就是window；
1> 函数调用：
如:function abc(){
this.value; //谁调用这个函数，this指的就是谁
}
2> 事件调用：
如：var oDiv = document.getElementById("div");
oDiv.onclick = function (){
this.style.background = "red"; //这里的this，指的是调用onclick事件的div；
}
3> 定时器调用：
如：setTimeout(function(){
//定时器里面的函数，永远是被window调用的，所以这里的this指的是window;
console.log(this);
});
4> 对象调用：
5> 构造函数调用：
6> 原型链调用：
十三.路径说明："./"：代表当前路径，在开发过程中，要把./写上，为的是所有服务器都认得；
"../"：上一层文件路径；
如何去掉a标签默认链接的点击行为：在href中写"javascript:void(0);";
十六.数据类型：
数据类型，可以分为两种类型：1>基本数据类型；2>复合数据类型；
1>基本数据类型为：
1. Number类型；
整数：0 1 2 3，-2...
浮点数： 0.1，1.4...
取值范围：+Infinity 和 -Infinity(正无穷和负无穷)；
2.String类型：一对单引号或者双引号包含的内容，内容有0个或者多个字符组成；
空字符串："",‘‘
引号是成双成对的，"",‘‘
不能够写成 " ‘;
3.Boolean类型：
只有两个值：true false；做判断用；
4.Null类型：
只有一个值null；
作用：申明了一个变量，还不知道这个变量要存的值，用null来占位；
5.undefined类型：
只有一个值undefined；
声明一个变量，不给这个变量赋值，那么这个变量的默认值为undefined。
2>复合数据类型：(是由N多个简单（基本）数据类型组合而成)
6.Object类型：
值为上面五种类型的组合，数组，json对象...[]和{}；
十七.数据类型转换：把一种数据类型转换成其他的类型；
1>类型转换的方式：
1)显式（强制）类型转换：自己手动去转；
2)隐式类型转换：在操作的时候自动转换；
1）显式类型转换：
1. 转换成Number类型：(转换的简写方式：+数据)
Number(值)：把值转换成Number类型(这是严格转换)；
转换情况：
无参数时：Number()；// 0
有参数时：
a.String => :
1. 空字符串或空白字符串 -> 0
2. 纯数字的字符串 -> 相对应的字符串内容
3. 其余的 - > NaN
b. number => number
c. undefined => NaN
d. null => 0
e. boolean => true:1,false:0
f. object =>
{} -> NaN
[] -> 0
2. 转换成String类型：(转换的简写方式："" + 数据)
String(值)：转换成String类型；
3. 转换成Boolean类型：
Boolean(值)：转换成Boolean类型；
1). 空字符串 => false 非空字符串 => true
2). 0 => false 非0 => true
3). 对象 => true
4). undefined和null => false
5). NaN =>false
*总结：" "(空字符串) , 0 , undefined , null , NaN ====>>>这五个转boolean类型都是false;
参考网址：http://www.fengfly.com/document/ECMAScript5.1/#203
4.parseInt(值)：转换成整数，非严格转换；
转换方式：
1)从左向右转换，转换的第一个字符为数字时，会继续向后转，
当遇到非数字的字符时，会停止转换，只返回之前可以转换的数字；
2)当转换的第一个字符为非数字时，会直接返回NaN，不会再继续向后转；
5.parseFloat(值)：转换成浮点数，非严格转换；
转换方式：
与parseInt的转换方式一样；
6.toFixed(num)：小数位数保留num个；
例：var a =23.445;
alert(a.toFixed(2));//弹出23.44 保留了2位小数;
2)隐式类型转换：
进行某些操作时，我们没有进行类型转换，但是为了能够正常的运行，系统就会进行类型转换；
"+ - * / < >" 遇到这些，会存在隐式类型转换；
1> "+"
1. 算术，当两边都为数字的时候，那么值就为两边的数字之和；
2. 字符串连接，当一边为字符串的时候，另一边为数字的时候，那么先把数字转成字符串，进行连接；
脑垂体瘤
2>"- * / ":做算术用
当一边为字符串的时候，试图先把字符串转换成数字（调的是Number()）；
如果转成了数字，那么计算两数之差；如果转成了NaN，那么结果就为NaN；
3>NaN和任何值运算都为NaN
扁桃体
4> "< >":
当一边为字符串的时候，另一边为数字的时候，先试图把字符串转成数字，然后进行比较；
3>NaN：Not a Number不是数字的数字；
a.在比较时：和任何值比较都是不相等的，包括自己；
b.如果值不能转成数字，返回的就是NaN；
说明：NaN不是一个类型，但是typeof 返回的是number类型的；
4>isNaN(值)：判断值是不是NaN；
a.如果值是NaN的话，返回true；
b.如果是数字，返回false；
说明：isNaN会隐式转换，调用的方法Number；
5>数据类型转换规则：
a.如果只有一个值，判断这个值是真还是假，遵循只有：0、NaN、""、undefined、null 这五个是false，其余都为true；
b.如果两个值比较相等，遵循以下规则：
1>对象==对象：永远不相等；
2>对象==字符串：先将对象转换为字符串(调用toString)方法，然后再进行比较；
[]转换为字符串是：""；
{}转换为字符串是："[object object]"；
3>对象==布尔类型：对象先转换为字符串(调用toString),然后把字符串在转换为数字(Number"" 变成 0)，
布尔类型也转换为数字(true为1，false为0)，最后让两个数字比较；
4>对象==数字：对象先转换为字符串(调用toString)，然后把字符串再转换为数字(Number)；
5>数字==布尔类型：布尔转换为数字；
6>数字==字符串：字符串转换为数字；
7>字符串==布尔类型：都转换为数字；
8>null==undefined：结果是true；
9>null或者undefined，和任何其它数据类型比较都不相等；
十八.运算：
1.++ : 每一次加1
如：iNum++就相当于 iNum = iNum + 1;
2.+= ：
如：iNum += 2; 相当于：iNum = iNum + 2;
当前这个变量存储的值+某个值（2,3）在赋给这个变量；
十九.函数：
1.函数：放的是代码片段；
语法：
匿名函数：function [函数名]([参数]){ 有名函数：function 函数名(参数){
//代码片段 //代码片段
} }
2.函数定义方式:
1)函数声明；
function fn(){
//代码片段
}
2)函数表达示；
var fn = function(){
//代码片段
}
说明：两种方式，没有太大区别，但是在调用的时候有区别。
3.函数调用：函数名+() 如：fn();
*一个函数，如果是在全局声明的，那么在任何地方都可以被调用到。
例：
fn();//可以在声明代码上面调用；
function fn(){
alert(111);
}
fn();//可以在声明代码下面调用；
*函数表达式，只能在将函数赋值给变量，之后调用。
例：
fn();//这样调用会报错;
var fn = function(){
alert(222);
}
fn();//只可以在表达示代码下面调用;
4.函数传参：
参数的定义：当函数执行的时候，传入的数据;
参数分两种：
1.形参：形式上的参数;
定义函数的时候，写在小括号里面，多个参数的话，用逗号隔开；
形参是作为函数的局部变量使用，命名的规则遵循变量的规则，形参只能在函数中使用；
例：
function fn(ele,eve){//ele和eve就是形参
//代码片段
}
注意：当定义的形参，没有接到数据的时候，默认值就为undefined；
2.实参：实际传入的参数；
函数执行的时候，传入的实际参数；
例：
fn(1,3);//1和3就是实际传入函数的参数
arguments:(存的是实际传入的参数集合)
作用：当实际传入参数的个数不确定时，就会用到arguments；
1.当函数定义的时候，就存在的一个内置变量；
2.arguments属于类数组对象：
因为对应值的结构，和数组很像，但不是数组，类似于数组这种结构，称之为：类数组对象；
3.其中length，可以查看实际传入参数的个数；
5.return:
return 是函数定义的时候，内部的东西；
当函数被调用的时候，都有返回值：
1>如果没有使用内部的（return 要返回的数据）的话，那么这个函数的返回值为undefined。
2>如果使用（return 要返回的数据），那么这个函数的返回值就是 要返回的数据。
3>如果return后面没写数据，那么函数的返回值为undefined。
作用：阻止函数继续向后执行，并返回相应的值；
6.函数自执行：
如：
(function ab(){
alert(1);
})(); //这种写法就表示函数自动执行了；
说明：
1.函数名+() 等于return 后面的值；
例：function fn(){
return 123;
}
fn();//这里返回的是return 后面的123;
2.直接函数名，没有()，等于整个函数表达示;
例：function fn(){
return 123;
}
fn;//这里返回的是整个函数表达示:function fn(){return 123;}
二十：获取计算后的样式
1> ie低版本（6,7,8）下：(currentStyle)
写法：元素.currentStyle[属性名]
2> 标准浏览器下：(getComputedStyle)
写法：getComputedStyle(元素)[属性名]
3>如果要找某个对象身上的某个属性，
找到了，返回对应的值;
没找到，返回的是undefined;
封装getStyle方法：
1>封装参数说明:
getStyle两个参数：
第一个参数，传入的是元素
第二个参数，元素的属性
getStyle返回值：获取元素上的属性对应的值;
2>开始封装:
//简化版
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}
//啰嗦版
function getStyle(obj,attr){
if(obj.currentStyle){//兼容ie6,7,8
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}
注意：if else的顺序不可颠倒，原因是：getComputedStyle()ie6 7 8 不认识，会报错;
而currentStyle[]浏览器都认，不会报错;
二十一：作用域
二十二：闭包
闭包是一种机制，在函数运行时产生一种作用域，来保护里面的变量不受外界的影响。
闭包的好处：避免全局污染；
用处：1>希望一个变量长期驻扎在内存中；
2>循环绑定事件在里面找到索引值，如选项卡案例；
二十三：定时器
定时器的定义(两种方法)：
1>连续触发定时器(间歇型):间隔一段时间，就会执行一段代码，直到让它停止位置;
语法：setInterval(function(){},1000);
function(){}是要执行的函数；
1000是执行的时间，单位为毫秒；1s = 1000ms;
2>延迟触发定时器(延迟型):延迟某个时间后，执行一段代码，只会执行一次。在执行前，可以停止执行;
语法：setTimeout(function(){},1000);
function(){}是要执行的函数;
1000是执行的时间，单位为毫秒；1s = 1000ms;
定时器的清除：
1>clearInterval(定时器) //清除的是setInterval;
2>clearTimeout(定时器) //清除的是setTimeout;
二十四：时间对象
含义：可以用来获取时间的对象；
语法：1> new Date();//无参数时，获取的是当前系统时间；
2> new Date(2015,07,22,16,34);//有参数时，获取的是输入的时间；
方法：getFullYear();//获取年份；
getMonth();获取月份；（取值范围 0 ~ 11）
getDate();获取哪一天；
getDay();获取星期；（0(周日) ~ 6）国外是以周日为一周的第一天；
getHours();//获取小时；
getMinutes();//获取分钟；
getSeconds();//获取秒；
getTime();//获取毫秒数；
1天 = 24小时 1天 = 86400秒
1小时 = 60分钟 1小时 = 3600秒
1分钟 = 60秒
倒计时算法：
未来时间(固定) - 现在时间(变化) = 差值(变化)
二十五：String的方法(位置都是从0开始)
获取类：
1>charAt(): 获取指定位置的字符；
用法：str.charAt(); 例：var str = "abc"; alert(str.charAt()); // a
str.charAt(number); 例：var str = "abc"; alert(str.charAt(1)); //b
返回值：是找到对应位置的字符,返回的是一个字符串;
参数：
不传参数时： 默认参数的位置为0；
传入的是数字：
如果小于0,那么返回的是空字符串；
如果大于等于字符串的长度，返回的是空字符串；
2>charCodeAt(): 获取指定位置的字符的编码(ASCll码)
用法：str.charCodeAt(); 例：var str = "a"; alert(str.charCodeAt()); //97
返回值：找到指定字符位置的编码(数字)
参数：
不传参：默认为0；
参数范围：0 -- 字符串长度-1；如果超出范围，返回的是一个NaN；
3>fromCharCode(): 把编码转换成字符（静态方法）
用法：String.fromCharCode(); 例：alert(String.fromCharCode(97)); // a
4>substring(): 获取截取字符串的字符;
用法：str.substring(); 例：var str = "abc"; alert(str.substring(1)); //bc
返回参数：是截取到的相对应的字符串;
参数：(start,end)（第二个参数不是必须的）
如果之传入一个参数：
start >= 0; 返回从指定位置一直截取到字符串的最后
start < 0; 传入的参数为0
start >= 字符串的length：返回时空字符串
传入两个参数：
start < end; 返回start到end位置的字符，不包含end位置的字符
start > end; 调换位置，返回 end到start之间的字符，不包含start位置的字符
start == end; 返回空字符串
5>slice()：提取指定范围子字符串;
用法：str.slice(); 例：var str = "abc"; alert(str.slice(1)); //a
返回参数：是截取到的相对应的字符串;
参数：(start,end)（第二个参数不是必须的）
如果之传入一个参数：
start >= 0; 返回从指定位置一直截取到字符串的最后
start < 0; 传入的参数为0
start >= 字符串的length;返回时空字符串
传入两个参数：
start < end; 返回start到end位置的字符，不包含end位置的字符
start > end; 返回空字符串
start == end; 返回空字符串
start可以为负数:
-1是字符串的最后一位
-2是字符串的倒数第二位
-3，-4依次向前推
start(负数)+str.length < end(正数) 返回的是start(负数) ~ end之间的字符
例：var str = "aiday";
/*
分析步骤：1.先将把-1加上str.length，-1+3=2;
2.再截取(2,3)的字符，打印为d;
*/
alert(str.slice(-1,3));
注意：substring()与slice()之前的区别：
1.substring()只可以传入正数的数字，不可以为负数；
slice()可以传入正数和负数的数字；
2.substring()只可以从左向右截取数字；
slice()输入正数时，是从左向右截取；输入负数时，是从右向左截取；
查找类：
6>indexOf()：查找某个字符串在字符串中首次出现的位置;(从左到右)
用法：str.indexOf(); 例：var str = "abcabc"; alert(str.indexOf("a" , 1));// 字符串a，第1次出现的位置
参数：(字符串,searchIndex)（第二个参数不是必须的）
只有一个参数字符串的时候：
不传入参数：返回 -1;
传入的是一个字符串：返回的是这个字符串首次在str出现的位置;
var str = "bcabc"; alert( str.indexOf("ab") );
如果没有找到指定的字符串：始终返回的是-1;
第二个参数searchIndex的作用：
指定从哪个位置开始向后搜索：默认值为0;
7>lastIndexOf()：查找某个字符串在字符串中最后出现的位置;(从右到左)
用法：str.lastIndexOf(); 例：var str = "abc"; alert(str.lastIndexOf());
参数：(字符串,searchIndex)（第二个参数不是必须的）
只有一个参数字符串的时候：
不传入参数：返回 -1
传入的是一个字符串：返回的是这个字符串首次在str出现的位置
例：var str = "bcabc"; alert( str.indexOf("ab") );
如果没有找到指定的字符串：始终返回的是-1;
第二个参数searchIndex的作用：
指定从哪个位置开始向前搜索：默认值为str.length-1;
注意：indexOf()与lastIndexOf()的区别：
1.indexOf()找的是从左到右第一次出现的位置；
lastIndexOf()找的是从右到左最一次出现的位置；
其它：
8>split()：将一个字符串通过某个分割符，转换成数组;
用法：str.split(); 例：var str = "abc"; alert(str.split()); //[a,b,c]
返回值：返回的是一个数组;
参数：(分隔符,数字)
不传参：
会把str整体作为数组的元素;
传入：
就按照传入的参数，将字符串分割成数组的每一项;
第二个参数传入的是一个正数：
作用：保留数组元素的个数;
例：var str ="abc"; alert(str.split());
9>trim():去除字符串前后一个或多个空格;
用法：str.trim(); 例：var str =" abc "; alert(str.trim()); //"abc"
返回值：返回的是去掉空格后的字符串;
10>toUpperCase():将字符串转为大写;
用法：str.toUpperCase(); 例：var str ="abc"; alert(str.toUpperCase()); //"ABC"
11>toLowerCase():将字符串转为小写;
用法：str.toLowerCase(); 例：var str ="ABC"; alert(str.toLowerCase()); //"abc"
比较类: >, <, ==;
1>数字和数字比较的时候 直接比较两个数值;
alert( 1 < 2 );
2>字符串和字符串比较的时候，把两边的字符串转成相对应的编码，在进行比较;
alert( "1" < "2" );
alert( "a" < "b" );
3>数字和字符串比较，把字符串转成数字比较，如果字符串是纯数字，直接传成相对应字符串的数字进行比较;
alert( "1" < 2 );
4>如果字符串不是纯数字的，那么转成数字在进行比较;
alert( "a" < 2 );
二十六：JSON
含义：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式;
语法格式：{key:value,key:value} 键:值，对的形式；
json格式的结构：1.数组 []； 2.对象 {}；
json特点：json中的key值是唯一的；
数组和对象的区别：
1. 对象没有length，除非是自己手动添加的数组自动就有length这个属性;
2. 对象的下标需要自己定义，数组不需要自己定义;
通常情况下：1)json对象要用for in 循环;
2)数组 要用 for循环;
<for in循环使用说明>
语法：var json ={"userName":"zhangsan","age":23};
for(var jsonStr in json){
console.log(json[jsonStr]);//得出所有key的value值；
}
for中的参数说明：
jsonStr:是一个变量；
json:要循环的json对象；
步骤说明：
1.先将所有的key找到，存到for循环中的变量(jsonStr)中；
2.通过json对象.key名的方式，可以找出指定的value值；
3.也可以通过json对象[变量名]的方式，可以直接找到所有json对象的value值；
1>JSON.parse():把字符串形式的json,解析成js中可用的对象;
注意：字符串形式的json，的key值，必须是加引号的，否则JSON.parse()解析的时候会报错。
参数：(str,function(key,value){})
第一个参数：要解析的字符串;
第二个参数：回调函数；
作用：这个函数已经把解析后的key,value传入到函数中，可以在函数中修改操作key,value的值；
注意：使用这个函数时，函数内一定要有一个return;否则会报错；
2>JSON.stringify():把json格式的对象,转换成字符串形式的json;
参数：(str,function(key,value){},[0-10])
第一个参数：要解析的json;
第二个参数：回调函数;
作用：这个函数已经把解析后的key,value传入到函数中，可以在函数中修改操作key,value的值；
注意：使用这个函数时，函数内一定要有一个return;否则会报错；
第三个参数：格式化转换后的字符串形式的json;
说明：1)当输入的是数字时，范围是0-10，会在每一个key前面输入0-10个空格；
2)当输入为字符串时，会在每一个key前面输入对应的字符串；
二十七：数组(Array)
含义：一组数据的集合，是一个有序集合，用来存储一组数据；
1>定义：[] 中括号里存许多的元素,每个元素用","隔开，最后一个元素，没有","；
2>数组的取值：数组取值使用下标来取的，下标是从0开始的；length 查看数组的长度(元素的个数)；
3>取出数组中元素方法：使用for循环的方式，取数组中每一个元素；
语法：var arr =[1,2,3,4,5,6,7];//字面量格式创建
var arr = new Array(); //对象格式创建
数组内的方法：
1.Math()相关方法：
1)Math.floor(number):向上取整；
例：Math.floor(0.2)；取的是：比0.2大的整数；得0；
2)Math.ceil(number):向下取整；
例：Math.ceil(1.3)；取的是：比1.3小的整数；得1；
3)Math.round(值)：四舍五入；
例：Math.round(1.5)；// 2
4)Math.abs(值)：取绝对值；
例：Math.abs(-33)；// 33
5)Math.random():生成一个随机数;
例Math.random();//生成0--1(不包含1的随机数)
*Math.random():
区间的随机数：
0 ~ 5 ：Math.round( Math.random() * 5 ); //0--5的随机数
0 ~ 10: Math.round( Math.random() * 10 ); //0--10的随机数
10 ~ 20: Math.round( Math.random() * 10 ) + 10; //10--20的随机数
20 ~ 80 : Math.round( Math.random() * 60 ) + 20; //20--80的随机数
1 ~ 5 : Math.ceil( Math.random() * 5 ) || 1; //1--5的随机数
0 ~ 5(不包含5): Math.floor( Math.random() * 5 ); //0--5不包含5的随机数
公式：
0 ~ X : Math.round( Math.random() * X );
x ~ y : Math.round( Math.random() * (y-x) ) + x;
1 ~ x : Math.ceil( Math.random() * x ) || 1;
0 ~ x-1: Math.floor( Math.random() * x );
2.length()方法：
用法：Array.length();
例：var arr =[1,2,3,4];
1> 获取数组的长度;
arr.length();//长度为3
2> 修改数组的长度;
说明：
1) 超出了数组的长度，那么多余的项值为undefined;
arr.length = 4; // [1,2,3,undefined]
2) 如果没有超出数组的长度，那么就把数组保留相对应数字的元素个数;
arr.length = 1; // [1]
3.sort()方法：
定义：对一个数组进行排序的,默认排序是从小到大，根据字符串来排序的；
用法：Array.sort();
例：var arr = [3,5,2,6,7];
arr.sort();
参数说明：
sort(function(a,b){});
sort的参数，必须是一个函数，函数有两个参数;
函数返回值：
如果为正数，那么随机比较的两个数交换位置;
如果为负数或者0 不交换位置;
例：var arr = [3,5,2,6,7];
arr.sort();//不写参数默认从小到大排；
arr.sort(function(a,b){
return a - b;//从小到大排
});
arr.sort(function(a,b){
return b - a;//从大到小排
});
带单位的排序方法：
var arr =["34px","12px","45px","20px"];
arr.sort(function(a,b){
return parseInt(a) - parseInt(b);
});
4.push():
定义:向数组末尾追加一个或多个元素;
用法：Array.push()
例：var arr = [1,2,3];
arr.push(4); //[1,2,3,4]
注意：会改变原有的数组;
参数：一个或者多个参数;
返回值：追加后数组的长度;
5.pop():
定义：删除数组最后一个元素;
用法：Array.pop()
例：var arr =[1,2,3];
arr.pop(); //[1,2]
注意：会改变原有的数组;
参数：无;
返回值：删除的那个元素;
6.unshift()：
定义：向数组的最前面添加一个或多个元素;
用法：Array.unshift()
例：var arr =[1,2,3];
arr.unshift(5); //[5,1,2,3]
注意：会改变原有的数组;
参数：一个或者多个参数;
返回值：添加后数组的长度;
7.shift()：
定义：删除数组第一个元素;
用法：Array.shift()
例：var arr =[1,2,3];
arr.shift(); //[2,3]
注意：会改变原有的数组;
参数：无;
返回值：删除的那个元素;
8.concat()：
定义：连接多个数组，并生成新数组，不会改变原有的数组;
参数：要连接的一个或多个数组，还可以传入每一项，作为新数组的每一项;
concat:string也有这个方法，但是一般会用 + 号连接;
用法：Array.concat()
例：var arr = [1,2,3]; var arr1 = [4,5,6];
var newArr = arr.concat(arr1); //参数里放入要连接的数组;会返回一个连接后的数组;
//concat()中不传入参数，会复制原有的数组；
var arr = [2,3,4];
var newArr =arr.concat(); //这样得到的是复制后的arr数组
9.indexOf()：(IE6,7,8不支持这个方法)
定义：根据字符找对应的字符索引；
解决支持底版本的解决办法：(手动封装indexOf()方法)
function indexOf( arr,str,searIndex ){
searIndex = searIndex ? (searIndex > 0 ? searIndex : 0) : 0;
for( var i = searIndex; i < arr.length; i++ ){
if( arr[i] === str ){//判断是否存在数组中
return i;//找到了返回对应的索引
}
}
return -1;//找不到返回-1
};
10.reverse()：
定义：反转数组，将数组中的数据的位置反过来显示;(使数组倒序)
返回值：该方法会改变原有数组;
参数：无;
语法：var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr);// [5,4,3,2,1] 改变了原有数组
11.slice()：
定义：根据输入的值，截取对应要的数组;
返回值：返回截取后的新数组，不会改变原有数组;
参数：(start,end)
语法：var arr = [1,2,3,4,5];
arr.slice(1);// [2,3,4,5] 从位置1开始截取到最后
arr.slice(1,2);// [2] 从位置1开始截取到第二位，不包括第二位
12.splice()：
定义：从指定位置删除部分元素并增加新的元素;
注意：会改变原有的数组;
参数：(i,n,e,e1,e2...)
i：从该下标开始删除;
n：删除指定数量的元素;
e：插入的元素;后面可以插入多个元素;
语法：var arr = [1,2,3,4,5];
arr.splice(1); // [2,3,4,5] 删除从1位置开始;
arr.splice(1,2); // [4,5]
二十八.DOM(Document Object Model)
DOM分为：xmlDOM htmlDOM;
定义：文档对象模型;
文档(Document)：html页面
文档对象(Document Object)：页面中的元素
文档对象模型(Document Object Model)：是一套定义；为了能够让程序(js)去操作页面中的元素；
DOM：会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素(节点)
作用：DOM制定了一套标准，对页面中的html元素;
进行获取、删除、改变、添加，在js中通过document这个对象提供的方法。
说明：每一个html标签，都是DOM结构的节点，节点也称之为元素;
DOM节点：是DOM结构中最基本的组成单元。
DOM结构:
按层级划分：父节点，子节点，兄弟节点;
父子节点：上下两层的关系;
兄弟节点：同一级的关系;
祖先节点：当前节点上面所有节点的统称;
子孙节点：当前节点下面所有节点的统称;
DOM节点是有类型的:
DOM按类型划分：元素节点 属性节点 文本节点 注释节点 document节点
元素节点：html标签
文本节点：文字，特殊符号，换行符，制表符。。。（给用户看的）
属性节点：元素节点上各种属性
注释节点：文档中的注释<!-- -->
document节点：特有的document对象;
1.nodeType：
定义：当前元素的节点类型；(返回的是正整数)
节点类型值：
元素节点：1
属性节点：2
文本节点：3
注释节点：8
document节点：9
2.nodeName：
定义：获取到当前节点的名字(获取到的名字是大写的);
元素节点：标签名(大写的)
文本节点：#text;
注释节点：#comment;
document节点：#document;
通过父节点操作子节点：
3.childNodes：
定义：是一个只读属性，子节点列表集合；
兼容问题:
1> 标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点；
2> 非标准下：只包含元素类型节点，ie7以下不会包含非法嵌套的子节点；
注意：childNodes只包含一级子节点，不包含后辈孙级以下的节点；
用法：元素.childNodes;
4.children：
定义：只读属性，子节点列表集合;
兼容问题：
1> 标准下：只包含元素类型的节点；
2> 非标准下：只包含元素类型的节点；
用法：元素.children;
5.parentNode：
定义：获取到当前节点的父节点;
6.获取某个元素下面的子节点;
非标准支持的属性：
1> firstChild:只读属性 第一个子节点
用法：元素.firstChild;
2> lastChild：只读属性 最后一个子节点
用法：元素.lastChild;
3> nextSibling：只读属性 下一个兄弟节点
用法：元素.nextSibling;
4> previousSibling：只读属性 最后一个兄弟节点
用法：元素.previousSibling;
标准下支持的属性：
1> firstElementChild：只读属性 标准下获取第一个元素类型的子节点；(非标准下没有这个属性)
2> lastElementChild：只读属性 标准下获取第一个元素类型的子节点；(非标准下没有这个属性)
3> nextElementSibling:只读属性 标准下获取下一个兄弟节点类型的子节点；(非标准下没有这个属性)
4> previousElementSibling:只读属性 标准下获取上一个兄弟节点类型的子节点；(非标准下没有这个属性)
兼容问题：
标准下：只包含文本类型的节点；
非标准下：只包含元素节点；
兼容处理方法：
1> firstElementChild||firstChild 第一个子节点
2> lastElementChild||lastChild 最后一个子节点
3> nextElementSibling||nextSibling 下一个兄弟节点
4> previousElementSibling||previousSibling 上一个兄弟节点
通过子节点找到父节点：
1.父节点
parentNode：只读属性 当前节点的父级节点
用法：元素.parentNode
offsetParen:只读属性 离当前元素最近的一个有定位属性的父节点
用法：元素.offsetParent
问题：
(1).如果没有定位父级，默认是body;
(2).ie7以下，如果当前元素没有定位默认是body，如果有定位则是html;
(3).ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到触发了layout特性的父节点上;
2.offsetLeft(Top)：只读 属性 当前元素到定位父级的距离(偏移值)到当前元素的offsetParent的距离
如果没有定位父级：
offsetParent -> body
offsetLeft -> html
如果有定位父级：
ie7下：
1.如果自己没有定位，那么offsetLeft(Top)是到body的距离;
2.如果自己有定位，就是到定位父级的距离;
其它浏览器：
到定位父级的距离;
3.元素宽高取值
style.width：样式宽;
clientWidth：可视区宽(当前元素看的见的宽);
offsetWidth：占位宽;
操作元素属性的多种方式：
1. 通过"."点的形式获取元素中的属性；
例：oDiv.id;
2.通过"[]"的形式获取元素中的属性；
例：oDiv["id"];
注意：当遇到获取的属性是以变量方式存放的，要用"[]"的方式，不要用点;
如：var name ="value";
oDiv.name;有问题,这个会找元素中有没有name这个名字的属性;
oDiv[name];//正确写法
3:
1) getAttribute(属性名称)：方法 获取指定元素的指定属性的值;
用法：元素.getAttribute();
如：oDiv.getAttribute(‘value‘);
2) setAttribute(属性名称，属性值);方法 给指定元素的指定属性设置值;
用法：元素.setAttribute();
如：oDiv.getAttribute(‘value‘,‘test‘);
3) removeAttribute(属性名称)：方法 移除指定的元素的指定的属性；
用法：元素.removeAttribute();
如：oDiv.removeAttribute("value");
三种获取属性值的区别：
1.用.和[]的形式无法操作元素的自定义属性，getAttribute()可以操作元素的自定义属性；
2.可以获取元素履实际的值，但是ie7下还是会返回资源的绝对路径；
元素的操作方法：
1.元素的创建：
createElement(标签名称)：创建元素
用法：document.createElement(标签名称);
2.添加子元素：
appendChild(添加的元素)：方法 追加子元素
用法：父级.appendChild(要添加的元素);
3.插入元素：
insertBefore(新的元素，被插入的元素)：方法 在指定的元素前面插入一个新元素
用法：父级.insertBefore(新的元素，被插入的元素);
兼容问题：
1.在ie下如果第二个参数的节点不存在，会报错；
2.在其它标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加；
兼容处理方法：
if(第一个元素存在){
使用insertBefore();
}else{//如果不存在
使用appendChild();
}
4.删除元素：
removeChild(要删除的元素)：方法 删除指定元素;
用法：父级.removeChild(要删除的元素);
5.元素替换：
replaceChild(新的元素，被插入的元素)：替换子节点;
用法：父级.replaceChild(新节点，被替换的节点);
appendChild、insertBefore、replaceChild：
都可以操作动态创建出来的节点，也可以操作已有节点;
操作已有元素时，是直接把元素从一个位置移动到另一个位置，而不是复制。
表格的操作：
1.tHead：获取表格头
2.tBodies：获取表格正文
3.tFoot：获取表格尾
1> rows：获取行
2> cells：获取列
表单的操作：
获取表单中的标签：
1.通过标签中的name属性获取；
如：oForm.text1;
直接用表单点上name的值；
2.onchange：当值发生改变的时候触发；
input标签的text：当光标离开的时候，如果内容有变化就触发；
input标签的radio/checkbox：
1> 标准下点击的时候只要值变了，那么就会触发；
2> 非标准下焦点离开的时候如果值变了，就会触发；
事件和方法：
1> onsubmit：事件 当提交表单的时候触发
2> submit()：方法 提交表单
3> onreset：事件 当表单重置的时候触发
4> confirm(‘确定要操作吗?‘)：弹出询问对话框
返回值是true ,false 点确定是true 取消是false;
二十九.BOM(Browser Object Model)
BOM：Browser Object Model 浏览器对象模型;
BOM--方法:在BOM中大部分方法都是window调用的；
1.open(页面的地址，打开的方式)：方法 打开一个新的窗口(页面)
用法： window.open(url,方式);//window可以省略
url地址格式：http://www.baidu.com/;
参数：
1.如果url为空，则默认打开一个空白页面;
2.如果打开方式为空，默认新窗口方式打开;
打开方式：
(1)_blank: 新窗口打开 默认;
(2)_self：在本页面打开新地址;
返回值：返回新打开的窗口的window对象
2.close()：方法 关闭窗口
用法：某对象.close(); //某对象是谁，就是谁关闭；
close()的兼容问题：
1.火狐：默认无法关闭；
2.chrome：默认直接关闭；
3.ie：询问用户是否关闭；
现象：可以关闭在本窗口中通过js方法打开的新窗口；
BOM--属性：
1.window.navigator.userAgent：获取当前浏览器信息
作用：可以通过得到的浏览器的版本，判断执行相应浏览器的js代码；
2.window.location：获取浏览器地址信息;
3.window.location.href：获取url地址;
4.window.location.search：获取url?后面的内容；
5.window.location.hash：获取url#号后面的内容
BOM--窗口尺寸与大小
1.可视区尺寸：看到见的地方
(1)document.documentElement.clientWidth：获取可视区的宽度;
(2)document.documentElement.clientHeight：获取可视区的高度;
2.滚动距离
(1)标准浏览器：document.body.scrollTop/scrollLeft;
(2)非标准浏览器：document.documentElement.scrollTop/scrollLeft;
3.内容高度
document.body.scrollHeight/scrollWidth;
4.文档高度兼容问题：
(1)ie浏览器，这个方法读取错误：document.documentElement.offsetHeight;
(2)所有浏览器都兼容：document.body.offsetHeight;
window对象常用事件：
1.onscroll：当滚动条滚动的时候触发;
2.onresize：当窗口大小发生改变的时候触发；
三十.事件
事件说明：
当用js获取到一个元素的时候，元素的身上自动就有以on开头的这些属性，这些属性都是与事件有关系的
如：
onclick
onmouseover
onmouseout
...
对应值默认为null
当一个元素触发了某个事件（比如onclick），如果onclick对应的值null，毫无反应;
如果对应的值，为函数，那么当触发事件的时候，就会执行这个函数。
其实不是给元素添加事件的，只是给相对应的事件，添加事件处理函数。
事件的绑定：
作用：同一个元素在添加多个同一个事件处理函数时，最后添加的事件处理函数会替换掉之前的处理函数，
从而导致前面的处理函数无效；
事件绑定就是用来处理这个问题，使得一个元素可以添加多个同一个事件处理函数，处理函数中的代码都会被执行；
兼容问题：
1> 只是在标准浏览器下用(ie9,10,11)：
addEventListener()
元素.addEventListener(事件名,事件处理函数，布尔值);
参数：
参数一，要绑定的事件名;
参数二，要绑定的事件函数;
参数三，是否捕获，true：捕获;false：冒泡;
1. 执行顺序，是按照绑定事件处理函数的顺序;
2. 第一个参数 事件是不加 on的;
3. this指向的是触发事件的对象;
2> ie低版本（6,7,8,9,10）:
attachEvent();
元素.attachEvent(on+事件名,事件处理函数);
参数：
参数一，要绑定的事件名;
参数二，要绑定的事件函数;
参数三，attachEvent只有冒泡;
1. 执行顺序，和绑定事件处理函数的顺序相反;
2. 事件是需要加on;
3. this指向的是window;
this，是在函数调用的时候，才决定了函数里this指向的值;
在事件处理函数里面，this指向的是触发事件的对象;
事件绑定的解除：
addEventListener(标准下)：
removeEventListener:解除/移除事件绑定;
元素.removeEventListener(事件名,事件处理函数,false);
attachEvent(ie低版本下)：
detachEvent:解除/移除事件绑定;
元素.detachEvent(on+事件名,事件处理函数);
注意：如果要解除的事件处理函数，一定是有名字的事件处理函数，否则找不到这个函数，就无法解除;
兼容处理：
call()：一个函数的方法
作用:当函数执行的时候，改变函数里的this的指向;
当函数调用call的时候，直接就执行了这个函数1
参数：
第一个参数：是函数执行过程中，this指向的那个值;
如果不给第一个参数，或者写入的null，那么函数里的this指向window;
如果给了第一个参数，那么函数里面的this就指向这个参数的值;
第二个参数，一次往后推写入的参数，是调用函数时候实际传入的参数;
apply()与call()的作用一样;
参数：
第一参数同call的第一个参数;
第二参数是一个数组，数组里面的值，就是调用函数时实际传入的参数;
事件模型的三个阶段：
捕获阶段：从顶层开始触发相对应的事件，直到目标元素;
目标阶段：目标元素上触发;
冒泡阶段：从目标元素向最顶层触发相对应的事件;
事件对象：
定义：当触发了某个事件的时候，那么系统(浏览器)就会把关于这次事件触发的详细信息存在一个对象中，
这个对象称之为事件对象;
获取到事件对象
标准浏览器下：
作为事件处理函数的第一个参数;
ie低版本：
事件对象作为全局的对象存在，名字为event;
chrome下：
可以作为事件处理函数的第一个参数，也可以在全局的event获取;
兼容处理：
var e = ev || event;
低版本支持的event对象在后;
事件对象的属性：
1.获取鼠标的位置：
clientX：相对于浏览器左边的距离;
用法：事件对象.clientX;
clientY：相对于浏览器上边的距离;
用法：事件对象.clientY;
2.获取事件源元素：target;
用法：事件对象.target;
事件冒泡：
触发某个元素的某个事件，从当前的元素开始，逐级向上触发，沿途的相对应元素（当前元素的祖先节点）的相对应的事件;
好处：可以事件委托;
事件源，事件发生的那个元素;
事件源元素的获取：
标准浏览器：
事件对象.target;
在ie低版本：
事件对象.srcElement;
阻止冒泡：事件对象.cancelBubble = true;
焦点事件：
定义：可以获取到光标的事件;
页面中的元素能跟用户交互的，例如：input输入框、表单控件等，都有焦点事件;
焦点默认：默认焦点时是，document;
获取焦点方式：
1. 鼠标点击;
2. 键盘tab键;
3. 程序设置;
注意:页面中的元素只能有一个元素获取到焦点，当一个元素获取焦点后，另一个元素就会失去焦点;
1.获取焦点：onfocus:元素 获取 焦点时触发的事件;
用法：元素.onfocus = function(){
//操作代码;
}
2.失去焦点：onblur:元素 失去 焦点时触发的事件;
用法：元素.onblur = function(){
//操作代码;
}
事件方法：select()、focus()、blur();
1.获取焦点：元素.focus();//一般用在，打开页面就有默认获取焦点的元素上
2.失去焦点：元素.blur();//基本不用
3.选中内容：元素.select();//一般用在，有全选功能上
onchange事件：当select控件的值发生改变的时候触发的事件;只有select有这个事件;
键盘事件：
定义：敲击键盘触发的事件;
只能作用在可以获取焦点的元素身上;
1.onkeydown：键盘按下不抬起触发的事件;
用法：元素.onkeydown = function(){
//操作代码
}
2.onkeyup：键盘抬起触发的事件;
用法：元素.onkeyup = function(){
//操作代码
}
3.onkeypress：键盘按下不抬起触发的事件;
用法：元素.onkeypress = function(){
//操作代码
}
注意：当按下功能键的时候onkeypress不触发的;
获取键盘按钮的值：
1.keycode：事件对象下的属性;
用法：事件对象.keycode;
返回：一个十进制的数字，这个数字代表的就是当前按下的键;
获取功能键盘的值：都是事件对象下的属性;
1.ctrlKey：ctrl键的值;
2.shiftKey:shift键的值;
3.altKey:alt键的值;
返回值：都是boolean值，没有按键，返回false;有按键，返回true;
事件的默认行为：当触发某个事件的时候，浏览器会自动完成某些行为;
例如：浏览器页面有滚动条时，按空格键会自动翻下一页;
a标签点击有跳转窗口行为;
阻止默认行为的方法：
1> return false(ie7浏览器不兼容);
2> FF和chrome下：e.preventDefault;(ie浏览器不支持这个属性)
ie低版本：e.returnValue = false;
说明：部分事件不支持returnValue，具体需要测试;
3> 主要处理ie7的兼容,chrome不支持这种方法;
全局捕获：
元素.setCapture();
释放捕获：
元素.releaseCapture();
注意：全局捕获一般用在有一对事件里面。比如：鼠标抬起和鼠标按下
常见的默认行为:
1.ctrl+鼠标单击链接时，页面会新打开一个浏览器;
2.图片、链接，都有拖动的行为;
3.按下空格件滚动条和页面会向下滚动;
4.默认鼠标滚轴可以上下滚动;
右击鼠标出现菜单阻止方法：
oncontextmenu：不是右击事件;
当右击菜单出现的时候，触发的事件;
用法：document.oncontextmenu = function(){
//这里可以阻止后操作的代码
return false;
} //这样写就阻止了
鼠标滚轮事件:
ie和chrome：onmousewheel
FF：DOMMouseScroll;
说明：DOM开头的事件，属于DOM事件;
DOM事件,必须通过绑定的形式,才有作用,要使用addEventListener进行绑定;
判断出滚轮滚动的方向：
ie和chrome下：
事件对象.wheelDelta;
返回值：向上120 向下-120;
FF下：
事件对象.detail;
返回值：向上-3 向下3;
三十一.AJAX
含义：AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML）
ajax作用：利用js发送请求，获取数据,得到数据后，就可以根据数据结合DOM，
把数据渲染在页面中。就可以利用ajax做到无刷新操作数据。
ajax工作流程： 响应状态码
1. 初始化，得到一个ajax对象; 0
2. 建立连接，准备数据; 1
3. 发送数据; 2
4. 等待服务器响应(数据没完全发送); 3
5. 服务器响应完成，数据接收完成; 4
实例：
//1.得到ajax对象
var xhr =new XMLHttpRequest();
//2.建立连接，准备数据
xhr.open("get","./php/get.php",true);
//连接完成后做的事
xhr.onreadystatechange = function(){
if( xhr.status === 200 ){
xhr.responseText;//服务器返回的数据
}else{
alert( xhr.statusText );//
alert( xhr.status );
}
}
/*
xhr.onload = function(){
if( xhr.status === 200 ){
xhr.responseText;//服务器返回的数据
}else{
alert( xhr.statusText );//状态内容
alert( xhr.status );//状态码
}
};
*/
//3.xhr.send()进行3，4，5步骤
xhr.send();
方法说明：
1.XMLHttpRequest()：ajax对象
兼容问题：
1>XMLHttpRequest：支持标准和ie7以上浏览器，ie6不支持;
2>ActiveXObject("Microsoft.XMLHTTP")：支持ie6;
2.open(method,url,boolean)：建立连接
参数说明：
第一个参数：发送方式(get或post);
第二个参数：要发送的地址;
第三个参数：是否为异步(true-异步，false-同步),默认为异步;
3.send([data]);发送连接
参数说明：
1>get提交方式，send()不需要有参数;
2>post提交方式,需要传入查询的数据，send("user=leo");
4.onload():是标准浏览下提供的一个时间服务器响应完成触发的事件;
5.onreadystatechange():当ajax每进行一步都会触发这个事件;
在这个方法下，有readyState()方法;获取ajax每一步响应的状态码;
onload与onreadystatechange的兼容问题：
onload：只支持标准浏览器和ie9以上;
onreadystatechange：标准和ie9以下版本都支持;
6.post与get提交方式:
1> post：ajax中，post要注意两点;
1> post要设置"Content-Type"这个请求的类型;再将请求的数据输入到send()方法中;
2> post发送的数据要放在send方法中;
例：xhr.setRequestHeader( "Content-Type","application/x-www-form-urlencoded" );
xhr.send("user=leo");
2> get：ajax中，请求的数据拼到url地址的?后面，用&符号连接;
get和post的区别:
get：
1>发送的数据放在了地址的问号后面;
http://localhost/2015-08-25/php/get.php?user=leo&password=111111
2>数据的格式为：
属性=值
如果有多个数据
属性=值&属性=值&属性=值
3>由于get请求数据是写在了地址后面，每个浏览器对地址的长度有限制，
导致了get请求的数据有限，如果超出了浏览器规定的地址的长度，那会会导致get发送的数据不完整
4>get请求的数据放在了地址后面，由于浏览器的缓存，浏览器会记录住请求的地址，导致发送的数据就不安全
post：
1>数据不放在地址的后面,通过别的途径发送到服务器的
2>发送的数据大小理论上是没有限制的（服务器做了限制）
3>post是加密发送，相对安全;
7.encodeURI(str)：把字符转成URL编码;
例：encodeURI("测试");
8.decodeURI(str)：把URL编码转换成字符;
例：decodeURI("%E5%A6%99%E5%91%B3%E8%AF%BE%E5%A0%82");
三十二.JSONP
定义：json and padding;
作用：用来处理跨域的问题;
跨域：是指，只要域名，协议，端口有一个不同就产生了跨域访问;
同源策略：是指，域名，协议，端口相同。
域名：域名就是ip地址的小名（外号）;
如果要域名和ip绑定，需要DNS解析
域名分为：
主域名：https://www.baidu.com/
主域名下分为：(最多就到三级域名)
二级域名：http://news.baidu.com/
三级域名：http://29.classcase.sinaapp.com/
协议：不同服务器之间通信的一种约定的协议;
例如：
http/https:访问互联网上的页面、ftp、file
端口：例如：http/https 80、ftp 21 22 23，这些都是端口;
cookie:(document下的一个属性,可读可写)
用法：document.cookie
例：document.cookie = "user=tom;age=30";
cookie说明：
1. cookie是和域名有关系，各个域名下的cookie是互不影响的，不能访问到其他域名下的cookie;
2. 存的cookie是有过期时间，一般是在浏览器关闭后cookie就清除了;
如何延长cookie的过期时间：
可以设置过期时间,保留到未来的事件然后消失要删除cookie，就设置一个过去的时间;
方法：通过new Date();设置时间，使用cookie中的expires参数来设置过期时间;
例：var date = new Date();
var newDate = date.setDate(2);
document.cookie = "user=tom;expires=newDate";
3. 存的cookie的条数，根据浏览不同存储的 数量也不同;
localStorage:(用法：类似cookie)
localStorage下面的方法:
1>setItem(key,value):设置localStorage项
2>getItem(key):通过key值获取value
3>removeItem(key)：删除localStorage项
4>clear():清空掉所有的localStorage项
5>storage事件：
不会触发本窗口监听的storage事件
三十三.正则表达示
定义：规则表达式，描述一套规则的工具;
用法：对字符串进行查找、匹配;
创建正则的方法：
1>var re = new RegExp();//new对象的写法
2>var re = /\d/;//字面量的写法
修饰符i和g的说明：(都写在最后一个/的后面)
i：忽略大小写; 例：var re =/A/i;
g：全局搜索;(匹配到所有符合表达式的字符，默认为非全局搜索，只搜索一次;)
例：var re =/\d/g;
正则的相关方法：
1>test()：检测字符串是否匹配正则中的内容 如果匹配有，返回true；否则返回false;
用法：var re = new RegExp();
var str ="abcd";
re.test(str);
参数：传一个参数，传要验证的字符串;
2>search()：检测字符串首次出现的位置;
用法：字符串1.search(字符串2 || 正则):
从字符串1中搜索字符串2或正则的内容，在字符串1中首次出现的位置
参数：参数可以改字符串，或者是正则表达式;
与indexOf的区别：
1)indexOf：只能传入字符串;
2)search：既可以传入字符串也可以穿入正则;
3>match()：检测字符串匹配的内容，匹配到内容，就以数组返回，否则返回null;
用法：字符串1.match( 字符串2 || 正则 )：
从字符串1查询字符串2或正则匹配的内容，
返回值：如果有，把结果已数组的形式返回；如果没有，返回的是null;
4>replace()：替换相应的字符串;
用法：字符串1.replace(字符串2 || 正则,字符串3 || 函数):
从字符串1中匹配到字符串2或者正则中的内容，替换成字符串3或函数的返回值;
返回值：替换后新字符串;
replace()第二个参数是函数参数时的说明：
1)这个函数的第一个参数是整个正则表达式匹配的内容;
2)从第二个参数开始，就是这个正则表达式中子表达式所匹配到的内容;
作用：限制范围或提权
例:var str="sdfsssddffss";
var str2 = str.replace(/(s)(f)/,function($0,$1,$2,$3...$n){
});
$0：返回的是匹配到的字符;
如：/s/ 匹配到的字符串s;
$1-$n：返回的是每一个分组匹配到的字符;
如：/(s)(f)/ $1代表的是(s)匹配到的，$2代表的是(f)匹配到的;$3--$n依次类推;
转义字符:
\+：普通的字符组合，代表一个或一段特殊的内容
\n：换行符
\r：回车符
\t：制表符
量词：
{n}：重复n次（）
{n,m}：最少重复n次 最多m次
{n,}：最少n次，最多不限
+：最少重复1次，最多不限 {1,}
?：最少0次，最多1次 {0,1} /\d?/
*：最少0次 最多不限 {0,}
匹配中文:
escape():根据编码转换成中文;
例：console.log(escape("\u4E00"));
unescape("中国"):根据中文转换成编码;
例：console.log(unescape("中国"));
特殊含义字符：
\d: 0-9数字
\D: 非数字
\w: 数字 字母 下划线
\W：非数字 字母 下划线
\s：匹配一个空格
\S: 非空格
\b: 边界符 一个字符的左边或右边是非\w就存在一个边界符
\B：非边界符
\1: 重复第一个子项中的内容 \2\3\4\5\n
三十四.面向对象
类：对一类具有相同的特征的抽象化描述(ECMAscript5没有类，ECMAscript6有类);
对象：类的实例化;
实例化对象的方法：通过关键字new，来实例化一个对象;
例：var person = new Person();//这就完成了对象的实例化
构造函数：
定义：由于js中是没有类的概念，如果要自定义一种数据类型
借助于函数定义相关的类型，这个函数称之为 构造函数;
创建方法：
例：function Person(userName age){//构造函数名都约定是首字母大写
this.userName = userName;
this.age = age;
this.city="SH";
}
使用构造函数：(通过实例化方式)
var person = new Person("张三",34);
console.log(person.userName);//张三
console.log(person.age);//34
实例化构造函数的过程:
1. 当用new 调用某个函数的时候，在这个函数里面会隐式的创建一个新的对象;
2. 把函数中的this指向创建出来的新对象;
3. 隐式的return 出这个新创建的对象;
在函数中使用return：
return 后面是简单类型的值，new 函数之后得到的是内部隐式创建的那个对象;
return 后面是对象，new 函数之后的到的就是return后面的对象;
对象原型(prototype)：
定义：只要定义一个函数，那这个函数身上就自动有一个prototype这个属性，这个属性对象的值为Obejct类型;
说明：prototype对应的对象不是一个空的对象，有一个属性constructor，constructor对应的值就是构造函数;
__proto__属性：
定义：对象上的一个属性，__proto__对应值，为创建这个对象的构造函数的原型;
访问对象上的属性或方法的过程：
首先当前对象自己身上找这个属性或方法,如果没有找到，
那么再去当前这个对象下的__proto__指向的原型对象去找属性或方法。
标签：
原文地址：http://www.cnblogs.com/nemoDuoo/p/4955737.html
