JS基础笔记集

three.js:3D框架  svgtween:动画框架

一.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.比较运算：== === >= 如果前面为真，返回后面的值（无论真假都返回）；             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"

      比较类: >, 数字和数字比较的时候 直接比较两个数值;            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循环;

                语法：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}：重复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: 非空格

                : 边界符   一个字符的左边或右边是非w就存在一个边界符                B：非边界符

                1: 重复第一个子项中的内容   2345

三十四.面向对象           类：对一类具有相同的特征的抽象化描述(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__指向的原型对象去找属性或方法。

 三十五. in 运算符

　　当“对象”为数组时，“变量”指的是数组的“索引”；

　　当“对象”为对象是，“变量”指的是对象的“属性”。