zoukankan      html  css  js  c++  java

  • 万物皆对象的JavaScript

    写在前面：

              经过前段时间对于H5语言的学习，开始慢慢适应现在的生活节奏和代码语言。从一开始的毫无头绪到现在可以大概地写出部分的网站静态页面，用了两个周的时间。作为一个之前从未接触过计算机语言的初学者来说，在感受着代码语言神奇的同时也更期待可以更深入的了解和掌握更多的相关知识，个人能力有限，但尽量做好眼前的每一件事，与大家共勉。

    Java Script 是世界上最流行的编程语言。

    JavaScript 是脚本语言

    JavaScript 是一种轻量级的编程语言。

    JavaScript 是可插入 HTML 页面的编程代码。

    JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

    JavaScript 很容易学习。

     【使用JS的三种方式】


            1、在HTML标签中直接使用，直接内嵌JS（但是不提倡使用）；
               >>>不符合W3C关于内容和行为分离的要求；
              eg:
               <button onclick="alert('你还真的敢点啊~')"> 有本事点我啊！</button>
               
            2、在HTML页面中使用<script> </script>标签包裹JS代码；  
                >>>script标签可以放到页面的各种位置；
              eg:
                <script type="text/javascript">
                JS代码
               </script>
             3、引入外部的JS文件使用<script> </script>标签；
                 eg:
                 <script language="JavaScript" src="JS/01.js"></script>
                 
     [注意事项]


                 ①、<script> </script>可以嵌入到页面的任意位置，但是位置的不同将会导致JS代码的执行顺序不同；
                     比如：<script> </script>放到<body></body>前面，则JS文件会在页面加载之前就执行。
                 ②、引入外部的JS代码    <script> </script> 必须是成对出现的标签，而且标签内部    不能再用任何的JS代码。
                 
              
              
    【tips】
            
              1、JS中的多行注释。 （ Ctrl+shift+/ ）
               
               
              2、JS中的单行注释。（Ctrl+/ ）
             

    PART-1 JS中的变量和输入输出

    【JS中的变量】


            1、JS中的变量声明写法：(变量的作用域)
                
               var num=10; 使用var声明的变量，属于局部变量，只在当前的区域之内有效；
               
               num=10;  不用var声明的变量，默认为全局变量，在整个JS文件中都有效；
               
               var x=8,y,z=10; 使用一行语句，同时声明多个变量。     上式中，y属于已经声明，但是未赋值状态，结果为undefined;
               
               
               [声明变量的注意事项]
               
               ①、JS中，所有变量的声明均使用var关键字。变量具体是什么数据类型，取决于给变量赋值的类型；
               
               ②、JS中，同一个变量可以在多次不同的赋值中，修改变量的数据类型。
                      var a=10; //在初始声明时，a属于整数型；
                      a="haha"； //重复赋值时，整数型的a被修改为字符串类型；
                 
               ③、变量可以使用var声明，也可以不使用；
                  [区别]使用var声明的变量，属于局部变量，不用var声明的变量，默认为全局变量；
               
               ④、只用var声明，但是不赋值，结果为undefined;
               
                       例如：  var a; //  a为undefined；
                       但是如果不使用var，也不进行赋值，执行结果会报错。
                     
               ⑤、同一个变量名可以多次使用var声明；
               
                      但是后面的var没有什么用了。第二次在使用var声明时，只会被理解为普通的赋值操作；
                       
            2、变量名的命名要求：
               ①、变量名只能由字母/数字/下划线组成。
               ②、开头不能是数字。
               ③、变量名区分大小写，大写字母和小写字母为不同变量。
               
            3、变量名的 命名规范：
               ①、要符合小驼峰法则：首字母小写，之后每个单词的首字母大写；myNameIsWangQiang; √
               
               ②、或者使用匈牙利命名法：所有字母小写，单词之间用下划线分开； my_name_is_wang_qiang;√
               ③、 mynameiswangqiang √  但是不规范；
                
            4、   JS中的数据类型: （均用var引用，但是赋值类型不同）  ("▔□▔)"重点！！！
               ①、Undefined:已经使用var进行了声明，但是未进行赋值；eg:var=a； 此时a为未赋值的变量，运行显示undefined;
               ②、Null:表示空的引用；
               ③、Boolean：布尔类型:只有两个值：true、false,表示真假；
               ④、Number:数值类型。可以为整数，也可以为小数；
               ⑤、String:字符串类型;用"或"包裹的内容，称为字符串；
               ⑥、Object:对象类型；
               
               
            5、【常用的数值函数】
            
               ①、isNaN（）;判断一个变量或者常量是不是NaN（not a number）;
                        使用isNaN（）;判断时会尝试使用number()函数进行转换，如果最终结果能够转换为数字，则不是NaN.结果为false；
               
               ②、Number（）：将其他类型的数据尝试转换为数值形式；      

     

                  [字符串类型]


                  >>>字符串为纯数值字符串，这会转换成相应的数值；"111">111
                  >>>字符串为空的字符串，会转为0；  "">0
                  >>>字符串包含其他任何类型的字符时，均不能进行转换；"1a">NaN
                  
                  [Boolean类型]     ture>>1  false>>0
                  
                  [Null/Undefined类型]     Null>0   Undefined>NaN
                  
                  [Objiect类型]  待讲
                  
               ③、ParseInt()  将字符串转换成整数类型；！！！
               
                  >>>纯数值字符串，能转。"12">12 "12.9">12  小数在转换时直接被抹掉，不进行四舍五入；
                  >>>空字符串，不能转。"">NaN
                  >>>包含其他字符的字符串，会截取第一个非数值字符串前的数字部分；"123a456">123；  "a123">NaN
                  >>>ParseInt() 只能转字符串，转其它类型都是NaN;
                  
                 【Number（）与ParseInt() 的区别】("▔□▔)"重点！！！
                  
                  ①、Number（）能转所有类型的数据类型，ParseInt() 只能转字符串；
                  
                  ②、两者在转字符串时，结果不完全相同。
                  
               ④、ParseFloat（） :将字符串转换为数值类型；！！！
               
                       转换规则与PaseInt相同，如果有小数，则保留小数点。如果没有小数，则依然是整数。


               ⑤、TypeOf()   检测变量的数据类型：
                           字符串>string       数值>Number         true/false>Boolean
                         未定义>Undefined    对象/Null>object      函数>function
                           
        【JS中常用的输入输出语句】
               1、document.write();将括号中的内容打印输出到浏览器的屏幕上；
                           使用时需要注意除了变量常量外的所有内容必须要放到""中。变量和常量必须放到""外面。
                           如果同时有变量和常量，必须使用+连接。
                   eg:document.write("右手中的纸牌 "+right+" <br/> <br/>");
               2、alert（）使用弹窗输出；
                          弹窗警告，（）中的内容必须 与上述要求相同。
               3、prompt 弹窗输入；
                  接受两部分参数：
                  ①、输入框上部的提示内容，可选。
                  ②、输入框里面的提示信息，可选。
                                             当只写一部分时，表示输入框上部的提示内容。
                                              可以定义变量，接受输入的内容。点击确定按钮，变量将被赋值为输入的内容；
                                              点击取消按钮，变量将被赋值为Null;    
                                              输入内容时，默认接收的数据类型都是字符串！！！          
                  eg:  
                    var name= prompt("请输入你的名字","王强") ;
                          alert("您输入的是"+name);
                 

    PART-2 JS中的运算符

    1、  算术运算(单目运算符)

                 + 加 、-减、*乘、 /除、 %取余数、    ++自增 、--自减
                 
                 ①、+ ： 有两种作用:连接字符串、加法运算
                                 当 + 两端全部为数值时，进行加法运算。当 + 两侧中任意一边存在字符串时，就会起到连接字符串的作用，链接之后的结果为字符串。
                                 除了+之外，其余的符号在运算时会尝试将左右变量用Number（）将它们转换成数字。
                                
                 ②、/ ： 结果会保留小数点 。不限制位数。
                 ③、++ :自增运算符，将变量在原有的基础上面+1；
                                           
                                            【a++和++a的异同】
                       >>相同点：  无论a++还是++a，运算之后的值均会+1；
                       >>不同点：a++先用a的值去运算，再把a+1;
                               ++a先把a+1,再用结果去运算；
                       
                       eg:var a=3,b,c;
                          b=a++ +2;
                          c=++a +2;
                          
                        >>>a=5 , b=5 , c=7
                          
                     
                 ④、-- : 自减运算符，将变量在原有的基础上-1；
                 
            2、赋值运算
            
                 =赋值       +=  -=  *=  /=  %=
                 
                 ①、+=：   a+=b; 相当于a=a+b。 但是推荐使用前者，运算速度快；
                 eg:
                    var a=3;
                    a +=3;
                    alert(a);   
                    >>6
                   
            3、关系运算
            
                 ==等于、 ===全等、  ！=不等、！==不全等、>、<、>=、<=
                     
                 ①  关系运算符运算之后的结果只能是Boolean类型;
                 ②  判断一个数字属否处于某个区间必须用&&连接;
                     a<10 && a>0  √
                     10>a>0       ×
                 ③  === 为严格等于，要求不但要类型相同，值也必须相同；类型不同，结果直接为false；相同的话再进行下一步运算；
                 ④  ==  为等于 ， 类型相同，与===效果一样；类型不同时，会先尝试用Number()将两边函数转换为数字，再进行运算。
                                                但是存在各别的个例： Null===false; ×
                                      Null==Undefined; √
                     
          
           4  条件运算符(多目运算)
            
                 a>b?true:false
                 
                 有两个重要符号：     ?   :
                 当？前面部分运算结果为true时，执行：前面的代码；
                 当？后面部分运算结果为false时，执行：后面的代码；
                 冒号两边可以为数值，则整个式子可用于赋值。
                 冒号两端可以为代码块，将直接执行代码。
                 多目运算符号可以多层嵌套；
                 
            5、位运算符、 逻辑运算符
            
                && 与、||或、  ！ 非
                
                 &&：两边都成立，结果为true；
                 ||:两边有一边成立，结果为true；
                 && 和 ||同时存在时候，&&的优先级高；



            6、运算符的优先级：
            () 小括号优先级最高
            ! ++ --
            * / %
            + -
            > < >=  <=
            == !=
            &&  //   && 和 ||同时存在时候，&&的优先级高；
            ||
            = += -= *= /= 各种赋值优先级最低；
            
      

    PART-3   JS中的分支结构

    【if-else结构】
        1、结构写法:
                if(判断条件){
                   条件为true时执行if的代码
                }
                else{
                    条件为false时候执行else的代码
                }
          2、注意事项：
            ①、else{}语句块可以根据情况进行省略；
           ②、if和else后面的{}可以省略，但是省略了之后，它们之后只能跟一条语句，所以不建议省略{}；
        3、if的()中的判断条件，支持的数据类型：                                重点！！！
          ① Boolean类型:true-真 ;false-假；
            ② String:空字符串为假，非空字符串为真；
         ③ Number:0为假,一切非零数字为真;
          ④ null/Undefined:全为假;
          ⑤ Object:全为真;
                               
        【else-if结构/多层if结构 /阶梯if结构】

            1、结构写法:    
               if(条件一)    {    }
                else if(条件二){   }
                           else{    }
             2、多层if结构中，各个判断条件之间互斥，执行选择符合条件的第一条进行执行，执行之后跳出结构体系，不再继续分支；    
           
         【嵌套if结构】
          1、结构写法：
            if(条件一){  条件一成立
                    if(条件二){ 条件一成立，并且条件二也成立； }  
                     else{   条件一成立，但是条件二不成立；          }
                    }    
            else{ 条件一不成立     }
          2、在嵌套if结构中，如果省略{}，则else{}结构属于距离自己最近的if{}结构；
          3、嵌套结构可以多层嵌套，但是一般不推荐超过三层；能用多层if就不要用嵌套if；

    【switch case结构】
         1、结构写法：

               var num=2;
                switch (num>3){
                    case true:
                        document.write("第一个case")
                        break;
                    case false:
                        document.write("第二个case")
                        break;
                    case 3:
                        document.write("第三个case")
                        break;
                    default:
                        document.write("case都不成立，执行default")
                       break;
                }
          2、注意事项：
             ① switch结构中的（）中的表达式可以使用JS支持的各种数据类型。
             ② switch（）结构在进行判断时，使用===判断。
             ③ case后面的表达式可以是各种数据类型，但是值要求各不相同，否则也只会执行第一个case;
             ④ break作用 ：执行前面case代码之后，跳出当前的switch结构；
                  缺少break的后果：switch只会判断一次结果，从第一个正确的case项开始，执行后面所有的case和default；
             ⑤ switch结构在进行判断的时候，只会判断一次正确答案。当遇到正确的case之后不再判断后续的项目。
             ⑥ switch结果执行的效率要比多重if结构快，所以在多路分支结构中优先使用switch结构。

    PART-4  JS中的循环结构

    【while() {}循环结构的步骤】
                  1、声明循环变量
                  2、判断循环条件
                  3、执行循环体操作
                  4、更新循环变量
                        然后循环执行2-4，直到条件不成立是跳出循环。

            eg:

                    var num=1;  //声明循环变量
                   while (num<=10){  //判断循环条件
                    document.write(num+"<br />");//执行循环体操作
                    num++;  //更新循环变量
                   }


                
                  while循环()中的表达式，运算结果可以是多种类型，但是最终都会转为真假，转换规则同if结构
                  （1）、boolean类型：true为真，false为假
                  （2）、string类型：所有非空字符串为真，空字符串为假
                  （3）、number类型：一切非零数字为真，零为假
                  （4）、null、undefined、NaN：全为假
                  （5）、object类型：全为真。
                                               

    【 while循环与do-while循环的区别:】
    while循环是先判断再循环;
    do-while循环是先执行再判断,即便是条件不成立,该循环也最少执行一次.
     
    var num=10;
    do{
    document.write(num+"<br />");
    num--;
    }
    while(num>=0);
     
    【for循环】
    1、for循环有三个表达式：
    ① 声明循环变量;
    ② 判断循环条件;
    ③ 更新循环变量;
    三个表达式之间用;分隔开,三个表达式可以省略,但是两个分号不能省略.
    2、for循环的执行特点:先判断再执行，和while相同；
    执行顺序：1、初始语句 2、执行条件是否符合？ 3、循环体 4、增加增量 ；
    3、for循环三个表达式均可以由多部分组成，第二部分多个判断条件用&& 、||连接，其他部分可以用，连接。
     
     
    var num =1;
    while (num<=10){
    document.write(num+"<br />")
    num++
    }
    将上部while循环改为for循环如下:
    for(var num=1; num<=10;num++){
    document.write(num+"<br />")
    }
    【循环控制语句】
    1、break：跳出本层循环，继续执行后面的语句。
    如果循环有多层嵌套,则只能跳出来一层循环；
    2.continue：跳过本次循环剩余的代码继续执行下一次循环；
    ①、对于for循环：continue之后执行的语句，是循环变量更新语句i++；
    ②、对于while、do-while循环，continue之后执行的语句，是循环条件判断。
    因此在使用这两个循环时，必须将continue放到i++之后使用。否则，continue将跳过i++， 变成死循环。
     
     

    PART-5  JS中的循环嵌套

    循环嵌套的特点：
                  外层循环转一次，内层循环转一圈
                  外层循环控制行数，内层循环控制每行元素个数
    外层循环控制行数,内层循环控制每行的元素个数
     
     
    图形题做题思路:
     
    1、确定图形有几行，行数即为外层循环次数；
    2、确定每行中由几种元素组成，有几种元素即表示有几个内层循环。
    3、确定每行中每种元素的个数，这个个数即为每个内层循环的次数。
    tips:如果每种元素的个数不固定,则找出每种元素的个数,与行号的关系,这个关系表达式,就是内层循环的最大值.
            
     

    PART-6  JS中的函数和BOM

    一、函数定义：
    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
    当调用该函数时，会执行函数内的代码。
    可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
    提示：JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
    【函数的声明及调用】
    1、函数的声明格式：
    function 函数名 (参数1，参数2，参数3...){
    函数体代码
    return 返回值
    }
     
    function saySth(str,color){
    document.write("<div style='color:"+color+";'>"+ str+"</div>");
    }
     
    函数的调用：
    ①、直接调用：函数名(参数1的值，参数2的值，参数3的值...);
     
    saySth("hahaha","blue");
     
    ②、在HTML标签中直接使用事件名="函数名()"
    <button onclick="saySth('hahaha','blue')">点击按钮，打印内容</button>.
     
    2、函数的注意事项：
    ①、函数名必须要符合小驼峰法则：首字母小写之后每个单词首字母大写；
    ②、函数名后面的括号中，可以有参数也可以没有参数，分别称为有参函数和无参函数。
    ③、声明函数时的函数列表，称为形参列表，形式参数。（变量的名字）
    function saySth(str,color){}
    调用函数时的列表，称为实参列表，实际参数。（变量的赋值）
    saySth("hahaha","blue");
    ④、函数的形参列表个数和实参列表的个数没有实际联系；
    函数参数的个数，取决于实参列表;
    如果实参列表的个数<形参列表的个数，则未赋值的形参，将为Undefined;
    ⑤、函数可以有返回值，使用Return返回结果；任何代码不能写在return之后；
    调用函数时，可以使用一个变量接受函数的返回结果。如果函数没有返回结果，则接受的结果为Undefined;；
    ⑥、函数中变量的作用域：JS中只有函数有作用域；
    在函数中，使用var声明的变量为局部变量只能在函数中使用。
    不使用var声明的变量为全局变量在函数外也能访问。
    函数的形参列表默认为函数的局部变量，只能在函数中使用。
    ⑦函数的声明与函数的调用没有前后之分，可以在声明函数之前调用函数。
    eg:
    func();
    function func(){};
     
     
     
    二、 【匿名函数的声明使用】
     
    function(){ }
    1、声明一个匿名函数，直接赋值给某一个事件；
    window.onload=function(){}
     
    2、使用匿名函数表达式。
    将匿名函数，赋值给一个变量。
    声明：var func=function(){};
    调用：func();
    注意：使用匿名函数表达式时，函数的调用语句，必须放在函数的声明语句后面！！！
     
    3、自执行函数：
    ①、可以使用多种运算符开头，但是一般用！(结构清晰，推荐使用!)
    !function(形参列表){
    alert(123;)
    }(实参列表)
    ②、使用()将函数及函数后的调用()包裹起来就可以调用了。(能够表明匿名函数与调用的()是一个整体，是官方推荐的写法！)
    (function(形参列表){
    alert(123;)
    }(实参列表))
    ③、使用()包裹函数部分：(不推荐使用)
    (function(){
    alert(123)
    })()
     
    【函数的内部属性】
    一、Arguments对象：
    ①、作用：用于储存调用函数时的所有实参，
    当我们调用函数，并使用实参赋值时，实际上参数列表已经保存到了srguments数组中，
    可以在函数中使用 arguments[n]的形式调用，n从0开始；
     
    ②、arguments数组的个数取决于实参列表，和形参列表无关。
    但是，一旦第N个位置的形参、实参、arguments都存在时，形参将与arguments绑定，同步变化；
    即在函数中修改形参的值，arguments也会改变，反之亦然。
     
     
     
    ③、arguments.callee 是arguments的重要属性。表示arguments所在函数的引用地址。
    在函数里面，可以使用arguments.callee()调用函数本身。
     
    在函数内部，调用函数自身的写法叫做递归。
     
    递归分为两部分：以递归调用语句为界限，可以将函数分为上下两部分
     
    递：↑ 当函数执行上半部分，遇到自身的调用语句时，继续进入内层函数，在执行上半部分。直到执行完最内层函数。
    归：↓ 当内层函数执行以后，在从最内层函数开始，逐渐执行函数的下半部分。
    当最外层函数执行时，遇到自身的调用语句，会进入内层函数执行，而外层函数的后半部分暂不执行。
    直到内层函数执行完以后，在逐步向外执行。
    var num = 1;
    function func(){
    console.log(num);
    num++;
    if(num<=4){
    arguments.callee();
    }
    num--;
    console.log(num);
    }
    func();
     
     
     
     
    [JS代码的执行顺序问题]
    JS代码在运行时会分为两大部分：检查装载部分、执行阶段；
    检查装载阶段：会先检查代码的语法错误，进行变量、函数的声明；
    执行阶段：变量的赋值、函数的调用均为执行阶段；
     
    以下代码为例：
    consoloe.log(num); >>undefined;
    var num=10;
     
     
    func1();
    function func1(){ }; >>函数可以正常执行；
     
    func2();
    var func2 = function(){ }; >>函数不能执行，打印func2时显示undefined;；
     
    原因如下：代码执行顺序如下：
     
    ---------检查装载阶段---------
    var num
    func1();
     
    var func2
     
    ---------代码执行阶段---------
    consoloe.log(num); >>undefined; var num=10;
    function func1(){ };
    func2(); = function(){ }
     
     
     
     
    二、JS中的BOM：
     
    一、【screen 对象】
     
    屏幕宽度-- console.log(screen.width)
    屏幕高度-- console.log(screen.height)
    可用宽度-- console.log(screen.availWidth)
    可用高度-- console.log(screen.availHeight) =屏幕高度-底部状态栏高度；
     
     
    二、【location 对象】
     
    1、 取到浏览器的URL地址信息；
    完整的URL路径：
    协议名：//主机名(ip地址)：端口号/文件所在路径?传递参数 (name1=value1&name2=value2)#锚点
    eg:
    http://127.0.0.1:8020/wenjianjia/index.html?name1=value1&name2=value2#aaa
     
     
    console.log(location)
    console.log(location.href);//返回当前完整路径；
    console.log(location.protocol);//返回协议名；
    console.log(location.host);//返回主机名+端口号；
    console.log(location.hostname);//返回主机名；
    console.log(location.port);//返回端口号；
    console.log(location.pathname);//文件路径；
    console.log(location.search);//返回?开头的参数列表；
    console.log(location.hash);//返回#开头的锚点；
     
     
    2、 使用JS跳转页面的方法：
    Window.location="http://www.baidu.com";
     
    细分几种使用location跳转页面的类型：
    location.replace("http://www.baidu.com"); 使用新的文档替换当前文档，替换以后，不能退回。
    location.assign("http://www.baidu.com");加载新的文档，加载之后，可以退回。
    location.repload();重新加载当前页面，即刷新页面；
    ①、 location.repload(true) 强制刷新页面，从服务器端重新加载页面----Ctrl+f5;
    ②、 location.repload() 在本地刷新当前页面---f5
     
     
    三、【history 浏览历史】
     
    history.length 浏览历史列表的个数;
    history.back()； 后退
    history.forward(); 前进
    history.go(); 跳转到浏览历史的任意一个页面；0表示当前页面；-1表示后一个页面。1表示前一个页面；
     
    四、【navigator 浏览器信息】
     
    了解即可
    console.log(navigator);检测浏览器的各种插件系统信息。
     
    navigator.plugins;检测浏览器里安装的各种插件；
     
    五、【Window对象的常用方法：】
    >>>在window对象中的所有属性和方法均可以省略window关键字；
    1、alert() 弹出一个警告提示框;
    2、prompt() 弹窗接受用户的输入；
    3、confirm() 弹出带有"确定"/"取消"按钮的提示框，点击按钮返回true/false;
    4、close() 关闭当前浏览器窗口，在个别浏览器中，脚本语言不得关闭非脚本打开的窗口。
    只能关闭使用超链接、window.open()打开的窗口；
    5、window.open()打开一个新窗口。
    参数1：新窗口的地址
    参数2：新窗口的名字，没卵用，很鸡肋；
    参数3：新窗口的各种属性设置："属性1=值1，属性2=值2，...."
     
     
    6、setTimeout() 设置延时多久执行，只执行一次；
    接受两个参数：需要执行的函数、延迟时间。
    7、setInterval()设置定时器，每隔n毫秒执行一次；
    接受两个参数：需要执行的函数、间隔时间。
     
    8、clearTimeout();清除延时器
    clearInterval();清除定时器
    使用方法：设置延时器或者定时器时，可以使用变量接受定时器ID；
    var id = setInterval;
    调用clearInterval时，将id传入，即可消除对应的定时器；
    clearInterval(id);
     
     

    PART-7  JS中的DOM操作

    文档树（Document Tree）是HTML页面的层级结构。
    它由元素、属性和文本组成，它们都是一个节点（Node），就像公司的组织结构图一样。
     
    【DOM树节点】
    DOM节点分为三大类：元素节点、文本节点、属性节点；
    文本节点、属性节点属于元素节点的子节点。操作时，均需要取到元素节点再操作子节点；
    可以使用getElement系列方法，取到元素的节点；
     
    【查看元素节点】
    1、getElementById：通过ID取到唯一节点；如果ID重名，只能取到第一个；
     
    getElementsByName() 通过name属性
    getElementsByTagName() 通过标签名
    getElementsByClassName() 通过class名
     
    >>>获取元素节点时，一定要注意：获取节点的语句，必须在DOM渲染之后执行。
    可以有两种方式实现：
    ①、将JS代码写在<body></body>标签之后；
    ②、将代码写到window.onload函数之中；
    >>>后面三个getElements，取到的是数组格式，不能直接添加属性，而应该取出数组的每一个单独操作。
    例如：
    getElmentsByName("name1")[0].onclick=function;
     
    【查看/设置属性节点】
    1、查看属性节点：getAttribute("属性名");
    2、设置属性节点：setAttribute("属性名","新属性值");
     
    >>> 查看和设置属性节点，必须先取到元素节点，才能使用。
    >>> setAttribute();函数在IE浏览器中可能会存在兼容性问题。
    比如在IE中不支持使用这个函数设置style/onclick等样式属性和事件属性。
     
    >>> 我们推荐使用点符号法替代上述函数：
    eg: dom1.style.color="" dom1.onclick="" dom1.src=""
     
    【总结-JS修改DOM节点的样式】
    1、 使用setAttribute()设置class和style属性，但是存在兼容性问题，不提倡
    div.setAttribute("class","cls1");
     
    2、 使用.className直接设置class类,注意是className而不是.class：
    div.className = "cls1";
     
    3、 使用.style设置单个属性，注意属性名要是用驼峰命名法：
    div.style.backgroundColor = "red";
     
    4、 使用.style 或 .style.cssText 设置多个样式属性：
    div.style = " color:yellow;"
    div.style.cssText = " color:yellow;" √
     
    【查看设置文本节点】
    innerText: 取到或设置节点里面文字内容；
    .innerHTML: 取到或设置节点里面的HTML代码；
    .tagName: 取到当前节点的标签名。 标签名全部大写显示。
     
    【根据层次获取节点】
    1 .childNodes： 获取元素的所有子节点。包括回车等文本节点。
    .children: 获取当前元素的所有元素节点(只获取标签)。
    2 .firstChild: 获取元素的第一个子节点。包括回车等文本节点。
    .firstElementChild: 获取元素的第一个子节点。不包括回车等文本节点。
    .lastChild: 获取元素的最后一个子节点。包括回车等文本节点。
    .lastElementChild:
     
    3 .parentNode: 获取当前节点的父节点。
     
    4 .previousSibling: 获取当前节点的前一个兄弟节点；包括回车等文本节点。
    .previousElementSibling:
     
    5 .nextSibling: 获取当前节点的后一个兄弟节点；包括回车等文本节点。
    .nextElementSibling:
     
    6 .getAttributes: 获取当前节点的属性节点。
    【创建并新增节点】
    1. document.createElement("标签名")：创建节点 。需要配合 setAttribute设置各种新的属性；
    2. 父节点.appendChild(新节点)：末尾追加方式插入节点
    3. 父节点.insertBefore(新节点,目标节点)：在目标节点前插入新节点.
    4. 被克隆节点.cloneNode(true/false)：克隆节点
    >>> 传入true： 表示克隆当前节点，以及当前节点的所有字节点；
    >>> 传入false或不传： 表示只克隆当前节点，而不克隆子节点。
     
    【删除或替换节点】
    1. 父节点.removeChild(被删节点): 删除父节点中的子节点；
    2. 父节点.replaceChild(新节点,老节点): 使用新节点，替换掉老节点。
     
     
     
    [表格对象]
    1、 rows属性： 返回表格中的所有行，是一个数组格式；
    2、 insertRow(index): 在指定位置插入一行，index从0开始；
    3、 deleteRow(index): 删除指定的一行，index从0开始；
     
    [行对象]
    1、 cells属性： 返回这一行中的所有单元格，是一个数组格式；
    2、 rowIndex属性： 返回这一行是表格中的第几行，从0开始；
    3、 insertCell(index): 在这一行指定位置，插入一个单元格，index从0开始；
    4、 deleteCell(index): 删除这一行的指定单元格，index从0开始
    *
    [单元格对象]
    1、 cellIndex属性： 返回这个单元格是本行的第几个，从0开始；
    2、 innerText innerHTML align className
     

    PART-8  JS中的事件

     
    【JS中的事件分类】
    1、鼠标事件
    olick/dblclick/onmouseon/onmouseover.....
    2、HTML事件
    onload/onscroll/onsubmit/onchange/onfocus....
    3、键盘事件
    keydown:键盘按下时触发
    keypress:键盘按住时触发
    keyup:键盘抬起时触发
     
    【注意事项】
     
    ① 执行顺序：keydown → keypress → keyup;
    ② 当长按住不松开时，会循环执行keydown → keypress;
    ③ 有keydown并不一定有keyup，当事件触发的过程中，鼠标将光标移走，将没有keyup；
    ④ keypress只能捕获键盘上的数字、字符、符号键，不能捕获各种功能键，而keydown和keyup可以；
    ⑤ keypress支持区分大小写，而keydown/keyup并不支持；
     
    【确定触发的按键】 重点！！！
    ① 在触发的函数中传入一个参数e，表示键盘事件；
    ② 使用e.keyCode，取到按键的Ascii码值，进而确定触发按键；
    ③ 所有浏览器的兼容写法(一般并不需要)
     
    var evn = e ||event；
    var code = evn.keyCode||evn.which||evn.charCode;
     
    [判断组合按键的方式]
    var isEnt = false,isAlt=false;
    document.onkeydown = function (e) {
    if (e.keyCode == 13) isEnt = true;
    if (e.keyCode == 18) isAlt = true;
     
    if(isEnt = true&&isAlt = true){
    alert("您按了回车键+Alt键")
    }
    document.onkeyup = function (e) {
    if(e.keyCode==13) isEnt=false;
    if(e.keyCode==18) isAlt=false;
     
    }
    }
    附ASCI码表：
     
    【JS中的DOM0事件模型】
     
    1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；又叫行内绑定；
    eg:
    <button onclick="func()">DOME0内联模型</button>
     
    优点：使用方便；
    缺点：违反了W3C关于HTML与JS分离的基本原则；
     
    2、脚本模型：在JS脚本中，取到某个节点并添加事件属性；又叫动态绑定；
    优点：实现了W3C关于HTML与JS分离的基本原则；
    缺点：同一个节点只能绑定一个同类型的事件，如果绑定多次，只有最后一个生效；
    eg:
    <button id="btn">DOME0脚本模型</button>
     
    window.onload = function () {
    var btn = document.getElementById("btn");
    btn.onclick = function () {
    alert("脚本模型");
    }
    }
     
    【DOM2事件模型】
    1、添加事件绑定方式：
    （1）、ie8之前：btn2.attachEvent("onclick",函数)
    （2）、其它浏览器：btn2.addEventListener("click",函数,true/false)
    参数三：false(默认)表示事件冒泡；true表示事件捕获
    （3）、兼容写法：if(btn2.attachEvent){
    btn2.attachEvent("onclick",function(){
    alert("DOM2事件模型");
    });
    }else{
    btn2.addEventListener("click",function(){
    alert("DOM2事件模型");
    },false);
    }
    2、优点：
    ① 可以给同一个节点添加多个同类型事件；
    ② 提供了可议取消事件绑定的函数；
    使用方法举例如下
     
    3、取消DOM2事件绑定：
    注意：要取消DOM2的事件绑定，那么在绑定事件时，处理函数需要使用有名函数，不 可使用匿名函数。
    btn2.removeEventListener ("click",func2);
    btn2.detachEvent("onclick",func2);
     
     
    【JS中的事件流】
     
    1、事件冒泡：当某DOM元素触发某一事件时，会从当前节点开始，逐级往上触发其祖先节点的同类型事件，直到DOM根节点。
    >>>什么时候会触发事件冒泡？
    ① DOM0模型绑定事件，全部都是冒泡；
    ② IE8之前，使用attachEvent()绑定的事件，全部都是冒泡。
    ③ 其他浏览器，使用addEventLinstener()添加事件，当第三个参数省点略或者值为false时，为事件冒泡；
    2、事件捕获：当某个DOM元素触发一种事件时，会从文件根节开始，逐级向下逐触发其祖先节点的同类型事件，直到该节点自身；
    >>>什么情况下会触发事件捕获？
    ① 使用addEventLinstener()添加事件，当第三个参数值为true时，为事件捕获；
     
    ↓ DOM根节点 ↑
    ↓ ↑
    捕 爷爷节点 冒
    ↓ ↑
    获 父节点 泡
    ↓ ↑
    ↓ 当前节点 ↑
    3、阻止事件冒泡的方法：
    在IE浏览器中，使用e.cancelBubble = true；
    在其他浏览器，中使用 e.stopPropagation();
    兼容所有浏览器的写法:
    function myParagraphEventHandler(e) {
    e = e || window.event;
    if (e.stopPropagation) {
    e.stopPropagation(); //IE以外
    } else {
    e.cancelBubble = true; //IE之前
    }
    }
     
    4、取消事件默认行为：
    在IE浏览器中，使用e.returnValue = false;
    在其他浏览器，中使用 e.preventDefault();
    兼容所有浏览器的写法：
    // 取消事件默认行为：
    function eventHandler(e) {
    e = e || window.event;
    // 防止默认行为
    if (e.preventDefault) {
    e.preventDefault(); //IE以外
    } else {
    e.returnValue = false; //IE
    }
    }
      

    PART-9  JS中内置对象

    【JS中的数组】
    1、数组的基本概念：
    在内存空间中连续存储的一组有序数据的集合；
    元素在数组中的顺序称为下标，可以使用下标来访问数组中的每一个元素，下标从0开始；
    2、如何声明一个数组？
    ① 使用字面量声明： var arrows = [ ];
    在JS中的同一数组可以存储各种数据类型；使用，逗号隔开；
    例如 var arrows = [1，wangqiang,true,null,{},func];
    ② 使用new关键字声明： var arr = new Array(参数);
    >>>参数是可以：
    a.参数省略，表示创建一个空数组；
    b.参数为一个整数，表示声明一个length为指定长度的数组。但是这个length可以随时可变增加；
    c.参数为逗号分隔的多个数值，表示数组的多个值。
    new arry(1,2,3) ==[1,2,3,4]
    3、数组中元素的读写与增删
    ① 读写： 通过下标访问元素 。下标从0开始；
    ② 增删 a.使用delete 关键字删除数组的某一个值。
    删除之后，数组的是长度不变，对应的位置变成Undefined;
    如 delete arr[1];
     
    b. arr.pop():删除数组的最后一个值。相当于arr.length-=1；
    c. arr.shift():删除数组的第一个值。
     
    d. arr.unshift(值):在数组的第0个值新增一个值。
    e. arr.push(值):在数组的最后一个位置新增一个值。
     
    f. 直接访问数组没达到的下标，可以动态追加。
    arr[100]=1;中间如果有空余下标将存入Undefined;
     
    4、数组中的其他方法：
     
    ① join("分隔符号") 将数组用指定分隔符连接为字符串，当参数为空时，默认用逗号分开；
    ② concat():将数组与两个或者多个数组的值链接为新数组，【原数组不会改变】。
    concat链接时，如果连接部分存在二维数组，最多只能拆开一个[];
    eg: [1,2].concat([3,4][5,6])>>>[1,2,3,4,5,6]
    [1,2].concat([3,4[5,6]])>>>[1,2,3,4,[5,6]]
    ③ arr.pop():删除数组的最后一个值。相当于arr.length-=1；
    arr.shift():删除数组的第一个值。
    >>>返回被删除的值
    arr.unshift(值):在数组的第0个值新增一个值。
    arr.push(值):在数组的最后一个位置新增一个值。
    >>>返回新数组的长度
    【上述方法均会改变原来的数组】
     
    ④ .reverse() 【原数组被改变】 将数组反转，倒序输出； 存在返回值；
     
    ⑤ .slice(begin，end) 【原数组不被改变】 截取数组中的某一部分并返回截取的新数组
    >>>传入一个参数，表示是开始的区间，默认将截取到数组末尾；
    >>>传入两个参数，表示开始和结束的下标，是一个左闭右开区间；
    >>>两个参数可以为负数，表示从右边开始取，最后一个值为-1；
     
    重要！！ ⑥ .sort() 【元素族会改变】将数组进行升序排列；
    >>>默认情况下，会按照每个元素首字母的ASCII码值进行排列;
    eg: var arr = [4,1,2,3,13];
    alert( arr.sort()) ;
    >>>[1,13,2,3,4]
    >>>可以传入一个比较函数，手动指定排序的函数算法；
    函数将默认接受两个值a,b 如果返回值>0,证明a>b;
    arr.sort(function(a,b){
    return a-b;//升序排列
    return b-a;//降序排列
    })
     
    ⑦ var index = arr.indexOf(value，index) 返回数组中第一个value值所在的下标，如果没找到将返回-1；
    var index = arr.lastIndexOf(value，index) 返回数组中最后一个value值所在的下标，如果没找到将返回-1；
    >>>如果没有指定的index，则表示全数组查找value；
    >>>如果指定了index，则表示从index开始，向后查找value；
     
    ⑧ arr.forEach(function(item,index){})
    专门用于循环遍历数组，接受一个回调函数。
    回调函数接受两个参数，第一个参数为数组的每一项的值，第二个参数为下标。
    (IE8之前不支持这个指令)
     
    ⑨ arr.mapfunction(item,index){})
    数组映射，使用方式与forEach相同，不同的是存在return返回值；
    将会创建一个新数组，将原来数组每一个值进行新的操作之后一一映射，返回给一个新数组；
    (IE8之前不支持这个指令)
     
    5、二维数组与稀疏数组
    ① 二维数组：数组中的值仍然是一个数组形式；
    eg: var arr = [[4,1],[5,4],[3,13]];相当于三行两列的表格
    读取方法：arr[行号][列号]
    ② 稀疏数组：数组中的索引是不连续的。(length要比数组中实际的元素个数大)
     
    遍历二维数组中的每个元素：
     
    var arr = [[4,1],[5,4],[3,13,0]];
    for(var i =0;i<arr.length;i++){
    for(var j=0;j<arr[i].length;j++){
    console.log(arr[i][j]);
    }
    }
     
     
    6、基本数据类型&引用数据类型：
    ① 基本数据类型：赋值时，是将原变量中的值，赋值给另外一个变量。赋值完成后，两个变量相互独立。 修改其中一个变量的值，另外一个不会改变。
    ② 引用数据类型：赋值时，是将原变量在内存中的地址，赋值给另外一个变量。
    赋值完成后两个变量中存储的是同一个内存地址，访问的是同一份数据，
    ③ 数值型、字符串、布尔类型等变量属于基本数据类型。
    数组，对象属于引用数据类型
     
     
     
    【JS中的内置对象】
    Boolean类：
    也有两种声明方式；
    可以使用字面量方式声明一个单纯的变量；用typeOf检测为Boolean类型；
    也可以使用new Boolean()声明一个Boolean类型的对象；用typeOf检测为Object类型；
     
    var bool =true;
    console.log(bool);
     
    var isTrue = new Boolean(true);
    console.log(isTrue);
     
     
    Number类:
    Number.MAX_VALUE 返回Number类可表示的最大值；
    Number.Min_VALUE 返回Number类可表示的最小值；
     
    ! .toString() 将数值类型转换成字符串类型；
    .toLocaleString()将数值按照本地格式顺序转换成字符串，一般从右开始，三个一组加都好分隔开；
    ! .toFixed(n)；将数字保留n位小数，并将其转换为字符串格式；
    .toPrecision(n):将数字格式化为指定长度。n表示不含小数点的位数长度。如果n<原数字长度，则用科学计数法表示。
    如果n>原数字长度，则用小数点补足。
    .valueOf 返回Number对象的基本数字值；
     
     
    ！！！ String类：
     
    也有两种声明方式；
    可以使用字面量方式声明一个单纯的变量；用typeOf检测为str类型；
    也可以使用new Str()声明一个Boolean类型的对象；用typeOf检测为Object类型；
     
    属性：
    str.length 返回字符串的长度，即为字符数；
    字符串支持类似数组的下标访问方式：str[0];
    方法：
    str.toLowerCase()将字符串所有的字符转成小写；
    str.UpLowerCase()将字符串所有的字符转成大写；
     
    str.charAt(N)截取数组的第N个字符，相当于str[N]
    str.indexOf("srt",index)查找子串在字符串中出现的位置，如果没有找到返回-1，其他同数组的indexOf方法；
    str.lastIndexOf()同数组。
     
    str.subString (begin,end) 截取数组中的某一部分并返回截取的字符串
    >>>传入一个参数，表示是开始的区间，默认将截取到字符串末尾；
    >>>传入两个参数，表示开始和结束的下标，是一个左闭右开区间；
     
    str.split(分隔符)将字符串以指定分隔符分隔存入数组中，
    【特殊】当传入""，表示将字符串的每个字符分开放入数组；
     
    str.replace(old，new)将字符串中的字符进行替换；
    第一个参数是字符串时，只替换字符串的第一个old；
    第一个参数是正则表达式时，则可以根据正则的写法要求，进行替换。
     
     
    Date日期类：
     
    1、new Date();返回当前最新时间；
    new Date("2017,08,29,12:33:29") 返回指定时间；
    2、.getFullYear() 获取4位年份；
    .getMonth() 获取月份0-11月；
    .getDate() 获取一个月中的第几天 1-31；
    .getDay() 获取一周中的第几天 0~6 ，0表示周天；
    .getHours() 获取小时
    .getMiniutes() 获取分钟
    .getSeconds() 获取秒
    tip：
    1、 将星期写成数组格式，方便调用
    var weeks =["星期天"，"星期一"，"星期二"，"星期三"，"星期四"，"星期五"，"星期六"]
     
    PART-10  JS中正则表达式
    一、正则表达式
    1、正则表达式包括两部分：
    ① 定义正则表达式的规则； ② 正则表达式的模式(i/g/m)；
     
    2、声明正则表达式：
    ① 字面量声明：
         var reg=/表达式规则/表达式模式;
          eg: var reg= /white/g;
    ② 使用new关键字：
         var reg=new RegExp("表达式规则","表达式模式");
          eg: var reg=new RegExp("white","g");
     
    3、正则表达式的常用模式：
     ① g：全局匹配。不加g默认为非全局匹配，只匹配第一个符合要求的字符串。
         "www".replace(/w/,"#"); -> #ww;
         "www".replace(/w/g,"#"); -> ###;
     
     ② i：忽略大小写。不加i，默认要求大小写不匹配；
         "aAa".replace(/A/,"#"); -> a#a;
         "aAa".replace(/A/i,"#"); -> #Aa;
         "aAa".replace(/A/gi,"#"); -> ###;
     
     ③ m：多行匹配模式。不带m，则一个字符串只有一个开头，一个结尾；
          带m后，如果字符串分为多行，则每行都有一个开头，一个结尾。
         `abc                                          `#bc
            abc`.replaced(/^a/g,"#") ->  abc`
     
           `abc                                            `#bc
             abc`.replaced(/^a/gm,"#") -> #bc`
     
        [Tips：如何写多行字符串]
         >>> 普通字符串中，插入 表示换行
         >>> ES6中，允许使用反引号`包裹字符串，反引号包裹的字符串中，
               会保留空格与回车。`abc
                                            abc`
     
    4、正则表达式的常用方法：
    ① test()：检测一个字符串，是否符合正则表达式的验证，返回true或false；
           eg: /white/.test("whiteWhitewhite"); -> true
     
    ② exec()：检测一个字符串，是否符合正则表达式的验证。如果验证成功，返回结果数
                       组；如果验证失败，返回null；
                结果数组中：
                index属性：表示从字符串的第几个字符，开始符合正则要求；
                input属性：返回完整的被检索的字符串；
                下标第0个：表示符合整个正则表达式的那部分字符；
                下标第1个到第n个：表示符合正则的第1个到第n个子表达式的部分。
                                                 子表达式，就是正则中的()。也就是，正则中有几个(), 结果
                                                 数组中就有几个下标。
               /12(3)(4)5/.exec("aaa12345");
                 [
                   0:12345,
                   1:3,
                   2:4,
                   index:3,
                   input:"aaa12345",
                   length:3,
                 ]
     
     
    PART-11  JS的综合应用
    一 、JSON
    什么是 JSON ？
    • JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
    • JSON 是轻量级的文本数据交换格式
    JSON 是存储和交换文本信息的语法。类似 XML。
    JSON 比 XML 更小、更快，更易解析。
    • JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言 和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
    • JSON 具有自我描述性，更易理解
    为什么使用 JSON？
    对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：
    JSON 语法规则
    JSON 语法是 JavaScript 对象表示法语法的子集。
    • 数据在名称/值对中
    • 数据由逗号分隔
    • 大括号保存对象
    • 中括号保存数组
    JSON 名称/值对
    JSON 数据的书写格式是：名称/值对。
    名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值：
    "name" : "wq"。
    JSON 值
    JSON 值可以是：
    • 数字（整数或浮点数）
    • 字符串（在双引号中）
    • 逻辑值（true 或 false）
    • 数组（在中括号中）
    • 对象（在大括号中）
    • null
    JSON 数字
    JSON 数字可以是整型或者浮点型：
    { "age":30 }
    JSON 对象
    JSON 对象在大括号（{}）中书写：
    对象可以包含多个名称/值对：
    { "name":"菜鸟教程" , "url":"www.runoob.com" }
    这一点也容易理解，与这条 JavaScript 语句等价：
    name = "菜鸟教程" url = "www.runoob.com"
     
    JSON 数组
    JSON 数组在中括号中书写：
    数组可包含多个对象：
    { "sites": [ { "name":"菜鸟教程" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ] }
    在上面的例子中，对象 "sites" 是包含三个对象的数组。每个对象代表一条关于某个网站（name、url）的记录。
    JSON 布尔值
    JSON 布尔值可以是 true 或者 false：
    { "flag":true }
    JSON null
    JSON 可以设置 null 值：
    { "runoob":null }
    JSON.parse()
    JSON 通常用于与服务端交换数据。
    在接收服务器数据时一般是字符串。
    我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
    JSON.parse(text[, reviver])
    参数说明：
    • text:必需， 一个有效的 JSON 字符串。
    • reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
    JSON.stringify()
    JSON 通常用于与服务端交换数据。
    在向服务器发送数据时一般是字符串。
    我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
    语法
    JSON.stringify(value[, replacer[, space]])
    参数说明：
    • value:
    必需， 一个有效的 JSON 字符串。
    • replacer:
    可选。用于转换结果的函数或数组。
    如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。
    如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。
    • space:
    可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 有可以使用非数字，如： 。
     
    注意：
    JSON是数据交互中，最常用的一种数据格式。
    *
    * 由于各种语言的语法都不相同，在传递数据时，可以将自己语言中数组、对象等转化为JSON字符串。传递之后，可以将JSON
    * 字符串，再解析为JSON对象；
    *
    * JSON对象的用户与JS中的对象基本相同，唯一区别的是：JSON中的键必须是字符串；
     
    二 、WEB存储
    HTML5新增web存储方式，主要有两种：
     
    客户端存储数据的两个对象为：
    localStorage - 没有时间限制的数据存储
    sessionStorage - 针对一个 session 的数据存储
    两个对象在使用方式没有任何区别，唯一的区别是存储的数据的有效时间；
     
    ①localStorage ：除非手动删除，否则数据将一直保存在本地文件；
     
    ②sessionStorage：当浏览器关闭时，sessionStorage就被清空；
     
    [Storage的数据存储]
    1、Storage 可以像普通对象一样，使用.追加或者读取最新的数据。
    eg：localStorage.username = "zhangsan";
     
    2、常用的函数：
    保存数据：localStorage.setItem(key,value);
    读取数据：localStorage.getItem(key);
    删除单个数据：localStorage.removeItem(key);
    删除所有数据：localStorage.clear();
    得到某个索引的key：localStorage.key(index);
     
     
     
     
     
    一、什么是localStorage、sessionStorage
    在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
    二、localStorage的优势与局限
    localStorage的优势
    1、localStorage拓展了cookie的4K限制
    2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
    localStorage的局限
    1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
    2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
    3、localStorage在浏览器的隐私模式下面是不可读取的
    4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
    5、localStorage不能被爬虫抓取到
    localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
    这里我们以localStorage来分析
    三、localStorage的使用
    localStorage的写入，localStorage的写入有三种方法，这里就一一介绍一下
    复制代码
    if(！window.localStorage){ alert("浏览器支持localstorage"); return false; }else{ var storage=window.localStorage; //写入a字段 storage["a"]=1; //写入b字段 storage.a=1; //写入c字段 storage.setItem("c",3); console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]); }
    复制代码
     
    运行后的结果如下：
    这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage
    最后在控制台上面打印出来的结果是:
    不知道各位读者有没有注意到，刚刚存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。
    localStorage的读取
    复制代码
    if(!window.localStorage){ alert("浏览器支持localstorage"); }else{ var storage=window.localStorage; //写入a字段 storage["a"]=1; //写入b字段 storage.a=1; //写入c字段 storage.setItem("c",3); console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]); //第一种方法读取 var a=storage.a; console.log(a); //第二种方法读取 var b=storage["b"]; console.log(b); //第三种方法读取 var c=storage.getItem("c"); console.log(c); }
    复制代码
     
    这里面是三种对localStorage的读取，其中官方推荐的是getItemsetItem这两种方法对其进行存取，不要问我这个为什么，因为这个我也不知道
    我之前说过localStorage就是相当于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就相当于增、查的这两个步骤
    下面我们就来说一说localStorage的删、改这两个步骤
    改这个步骤比较好理解，思路跟重新更改全局变量的值一样，这里我们就以一个为例来简单的说明一下
     
    复制代码
    if(!window.localStorage){ alert("浏览器支持localstorage"); }else{ var storage=window.localStorage; //写入a字段 storage["a"]=1; //写入b字段 storage.b=1; //写入c字段 storage.setItem("c",3); console.log(storage.a); // console.log(typeof storage["a"]); // console.log(typeof storage["b"]); // console.log(typeof storage["c"]); /*分割线*/ storage.a=4; console.log(storage.a); }
    复制代码
     
    这个在控制台上面我们就可以看到已经a键已经被更改为4了
    localStorage的删除
    1、将localStorage的所有内容清除
    复制代码
    var storage=window.localStorage; storage.a=1; storage.setItem("c",3); console.log(storage); storage.clear(); console.log(storage);
    复制代码
     
    2、 将localStorage中的某个键值对删除
     
    复制代码
    var storage=window.localStorage; storage.a=1; storage.setItem("c",3); console.log(storage); storage.removeItem("a"); console.log(storage.a);
    复制代码
     
    控制台查看结果
    localStorage的键获取
    复制代码
    var storage=window.localStorage; storage.a=1; storage.setItem("c",3); for(var i=0;i<storage.length;i++){ var key=storage.key(i); console.log(key); }
    复制代码
     
    使用key()方法，向其中出入索引即可获取对应的键
     
    四、localStorage其他注意事项
     一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式
    这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
    示例：
    复制代码
    if(!window.localStorage){ alert("浏览器支持localstorage"); }else{ var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; var d=JSON.stringify(data); storage.setItem("data",d); console.log(storage.data); }
    复制代码
     
    读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法
    复制代码
    var storage=window.localStorage; var data={ name:'xiecanyong', sex:'man', hobby:'program' }; var d=JSON.stringify(data); storage.setItem("data",d); //将JSON字符串转换成为JSON对象输出 var json=storage.getItem("data"); var jsonObj=JSON.parse(json); console.log(typeof jsonObj);
    复制代码
    打印出来是Object对象
    另外还有一点要注意的是，其他类型读取出来也要进行转换
    三、iframe
    iframe是什么
     
        iframe就是我们常用的iframe标签：<iframe>。iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，主要区别在于对iframe标签定义的形式不同，例如定义iframe的长宽高。
     
        iframe用法详解
     
        首先需要了解iframe标签的写法，和大多HTML标签写法相同，iframe标签输入形式为：<iframe>和</iframe>。以<iframe>开头，以</iframe>结尾，将需要的文本内容添加到两个标签之间即可。iframe标签内的内容可以做为浏览器不支持iframe标签时显示。

    高度充满父容器的方式：
    ① 给div设置100%的同时，要使用绝对定位；
    ② 使用单位100vh，可以设置高度充满父容器；
    使用单位100vw，可以设置宽度充满父容器；
     


                
         


                
               
                  

              

  • 相关阅读:
    struts2 的特征
    The method getJspApplicationContext(ServletContext) is undefined for the type JspFactory
    web.xml 404 500 配置
    重大发现 springmvc Controller 高级接收参数用法
    struts2 file
    struts2-core-2.3.20.jar
    系统设计工具
    Java基础
    IAM
    秒杀系统
  • 原文地址：https://www.cnblogs.com/wq1994/p/7399945.html
Copyright © 2011-2022 走看看