萬物皆對象的JavaScript

時間  2019-11-24
標籤 萬物 對象 javascript 欄目 JavaScript 简体版
原文   原文鏈接

寫在前面：javascript

          通過前段時間對於H5語言的學習，開始慢慢適應如今的生活節奏和代碼語言。從一開始的毫無頭緒到如今能夠大概地寫出部分的網站靜態頁面，用了兩個周的時間。做爲一個以前從未接觸過計算機語言的初學者來講，在感覺着代碼語言神奇的同時也更期待能夠更深刻的瞭解和掌握更多的相關知識，我的能力有限，但儘可能作好眼前的每一件事，與你們共勉。css

Java Script 是世界上最流行的編程語言。html

 

JavaScript 是腳本語言

 

JavaScript 是一種輕量級的編程語言。前端

 

JavaScript 是可插入 HTML 頁面的編程代碼。java

 

JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。web

JavaScript 很容易學習。正則表達式

 

 

 【使用JS的三種方式】算法


        一、在HTML標籤中直接使用，直接內嵌JS（可是不提倡使用）；
           >>>不符合W3C關於內容和行爲分離的要求；
          eg:
           <button onclick="alert('你還真的敢點啊~')"> 有本事點我啊！</button>
           
        二、在HTML頁面中使用<script> </script>標籤包裹JS代碼；  
            >>>script標籤能夠放到頁面的各類位置；
          eg:
            <script type="text/javascript">
            JS代碼
           </script>
         三、引入外部的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】
        
          一、JS中的多行註釋。 （ Ctrl+shift+/ ）
           
           
          二、JS中的單行註釋。（Ctrl+/ ）
          編程

PART-1 JS中的變量和輸入輸出

 

【JS中的變量】


        一、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聲明時，只會被理解爲普通的賦值操做；
                   
        二、變量名的命名要求：
           ①、變量名只能由字母/數字/下劃線組成。
           ②、開頭不能是數字。
           ③、變量名區分大小寫，大寫字母和小寫字母爲不一樣變量。
           
        三、變量名的 命名規範：
           ①、要符合小駝峯法則：首字母小寫，以後每一個單詞的首字母大寫；myNameIsWangQiang; √
           
           ②、或者使用匈牙利命名法：全部字母小寫，單詞之間用下劃線分開； my_name_is_wang_qiang;√
           ③、 mynameiswangqiang √  可是不規範；
            
        四、   JS中的數據類型: （均用var引用，可是賦值類型不一樣）  ("▔□▔)"重點！！！
           ①、Undefined:已經使用var進行了聲明，可是未進行賦值；eg:var=a； 此時a爲未賦值的變量，運行顯示undefined;
           ②、Null:表示空的引用；
           ③、Boolean：布爾類型:只有兩個值：true、false,表示真假；
           ④、Number:數值類型。能夠爲整數，也能夠爲小數；
           ⑤、String:字符串類型;用"或"包裹的內容，稱爲字符串；
           ⑥、Object:對象類型；
           
           
        五、【經常使用的數值函數】
        
           ①、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中經常使用的輸入輸出語句】
           一、document.write();將括號中的內容打印輸出到瀏覽器的屏幕上；
                       使用時須要注意除了變量常量外的全部內容必需要放到""中。變量和常量必須放到""外面。
                       若是同時有變量和常量，必須使用+鏈接。
               eg:document.write("右手中的紙牌 "+right+" <br/> <br/>");
           二、alert（）使用彈窗輸出；
                      彈窗警告，（）中的內容必須 與上述要求相同。
           三、prompt 彈窗輸入；
              接受兩部分參數：
              ①、輸入框上部的提示內容，可選。
              ②、輸入框裏面的提示信息，可選。
                                         當只寫一部分時，表示輸入框上部的提示內容。
                                          能夠定義變量，接受輸入的內容。點擊肯定按鈕，變量將被賦值爲輸入的內容；
                                          點擊取消按鈕，變量將被賦值爲Null;    
                                          輸入內容時，默認接收的數據類型都是字符串！！！          
              eg:  
                var name= prompt("請輸入你的名字","王強") ;
                      alert("您輸入的是"+name);
             

PART-2 JS中的運算符

 

一、  算術運算(單目運算符)

             + 加 、-減、*乘、 /除、 %取餘數、    ++自增 、--自減
             
             ①、+ ： 有兩種做用:鏈接字符串、加法運算
                             當 + 兩端所有爲數值時，進行加法運算。當 + 兩側中任意一邊存在字符串時，就會起到鏈接字符串的做用，連接以後的結果爲字符串。
                             除了+以外，其他的符號在運算時會嘗試將左右變量用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；
             
        二、賦值運算
        
             =賦值       +=  -=  *=  /=  %=
             
             ①、+=：   a+=b; 至關於a=a+b。 可是推薦使用前者，運算速度快；
             eg:
                var a=3;
                a +=3;
                alert(a);   
                >>6
               
        三、關係運算
        
             ==等於、 ===全等、  ！=不等、！==不全等、>、<、>=、<=
                 
             ①  關係運算符運算以後的結果只能是Boolean類型;
             ②  判斷一個數字屬否處於某個區間必須用&&鏈接;
                 a<10 && a>0  √
                 10>a>0       ×
             ③  === 爲嚴格等於，要求不但要類型相同，值也必須相同；類型不一樣，結果直接爲false；相同的話再進行下一步運算；
             ④  ==  爲等於 ， 類型相同，與===效果同樣；類型不一樣時，會先嚐試用Number()將兩邊函數轉換爲數字，再進行運算。
                                            可是存在各別的個例： Null===false; ×
                                  Null==Undefined; √
                 
      
       4  條件運算符(多目運算)
        
             a>b?true:false
             
             有兩個重要符號：     ?   :
             當？前面部分運算結果爲true時，執行：前面的代碼；
             當？後面部分運算結果爲false時，執行：後面的代碼；
             冒號兩邊能夠爲數值，則整個式子可用於賦值。
             冒號兩端能夠爲代碼塊，將直接執行代碼。
             多目運算符號能夠多層嵌套；
             
        五、位運算符、 邏輯運算符
        
            && 與、||或、  ！ 非
            
             &&：兩邊都成立，結果爲true；
             ||:兩邊有一邊成立，結果爲true；
             && 和 ||同時存在時候，&&的優先級高；



        六、運算符的優先級：
        () 小括號優先級最高
        ! ++ --
        * / %
        + -
        > < >=  <=
        == !=
        &&  //   && 和 ||同時存在時候，&&的優先級高；
        ||
        = += -= *= /= 各類賦值優先級最低；
        
  

PART-3   JS中的分支結構

【if-else結構】
    一、結構寫法:
            if(判斷條件){
               條件爲true時執行if的代碼
            }
            else{
                條件爲false時候執行else的代碼
            }
      二、注意事項：
        ①、else{}語句塊能夠根據狀況進行省略；
       ②、if和else後面的{}能夠省略，可是省略了以後，它們以後只能跟一條語句，因此不建議省略{}；
    三、if的()中的判斷條件，支持的數據類型：                                重點！！！
      ① Boolean類型:true-真 ;false-假；
        ② String:空字符串爲假，非空字符串爲真；
     ③ Number:0爲假,一切非零數字爲真;
      ④ null/Undefined:全爲假;
      ⑤ Object:全爲真;
                           
    【else-if結構/多層if結構 /階梯if結構】

        一、結構寫法:    
           if(條件一)    {    }
            else if(條件二){   }
                       else{    }
         二、多層if結構中，各個判斷條件之間互斥，執行選擇符合條件的第一條進行執行，執行以後跳出結構體系，再也不繼續分支；    
       
     【嵌套if結構】
      一、結構寫法：
        if(條件一){  條件一成立
                if(條件二){ 條件一成立，而且條件二也成立； }  
                 else{   條件一成立，可是條件二不成立；          }
                }    
        else{ 條件一不成立     }
      二、在嵌套if結構中，若是省略{}，則else{}結構屬於距離本身最近的if{}結構；
      三、嵌套結構能夠多層嵌套，可是通常不推薦超過三層；能用多層if就不要用嵌套if；

【switch case結構】
     一、結構寫法：

           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;
            }
      二、注意事項：
         ① switch結構中的（）中的表達式可使用JS支持的各類數據類型。
         ② switch（）結構在進行判斷時，使用===判斷。
         ③ case後面的表達式能夠是各類數據類型，可是值要求各不相同，不然也只會執行第一個case;
         ④ break做用 ：執行前面case代碼以後，跳出當前的switch結構；
              缺乏break的後果：switch只會判斷一次結果，從第一個正確的case項開始，執行後面全部的case和default；
         ⑤ switch結構在進行判斷的時候，只會判斷一次正確答案。當遇到正確的case以後再也不判斷後續的項目。
         ⑥ switch結果執行的效率要比多重if結構快，因此在多路分支結構中優先使用switch結構。

PART-4  JS中的循環結構

【while() {}循環結構的步驟】
              一、聲明循環變量
              二、判斷循環條件
              三、執行循環體操做
              四、更新循環變量
                    而後循環執行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循環】
一、for循環有三個表達式：
① 聲明循環變量;
② 判斷循環條件;
③ 更新循環變量;
三個表達式之間用;分隔開,三個表達式能夠省略, 可是兩個分號不能省略.
二、for循環的執行特色:先判斷再執行，和while相同；
執行順序：一、初始語句 二、執行條件是否符合？ 三、循環體 四、增長增量 ；
三、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中的循環嵌套

循環嵌套的特色：
              外層循環轉一次，內層循環轉一圈
              外層循環控制行數，內層循環控制每行元素個數
外層循環控制行數,內層循環控制每行的元素個數
 
 
圖形題作題思路:
 
一、肯定圖形有幾行，行數即爲外層循環次數；
二、肯定每行中由幾種元素組成，有幾種元素即表示有幾個內層循環。
三、肯定每行中每種元素的個數，這個個數即爲每一個內層循環的次數。
tips:若是每種元素的個數不固定,則找出每種元素的個數,與行號的關係,這個關係表達式,就是內層循環的最大值.
        
 

PART-6  JS中的函數和BOM

1、函數定義：
函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。
當調用該函數時，會執行函數內的代碼。
能夠在某事件發生時直接調用函數（好比當用戶點擊按鈕時），而且可由 JavaScript 在任何位置進行調用。
提示：JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，而且必須以與函數名稱相同的大小寫來調用函數。
【函數的聲明及調用】
一、函數的聲明格式：
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>.
 
二、函數的注意事項：
①、函數名必需要符合小駝峯法則：首字母小寫以後每一個單詞首字母大寫；
②、函數名後面的括號中，能夠有參數也能夠沒有參數，分別稱爲有參函數和無參函數。
③、聲明函數時的函數列表，稱爲形參列表，形式參數。（變量的名字）
function saySth(str,color){}
調用函數時的列表，稱爲實參列表，實際參數。（變量的賦值）
saySth("hahaha","blue");
④、函數的形參列表個數和實參列表的個數沒有實際聯繫；
函數參數的個數，取決於實參列表;
若是實參列表的個數<形參列表的個數，則未賦值的形參，將爲Undefined;
⑤、函數能夠有返回值，使用Return返回結果；任何代碼不能寫在return以後；
調用函數時，可使用一個變量接受函數的返回結果。若是函數沒有返回結果，則接受的結果爲Undefined;；
⑥、函數中變量的做用域：JS中只有函數有做用域；
在函數中，使用var聲明的變量爲局部變量只能在函數中使用。
不使用var聲明的變量爲全局變量在函數外也能訪問。
函數的形參列表默認爲函數的局部變量，只能在函數中使用。
⑦函數的聲明與函數的調用沒有先後之分，能夠在聲明函數以前調用函數。
eg:
func();
function func(){};
 
 
 
2、 【匿名函數的聲明使用】
 
function(){ }
一、聲明一個匿名函數，直接賦值給某一個事件；
window.onload=function(){}
 
二、使用匿名函數表達式。
將匿名函數，賦值給一個變量。
聲明：var func=function(){};
調用：func();
注意：使用匿名函數表達式時，函數的調用語句，必須放在函數的聲明語句後面！！！
 
三、自執行函數：
①、可使用多種運算符開頭，可是通常用！(結構清晰，推薦使用!)
!function(形參列表){
alert(123;)
}(實參列表)
②、使用()將函數及函數後的調用()包裹起來就能夠調用了。(可以代表匿名函數與調用的()是一個總體，是官方推薦的寫法！)
(function(形參列表){
alert(123;)
}(實參列表))
③、使用()包裹函數部分：(不推薦使用)
(function(){
alert(123)
})()
 
【函數的內部屬性】
1、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(){ }
 
 
 
 
2、JS中的BOM：
 
1、【screen 對象】
 
屏幕寬度-- console.log(screen.width)
屏幕高度-- console.log(screen.height)
可用寬度-- console.log(screen.availWidth)
可用高度-- console.log(screen.availHeight) =屏幕高度-底部狀態欄高度；
 
 
2、【location 對象】
 
一、 取到瀏覽器的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);//返回#開頭的錨點；
 
 
二、 使用JS跳轉頁面的方法：
Window.location="http://www.baidu.com";
 
細分幾種使用location跳轉頁面的類型：
l ocation.replace("http://www.baidu.com"); 使用新的文檔替換當前文檔，替換之後，不能退回。
location.assign("http://www.baidu.com");加載新的文檔，加載以後，能夠退回。
location.repload();從新加載當前頁面，即刷新頁面；
①、 location.repload(true) 強制刷新頁面，從服務器端從新加載頁面----Ctrl+f5;
②、 location.repload() 在本地刷新當前頁面---f5
 
 
3、【history 瀏覽歷史】
 
history.length 瀏覽歷史列表的個數;
history.back()； 後退
history.forward(); 前進
history.go(); 跳轉到瀏覽歷史的任意一個頁面；0表示當前頁面；-1表示後一個頁面。1表示前一個頁面；
 
4、【navigator 瀏覽器信息】
 
瞭解便可
console.log(navigator);檢測瀏覽器的各類插件系統信息。
 
navigator.plugins;檢測瀏覽器裏安裝的各類插件；
 
5、【Window對象的經常使用方法：】
>>>在window對象中的全部屬性和方法都可以省略window關鍵字；
一、alert() 彈出一個警告提示框;
二、prompt() 彈窗接受用戶的輸入；
三、confirm() 彈出帶有"肯定"/"取消"按鈕的提示框，點擊按鈕返回true/false;
四、close() 關閉當前瀏覽器窗口，在個別瀏覽器中，腳本語言不得關閉非腳本打開的窗口。
只能關閉使用超連接、window.open()打開的窗口；
五、window.open()打開一個新窗口。
參數1：新窗口的地址
參數2：新窗口的名字，沒卵用，很雞肋；
參數3：新窗口的各類屬性設置："屬性1=值1，屬性2=值2，...."
 
 
六、setTimeout() 設置延時多久執行，只執行一次；
接受兩個參數：須要執行的函數、延遲時間。
七、setInterval()設置定時器，每隔n毫秒執行一次；
接受兩個參數：須要執行的函數、間隔時間。
 
八、clearTimeout();清除延時器
clearInterval();清除定時器
使用方法：設置延時器或者定時器時，可使用變量接受定時器ID；
var id = setInterval;
調用clearInterval時，將id傳入，便可消除對應的定時器；
clearInterval(id);
 
 

PART-7  JS中的DOM操做

文檔樹（Document Tree）是HTML頁面的層級結構。
它由元素、屬性和文本組成，它們都是一個節點（Node），就像公司的組織結構圖同樣。
 
【DOM樹節點】
DOM節點分爲三大類： 元素節點、文本節點、屬性節點；
文本節點、屬性節點屬於元素節點的子節點。操做時，均須要取到元素節點再操做子節點；
可使用getElement系列方法，取到元素的節點；
 
【查看元素節點】
一、getElementById：經過ID取到惟一節點；若是ID重名，只能取到第一個；
 
getElementsByName() 經過name屬性
getElementsByTagName() 經過標籤名
getElementsByClassName() 經過class名
 
>>>獲取元素節點時，必定要注意：獲取節點的語句，必須在DOM渲染以後執行。
能夠有兩種方式實現：
①、 將JS代碼寫在<body></body>標籤以後；
②、 將代碼寫到window.onload函數之中；
>>>後面三個getElements，取到的是數組格式，不能直接添加屬性，而應該取出數組的每個單獨操做。
例如：
getElmentsByName("name1")[0].onclick=function;
 
【查看/設置屬性節點】
一、查看屬性節點： getAttribute("屬性名");
二、設置屬性節點： setAttribute("屬性名","新屬性值");
 
>>> 查看和設置屬性節點，必須先取到元素節點，才能使用。
>>> setAttribute();函數在IE瀏覽器中可能會存在兼容性問題。
好比在IE中不支持使用這個函數設置style/onclick等樣式屬性和事件屬性。
 
>>> 咱們推薦使 用點符號法替代上述函數：
eg: dom1.style.color="" dom1.onclick="" dom1.src=""
 
【總結-JS修改DOM節點的樣式】
一、 使用setAttribute()設置class和style屬性，可是存在兼容性問題，不提倡
div.setAttribute("class","cls1");
 
二、 使用 .className直接設置class類,注意是className而不是.class：
div.className = "cls1";
 
三、 使用.style設置單個屬性，注意屬性名要是用駝峯命名法：
div.style.backgroundColor = "red";
 
四、 使用.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(新節點,老節點): 使用新節點，替換掉老節點。
 
 
 
[表格對象]
一、 rows屬性： 返回表格中的全部行，是一個數組格式；
二、 insertRow(index): 在指定位置插入一行，index從0開始；
三、 deleteRow(index): 刪除指定的一行，index從0開始；
 
[行對象]
一、 cells屬性： 返回這一行中的全部單元格，是一個數組格式；
二、 rowIndex屬性： 返回這一行是表格中的第幾行，從0開始；
三、 insertCell(index): 在這一行指定位置，插入一個單元格，index從0開始；
四、 deleteCell(index): 刪除這一行的指定單元格，index從0開始
*
[單元格對象]
一、 cellIndex屬性： 返回這個單元格是本行的第幾個，從0開始；
二、 innerText innerHTML align className
 

PART-8  JS中的事件

 
【JS中的事件分類】
一、鼠標事件
olick/dblclick/onmouseon/onmouseover.....
二、HTML事件
onload/onscroll/onsubmit/onchange/onfocus....
三、鍵盤事件
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分離的基本原則；
 
二、 腳本模型：在JS腳本中，取到某個節點並添加事件屬性；又叫動態綁定；
優勢：實現了W3C關於HTML與JS分離的基本原則；
缺點： 同一個節點只能綁定一個同類型的事件，若是綁定屢次，只有最後一個生效；
eg:
<button id="btn">DOME0腳本模型</button>
 
window.onload = function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("腳本模型");
}
}
 
【DOM2事件模型】
一、添加事件綁定方式：
（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);
}
二、優勢：
① 能夠給同一個節點添加多個同類型事件；
② 提供了可議取消事件綁定的函數；
使用方法舉例以下
 
三、取消DOM2事件綁定：
注意：要取消DOM2的事件綁定，那麼在綁定事件時，處理函數須要使用有名函數， 不 可以使用匿名函數。
btn2.removeEventListener ("click",func2);
btn2.detachEvent("onclick",func2);
 
 
【JS中的事件流】
 
一、事件冒泡：當某DOM元素觸發某一事件時，會從當前節點開始，逐級往上觸發其祖先節點的同類型事件，直到DOM根節點。
>>>何時會觸發事件冒泡？
① DOM0模型綁定事件，所有都是冒泡；
② IE8以前，使用attachEvent()綁定的事件，所有都是冒泡。
③ 其餘瀏覽器，使用addEventLinstener()添加事件，當第三個參數省點略或者值爲false時，爲事件冒泡；
二、事件捕獲：當某個DOM元素觸發一種事件時，會從文件根節開始，逐級向下逐觸發其祖先節點的同類型事件，直到該節點自身；
>>>什麼狀況下會觸發事件捕獲？
① 使用addEventLinstener()添加事件，當第三個參數值爲true時，爲事件捕獲；
 
↓ DOM根節點 ↑
↓ ↑
捕 爺爺節點 冒
↓ ↑
獲 父節點 泡
↓ ↑
↓ 當前節點 ↑
三、阻止事件冒泡的方法：
在IE瀏覽器中，使用e.cancelBubble = true；
在其餘瀏覽器，中使用 e.stopPropagation();
兼容全部瀏覽器的寫法:
function myParagraphEventHandler(e) {
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE之外
} else {
e.cancelBubble = true; //IE以前
}
}
 
四、取消事件默認行爲：
在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中的數組】
一、數組的基本概念：
在內存空間中連續存儲的一組有序數據的集合；
元素在數組中的順序稱爲下標，可使用下標來訪問數組中的每個元素，下標從0開始；
二、如何聲明一個數組？
① 使用字面量聲明： 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]
三、數組中元素的讀寫與增刪
① 讀寫： 經過下標訪問元素 。下標從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;
 
四、數組中的其餘方法：
 
① 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以前不支持這個指令)
 
五、二維數組與稀疏數組
① 二維數組：數組中的值仍然是一個數組形式；
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]);
}
}
 
 
六、基本數據類型&引用數據類型：
① 基本數據類型：賦值時，是將原變量中的值，賦值給另一個變量。賦值完成後，兩個變量相互獨立。 修改其中一個變量的值，另一個不會改變。
② 引用數據類型：賦值時，是將原變量在內存中的地址，賦值給另一個變量。
賦值完成後兩個變量中存儲的是同一個內存地址，訪問的是同一份數據，
③ 數值型、字符串、布爾類型等變量屬於基本數據類型。
數組，對象屬於引用數據類型
 
 
 
【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日期類：
 
一、new Date();返回當前最新時間；
new Date("2017,08,29,12:33:29") 返回指定時間；
二、.getFullYear() 獲取4位年份；
.getMonth() 獲取月份0-11月；
.getDate() 獲取一個月中的第幾天 1-31；
.getDay() 獲取一週中的第幾天 0~6 ，0表示周天；
.getHours() 獲取小時
.getMiniutes() 獲取分鐘
.getSeconds() 獲取秒
tip：
一、 將星期寫成數組格式，方便調用
var weeks =["星期天"，"星期一"，"星期二"，"星期三"，"星期四"，"星期五"，"星期六"]
 
PART-10  JS中正則表達式
1、正則表達式
一、正則表達式包括兩部分：
① 定義正則表達式的規則； ② 正則表達式的模式(i/g/m)；
 
二、聲明正則表達式：
① 字面量聲明：
     var reg=/表達式規則/表達式模式;
      eg: var reg= /white/g;
② 使用new關鍵字：
     var reg=new RegExp("表達式規則","表達式模式");
      eg: var reg=new RegExp("white","g");
 
三、正則表達式的經常使用模式：
 ① 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：如何寫多行字符串]
     >>> 普通字符串中，插入\n 表示換行
     >>> ES6中，容許使用反引號`包裹字符串，反引號包裹的字符串中，
           會保留空格與回車。`abc
                                        abc`
 
四、正則表達式的經常使用方法：
① 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 有可使用非數字，如：\t。
 
注意：
JSON是數據交互中，最經常使用的一種數據格式。
*
* 因爲各類語言的語法都不相同，在傳遞數據時，能夠將本身語言中數組、對象等轉化爲JSON字符串。傳遞以後，能夠將JSON
* 字符串，再解析爲JSON對象；
*
* JSON對象的用戶與JS中的對象基本相同，惟一區別的是：JSON中的鍵必須是字符串；
 
二 、WEB存儲
HTML5新增web存儲方式，主要有兩種：
 
客戶端存儲數據的兩個對象爲：
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲
兩個對象在使用方式沒有任何區別，惟一的區別是存儲的數據的有效時間；
 
①localStorage ：除非手動刪除，不然數據將一直保存在本地文件；
 
②sessionStorage：當瀏覽器關閉時，sessionStorage就被清空；
 
[Storage的數據存儲]
一、Storage 能夠像普通對象同樣，使用.追加或者讀取最新的數據。
eg：localStorage.username = "zhangsan";
 
二、經常使用的函數：
保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除全部數據：localStorage.clear();
獲得某個索引的key：localStorage.key(index);
 
 
 
 
 
1、什麼是localStorage、sessionStorage
在HTML5中，新加入了一個localStorage特性，這個特性主要是用來做爲本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)，localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣。
2、localStorage的優點與侷限
localStorage的優點
一、localStorage拓展了cookie的4K限制
二、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的
localStorage的侷限
一、瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性
二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換
三、localStorage在瀏覽器的隱私模式下面是不可讀取的
四、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡
五、localStorage不能被爬蟲抓取到
localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空
這裏咱們以localStorage來分析
3、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的讀取，其中官方推薦的是getItem\setItem這兩種方法對其進行存取，不要問我這個爲何，由於這個我也不知道
我以前說過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的刪除
一、將localStorage的全部內容清除
複製代碼
var storage=window.localStorage; storage.a=1; storage.setItem("c",3); console.log(storage); storage.clear(); console.log(storage);
複製代碼
 
二、 將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()方法，向其中出入索引便可獲取對應的鍵
 
4、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對象
另外還有一點要注意的是，其餘類型讀取出來也要進行轉換
3、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，能夠設置寬度充滿父容器；
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程