码迷,mamicode.com
首页 > Web开发 > 详细

JS基础笔记集

时间:2015-11-11 13:14:52      阅读:361      评论:0      收藏:0      [点我收藏+]

标签:

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__指向的原型对象去找属性或方法。

 

JS基础笔记集

标签:

原文地址:http://www.cnblogs.com/nemoDuoo/p/4955737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!