javascript 筆記

時間 2019-11-16

標籤 javascript 筆記欄目 JavaScript 简体版

原文原文鏈接

jacascriptjavascript

1 值類型—數據類型css

1.不可改變的原始值（棧數據）（stack）html

Number String Boolean undefined null java

2引用值（推數據）（heap）node

array object function date RegExphcss3

js運算符web

1 運算操做符 1.「+」數字運算字符串鏈接 2.任何數據類型加字符串都等於字符串 正則表達式

2 "-","*","/","%","=","()" 優先級"="最弱（）最高chrome

3"++","--" ,"+=","-=","/=","*=","%=" 好比 document.write(a++) 先執行a 在進行++數組

賦值的順序自右向左，計算的順序自左向右

被認定爲false的值 undefined 、null、NaN、""、0、false

4邏輯運算符

"&&" 會先看第一表達式轉換成布爾值得結果，若是結果爲真，那麼它會看第二個表達式轉換爲布爾值得結果。碰假就停，就輸出結果

"||" 先看第一個爲真，就直接返回第一個值，若是第一個爲假，再看第二個，就返回值。若是第一個爲假，第二爲假，會返回第二個值。碰假就停

條件語句

1.if（）{} ()裏面是判斷語句，若是成立就值行{}裏面的語句

else if 是除if之外的條件 else 是除以上全部之外的條件

2. for(var i =0;i<10;i++){}

執行的順序第一步 var i= 0 第二步 if（i<10）執行{}裏面的語句第三步 i++；第四步 if（i<10）執行{}裏面的語句以此類推

3 while do while的區別是 do while不管如何先執行一次，在判斷執行條件

4 switch case 基本形式

switch{
    case 1:
           代碼
     break;
     case 2:
           代碼
       break;
}

typeof() （六種數據類型） number（數字類型） string（字符串類型） boolean（布爾類型） undefined object（對象類型） function（函數類型）

（）裏面寫某種類型的數據就會返回某種類型的數據

類型轉換

顯示類型轉換 1 Number（mix） 將mix轉換成數字類型 2parseInt(string,radix) string是字符串類型 radix 是進制數是將string以radix進制轉換成十進制數

3 parseFloat（）轉換成浮點數 4toString（radix） 裏面寫什麼都轉換成字符串 radix是進制數

隱式類型轉換

1 isNaN（'abc'） 判斷非數 內部轉換過程是先Number（‘abc’）轉化成NaN 再給isNaN（）內部會隱式調用Number

2 var a ="123" a++; 也會隱式調用Number

3"+'' 當+先後有一個字符串類型的會隱式調用String類型

4"-","*","/","%" 也是隱式調用number類型

5< > <= >= == 若是是字符串和數字比先將字符串調用number類型，轉化成數字，再進行比較，若是兩個都是字符串，比較AScII碼

3不發生類型轉換的 ===（絕對等於）！==（絕對不等於）好比 1=="1" 返回true 1==="1" 返回false

函數 1. 定義 function 函數名 test（） {}裏面寫的是函數體

基本形式

function test(){

}

1. 命名函數表達式

var test = function abc（）{

   document.write('a');    這時函數執行要用test（）； 用abc（）沒用
}

2 匿名函數表達式

var  demo = function (){
   document.write('b');  執行用demo（）
 }

3 組成形式 1.函數名稱 2. 參數：形參、實參 3.返回值

function test(a,b){  a,b是形式參數
  至關於在函數體定義了
var  a,b;                        能夠無限定義形參
}  
 test(1,2); 1，2是實際參數   當實參比形參多的時候 會將實參儲存在argunments——實參列表

function sum（a,b）{
       arguments[1,2]
         var a=1;
          a= 2;   a變argumnets也變  arguments變 a變
   arguments[0]=3;
} 
sum(1,2)

return 返回值有終止函數的功能

js運行三部曲 1 語法分析 2 預編譯 3解釋執行

1. 預編譯前奏：imply global 暗示全局變量：即任何變量，若是變量未經聲明就賦值，此變量就爲全局對象全部好比 a=123 var a=b=123 （b爲全局變量）

2. 一切聲明的全局變量：全是window屬性 window就是全局的域

  var a = 123 ==> window.a=123
  var b = 234 =>window.b = 234
 至關於 window {
               a:123,
               b:234
}

//函數聲明總體提高（不管函數寫在哪裏，都是提到最前面被執行）

// 變量聲明提高（聲明變量放在輸出語句後面，會被執行爲undefined）

好比var a=b=123；先將123賦給b，再聲明a，再將b的值賦給a

預編譯四部曲

1.建立AO對象，（Activation Object 執行器上下文）

2.找形參和變量聲明，將變量和形參名做爲AO屬性名，值爲undefined

3將實參值和形參同一

4 在函數體裏面找函數聲明，值賦予函數體

有關預編譯的題目

function fn(a){
     console.log(a);  //function a(){}
     var a=123;
     console.log(a);  //123
    function a(){}
   console.log(a);  //123
    var b=function(){}
    console.log(b); // function b(){}
   function d(){}
}
fn(1);
//預編譯發生在函數執行的前一刻

1 會先創造一個AO對象
  AO{
      a:1  ==>function a（）{}
      b:  undefined
      d :function d(){}
   }
在運行函數 a ==>123
 b==>function b(){}

 var a = 0;
   b = 0;
   function A(a){
      A=function(b){
         document.write(a+b++);
      }
      document.write(a++);
   }
   A(1); //1
   A(2); //4

     
    console.log(test);  //function test (){函數體}
      function test (test){              先會生成一個GO對象 GO{test:undefined   ==>function test(){}}
                                              在生成一個AO對象  AO{test：undefined ==>1==> function test(){} ==>234}

         console.log(test);  //function test(){}
         var test = 234;                         當 GO和AO同時擁有一個函數屬性時    函數體外面執行GO  函數體裏面有就執行AO  若是函數體裏面沒有這個屬性 回去GO裏面找
         console.log(test);  //234
         function test(){};
      }
      test(1);
      var test = 123;

/* a=100;
   function demo(e){
       function e(){}
       arguments[0]=2;
       console.log(e);//2
       if(a){
           var b=123;
           function c(){}
       }
       var c;
       a=10;
       var a;
       console.log(b);//undefined
       f=123;
       console.log(c);//undefined
       console.log(a);//10
   }
   var a;
   demo(1);
   console.log(a);//100
   console.log(f);*///123

做用域精解

執行上下文
EC : 執行上下文

ECS : 執行環境棧

VO ：變量對象

AO ：活動對象

scope chain ：做用域鏈

二執行上下文
javascript運行的代碼環境有三種：

全局代碼：代碼默認運行的環境，最早會進入到全局環境中

函數代碼：在函數的局部環境中運行的代碼

Eval代碼：在Eval()函數中運行的代碼

全局上下文是最外圍的一個執行環境，web瀏覽器中被認爲是window對象。
在初始化代碼時會先進入全局上下文中，每當一個函數被調用時就會爲該函數建立一個執行上下文，每一個函數都有本身的執行上下文。
總結：（執行上下文就用EC替代）

1. 全局上下文壓入棧頂

2. 執行某一函數就爲其建立一個EC，並壓入棧頂

3. 棧頂的函數執行完以後它的EC就會從ECS中彈出，而且變量對象(VO)隨之銷燬

4. 全部函數執行完以後ECS中只剩下全局上下文，在應用關閉時銷燬

三，VO/AO

VO(變量對象)

建立執行上下文時與之關聯的會有一個變量對象，該上下文中的全部變量和函數全都保存在這個對象中。

AO(活動對象)

進入到一個執行上下文時，此執行上下文中的變量和函數均可以被訪問到，能夠理解爲被激活。

談到了上下文的建立和執行，咱們來看看EC創建的過程：

創建階段：(函數被調用，可是還未執行函數中的代碼)

1. 建立arguments，變量，函數

2. 創建做用域鏈

3. 肯定this的值

執行階段：變量賦值，函數引用，執行代碼

執行上下文爲一個對象，包含VO，做用域鏈和this

具體過程：

1. 找到當前上下文調用函數的代碼

2. 執行代碼以前，先建立執行上下文

3. 建立階段：

3-1. 建立變量對象(VO)：

1. 建立arguments，檢查當前上下文的參數，創建該對象下的屬性和屬性值

2. 掃描上下文的函數申明：
1. 每掃描到一個函數什麼就會在VO裏面用函數名建立一個屬性，爲一個指針，指向該函數在內存中的地址

2. 若是函數名在VO中已經存在，對應的屬性值會被新的引用覆蓋

3. 掃描上下文的變量申明：

1. 每掃描到一個變量就會用變量名做爲屬性名，其值初始化爲undefined

2. 若是該變量名在VO中已經存在，則直接跳過繼續掃描

3-2. 初始化做用域鏈

3-3. 肯定上下文中this的指向

4. 代碼執行階段

4-1. 執行函數體中的代碼，給VO中的變量賦值

四，變量提高

不少人都知道變量提高，變量值爲undefined時就說是變量提高形成的，如今你們應該就知道爲何了

function foo() {

console.log(f1); //f1() {}

console.log(f2); //undefined


var f1 = 'hosting';

var f2 = function() {}

function f1() {}
}

foo();

爲何能在申明以前就能調用也就是所謂的變量提高：

由於調用foo()時會建立VO，初始VO中變量值等有一系列的過程，全部變量初始化值爲undefined，因此console.log(f2)的值爲undefined。
而且函數申明先於變量申明，因此console.log(f1)的值爲f1()函數而不爲hosting。

五，總結

1. 調用函數是會爲其建立執行上下文，並壓入執行環境棧的棧頂，執行完畢彈出，執行上下文被銷燬，隨之VO也被銷燬

2. EC建立階段分建立階段和代碼執行階段

3. 建立階段初始變量值爲undefined，執行階段才爲變量賦值

4. 函數申明先於變量申明
---------------------

一，做用域
包括靜態做用域和動態做用域，靜態做用域也叫詞法做用域，
javascript採用的是靜態做用域。

js中做用域是指可訪問變量，對象，函數的集合，也就是調用它們能生效的代碼區塊。
在js中沒有塊級做用域，只有全局做用域和函數做用域，能夠模仿塊級做用域。

1-1 全局，函數做用域舉個很簡單的列子
var b =c = 20 是指 var b =c； c=20；
f1函數中c沒有使用var 聲明爲全局變量，b爲局部變量，綁定在f1函數下,外部訪問不到。

1-2 模仿塊級做用域
沒有塊級做用域但有if(),for()等塊語句,在塊語句內部定義的變量會保留在它們已經存在
的做用域內。 if()語句存在全局做用域下,全部內部定義的變量存在於全局做用域中,
不管在哪裏都能訪問到.

1-3 使用自執行的匿名函數包裹塊的語句構建塊做用域,也叫私有做用域.

1-4做用域就是變量與函數的可訪問範圍，即做用域控制着變量與函數的可見性和生命週期。
在javascript中，變量的做用域分爲全局和局部兩種。

！！！！擁有全局做用域就是在代碼任何地方都可以訪問到，叫作全局變量.
如下3種狀況能夠擁有全局做用域
1.最外層函數和最外層函數外面定義的變量
2. 未定義直接賦值的變量
3.全部window對象:
通常狀況下,全部window對象的內置屬性都擁有全局做用域,如window.location

！！！！！局部做用域
局部做用域只在固定的代碼片斷內可訪問到.

函數做用域
這裏把函數做用域單獨提出來說並非由於它和局部還有全局是平級關係，而是因爲其比較特殊。
JavaScript中的函數運行在它們被定義的做用域裏,而不是它們被執行的做用域裏.

做用域鏈(重點)
下面咱們說說做用域鏈，在javascript中，函數也是對象，實際上，javascript中的一切都是對象。函數內部有一個只給javascript引擎訪問的內部屬性是[[scope]]，
該屬性包含了函數建立時的做用域中對象的集合，這個集合就叫作做用域鏈。

 /*function test() {
       var num= 100;
       function a() {
           num++;
           console.log(num);
       }
       function b() {
           num--;
           console.log(num);
       }
       return [a,b];
   }
   var myArr = test();
   myArr[0]();
   myArr[1]();*/
   // 不管test函數裏面寫多少函數  他們連着的都是test的AO.  a函數先使test的AO裏面的num++，而後b函數在調用a運行後改過的test的AO.

閉包

1.當內部函數被保存到外部時，將會生成閉包。閉包會致使原有做用做用鏈域不釋放，形成內存泄漏

閉包的做用 1.實現公有化變量 eg：函數累加器

2.能夠作緩存（存儲結構） eg：eater

3.能夠實現封裝，屬性私有化 eg：Person（）；

4.模塊化開發，防止污染全局化變量

快速判斷閉包：三點
1.嵌套函數
2.內層函數，必定操做了外層函數的局部變量
3.外層函數必定將內層函數返回到外部保存在一個全局變量中

斷定閉包的執行結果：
1. 外層函數被調用幾回，就有幾個受保護的局部變量副本.
2. 來自一個閉包的函數被調用幾回，受保護的局部變量就變化幾回

// 1 使用閉包實現函數累加器
      /*function add(){
          var num = 0;
          function a() {
              console.log(++num);
          }
          return a;  //a函數在執行，始終保存2個不變的空間（AO和GO），進行累加的時候，加的是別人的空間，空間不會隨着每次累加結束消失，每次累加的值會接着上次的值進行累加。
      }
      var myAdd= add();
      myAdd();
      myAdd();
      myAdd();*/

//2 閉包 能夠作緩存
      /*function test() {
          var food = 'apple';
          var obj= {
            eatFood : function(){
                if(food != ""){
                    console.log("I an eating"+food);
                    food="";
                }
                else{
                        console.log("There is nothing! empty!");
                     }
                
            }, 
            pushFood : function (myFood) {
                food =myFood;
            }
            
          }
            return obj;  // 多個函數同時閉包，至關於全保存到 外部執行，他們用的都是test（）執行過程，
             //也就是說用的是同一個做用域。
      }
      var person = test();
      person.eatFood();
      person.eatFood();
      person.pushFood('banana');
      person.eatFood();*/

命名空間的使用 閉包第4功能 模塊化開發
            /* var wife = (function (){

                     var name = "xiaoxin";
                     function LoveName(){
                         console.log(name);
                     }
                     return function(){
                         LoveName();
                     }
                   
              }())
                wife();  //功能實現 不會污染全局變量  使用閉包私有化的功能

當即執行函數的兩種格式針對初始化功能的函數

1.(function(){}());

2.(function(){})();

 //只有表達式才能被執行

  /* function test() {
   }
   var demo = function (){
       console.log('a');
   }();*/  
   // 一旦一個表達式被執行，它就會失去對原來函數的縮影，下次這個demo就不是函數，就失去了定義函數的功能，就變成空的。
   //在函數面前加+、 -、 ！ 、||、 &&、也會成爲當即執行函數

  /*(function test () {
    console.log('a');
  })();

  (function test (){
      console.log('a');
  }());*/  //這2種都是當即執行函數

 function test(){
          var arr=[];
          for(var i= 0;i<10;i++)
          {
          arr[i]=function(){
              document.write(i+" ");
          } // 這個函數被執行時 i纔會改變 也就是說這個函數裏面打印i的值不會隨for循環的i改變而改變，只有這個函數在外部執行 i的時候，在返回去找i的值，i已經for循環變成10了，因此輸出的i爲10；
          } // 先將for循環轉完 在返回 arr ，返回的結果爲10；
          return arr;
      }
      var myArr = test();
      for(var j =0;j<10;j++)
      {
          myArr[j]();//執行這個的時候就會去執行document.write(i+" ");
      } */

function test() {
      var arr=[];
      for(var i = 0;i<10;i++){
          (function (j) {
              arr[j] =function(){
                  document.write(j+" ");
              } 
          }(i)) //當即執行函數 當i通過for循環將值傳遞給j時，每次循環裏面的函數保存的值都是當前j的值，而後傳遞給arr，每次當即函數執行玩就銷燬了 進行下次循環，從新開始，每次保存的都是0~9的值，不一樣的傳遞給arr，輸出的就是0~9，可是i仍是10 ，
由於是打印的j的值。
      }    //當即執行函數放在for循環的時候，好比說循環10次，
      當即執行函數就至關於寫了10次當即執行函數，每一次循環都產生了新的當即執行函數。
      return arr;
  }
  var myArr=test();
  for(var j = 0; j < 10; j++)
  {
       myArr[j]();
  }*/

1.對象

1.對象的建立方法直接 var obj={}；

2.構造函數 1.系統自帶的構造函數 Object 2.自定義

var obj =new Object（）； 
//執行一次 產生一個對象，對象同樣，但時兩個不一樣的人

  obj.name = 123
obj.say =function(){}  這樣就能直接往obj裏面加屬性

自定義函數格式

 //大坨峯式命名規則 函數首字母大寫
  function Person(){}
var person =new Person();  構造函數
往裏面加東西 直接 person.name = 123

構造函數內部的原理

1.在函數體最前面隱式的加上 this={}

2.執行this.xxx=xxx;

3.隱式的返回this 執行new 才能發生這三步

對象的用法

var mrLi = {
            name : "mrLi",
            sex  : "male",
            age  : 15,
            wife : "xiaoxin",
            smoke : function(){
                console.log("I am smoke!!!  cool!")
            },
            drink : function(){
                console.log("I like mile!!!");
            }
        }
        */

        //增長對象  
       //   mrLi.health=100;
        //刪除對象
        //delete mrLi.health;

 //定義對象的方式 ( 構造函數)
              /*  function Person(name,height){
             var that = {};
             that.name = name;
             that.height = height;
             return that;
         }   
         var person = Person('xiaoxin',180);
         var person1 = Person('xiaoli',175);*/

包裝類

var num  = 4; 
num.len=3;
console.log(num.len);

//new Number (4).len=3   delete 
 會先新建一個用來存儲 ，而後刪除，在新建一個 
就變成了 new Number（4）.len    返回的undefined

原型

#原型
原型的本質：對象
.全部引用類型都有一個_proto_(隱式原型)屬性，屬性值是一個普通的對象
- 全部的**函數**都有原型屬性「prototype」
- 默認狀況下，」prototype「是一個Object對象

prototype中默認包含一個屬性：constructor，該屬性指向函數對象自己

#隱式原型
-因此的對象都有隱式原型 "__proto__"屬性
-隱式原型是一個對象，指向建立該對象的構造函數的原型「prototype」
-在查找對象成員時，若對象自己沒有該成員，則會到隱式原型中查找

擴充內容>隱式原型和原型出現的根本原型：js沒有記錄類型的元數據，所以，js只能
經過對象的隱式原型找到建立它的函數的原型，從而肯定其類型

全部的引用類型，_proto_屬性值指向它的構造函數的"prototype"屬性值

全部函數的隱式原型，都指向Function的原型

全部的函數原型的隱式原型，都指向Object的原型

 //原型的增刪改查 
          Person.prototype.LastName="Li";//只能從新增長原型賦值才能增長原型
          function Person(name){
              this.name=name;
          }
          var person=new Person("xiaoxin");
          person.LastName="xiaoxinxin";
          // person.constructor能夠找到它的構造函數
          //只能改變對象，使對象的值改變，不可能經過對象去改變原型的值。
           //當原型屬性多的話能夠這樣寫
           Person.prototype={
                   wife:"xiaoxin",
                   laogong:"xiaoxin",
                   height:1400

           }*/

原型鏈

-因爲原型「prototype」自己時對象，所以，它也有隱式原型，指向的規則不變；這樣
一來，從某個對象出發，依次尋找隱式原型的指向，將造成一個鏈條，該鏈條叫作原型鏈。
-在查找對象成員時，若對象自己沒有該成員，則會到原型鏈中查找
-特殊的兩個狀況
-Function的隱式原型指向本身的原型
- Object原型的隱式原型指向null

               //Grand.prototype.prototype 指向的是object.prototype     
               //object.prototype是原型鏈的終端
         /*   Grand.prototype.LastName="Deng";
             function Grand(){

             }
             var grand =new Grand;
             Father.prototype = grand;
             function Father(){
                     this.name = 'xiaoxin';
                     this.fortune = {
                         card1:'visa'
                     }
             }
             var father = new Father ();
             Son.prototype=father;
             function Son(){
                this.hobbit="smoke";
             }
             var son = new Son();  //這是原型鏈  鏈接原型鏈的是prototype. 一路順着protorype找到值.
        //原型鏈的增刪改查 和原型的差很少  只能自身改，不能經過它的子孫改.
              //son.fortune.card2 ='xiaoxin'能夠經過這樣去改變或增長父親的值 */

apply() 和call()相同點：這兩個方法的做用是同樣的。
都是在特定的做用域中調用函數，等於設置函數體內this對象的值，以擴充函數賴以運行的做用域。
通常來講，this老是指向調用某個方法的對象，可是使用call()和apply()方法時，就會改變this的指向。

2不一樣點：接收參數的方式不一樣。

apply()方法接收兩個參數，一個是函數運行的做用域（this），另外一個是參數數組。

語法：apply([thisObj [,argArray] ]);，
調用一個對象的一個方法，2另外一個對象替換當前對象。

說明：若是argArray不是一個有效數組或不是arguments對象，那麼將致使一個
TypeError，若是沒有提供argArray和thisObj任何一個參數，那麼Global對象將用做thisObj。

call()方法第一個參數和apply()方法的同樣，可是傳遞給函數的參數必須列舉出來。

語法：call([thisObject[,arg1 [,arg2 [,...,argn]]]]);，
應用某一對象的一個方法，用另外一個對象替換當前對象。

說明： call方法能夠用來代替另外一個對象調用一個方法，call方法能夠將一個函數的對象上下文從初始的上下文改變爲thisObj指定的新對象，若是沒有提供thisObj參數，那麼Global對象被用於thisObj。

call的運用
                 /*   function Person(name,age,sex){
                       this.name = name;
                       this.age = age;
                       this.sex = sex;
                   }
                   function Student (name,age,sex,tel,grade){
                        //var this ={}
                        Person.call(this,name,age,sex);//借用別人的函數 實現本身的功能  至關於把Person 的3個功能調用過來了
                        this.tel = tel;
                        this.grade = grade;
                   }
                   var student = new Student('sunny',123,'male',139,2017);

function Wheel(wheelSize,style) {
                         
                          this.wheelSize=wheelSize;
                           this.style=style;
                   }
                   function Sit (c,sitColor)  {
                       this.c=c;
                       this.sitColor =sitColor;
                   }
                   function Model (height,width,len){
                       this.height=height;
                       this.width=width;
                       this.len = len;
                   }
                   function Car(wheelSize,style,c,sitColor,height,width,len){
                      Wheel.apply(this,[wheelSize,style]);
                      Sit.call(this,c,sitColor);
                      Model.call(this,height,width,len);
                   }
                   var car = new Car(62,'花裏胡哨','真皮','black',52,52,32);*/

this的含義及理解
1.函數預編譯過程 this-->window
2.全局做用域裏 this -->window
3.call/apply 能夠改變函數運行時this的指向
4.obj.func(); func()裏面的this指向obj

//js 聖盃模式
             Father.prototype.LastName="xiaoxin"; 
            function Father() {
              this.name ="xaf"

            }
            function Son(){

            }
          var  inherit = (function(){
                      function F(){ };
                      return function (Target,Origin){
                     F.prototype = Origin.prototype;
                     Target.prototype = new F();
                     Target.prototype.constructor=Target;
                     }
                 }())
           inherit(Son,Father);                     這樣給son.prototype加屬性就不會影響到Father.prototype 並且還繼承了Father.prototype  經過原型鏈的繼承
           Son.prototype.wife="asff";
            var son = new Son();
            var father = new Father();

對象的枚舉

1. for in

var obj = {
             name : "xiaoxin",
             age :123,
             sex : 'female',
             height : 180,
             weight : 75,
             __proto__ :{
                 lastName : "xiaoli",
             }

         }
          for (var x in obj){
             console.log(obj[x]);  
             //它會經過原型鏈  將__proto__裏面的屬性訪問出來

         }

1. hasOwnProperty 判斷是否是自身的屬性

for(var x in obj){
             if(obj.hasOwnProperty(x)){     //這個if是判斷本身屬性 不會去找屬性裏面的原型或原型鏈 若是是本身的屬性就輸出 不是就不會輸出 
                 console.log(obj[x]);
             }

2. instanceof 用法

            function Person (){

             }
              var person = new Person(); 
                // 看A對象 是否是 B構造函數 構造出來的

                // 但看的是   A對象的原型鏈上  有沒有 B的原型    

                 //person instanceof Person

DOM——>Document.Object.Model 用來操做html xml功能的一類對象的集合

DOM基本操做

1.遍歷節點樹 +遍歷元素節點樹+節點的類型+節點的屬性

// 遍歷節點樹 任何瀏覽器都好使
           /*var strong = document.getElementsByTagName('strong')[0]
             strong.parentNode //存的是他父親 是div
             strong.parentNode.parentNode //存的是div的父親 body
             strong.parentNode.parentNode.parentNode //存的是body的父親 html
            var div = document.getElementsByTagName('div')[0];
              div.childNodes //存的是div的全部子節點 包括文本節點也算在裏面
              div.firstChild // 存的是第一個節點  文本節點
              div.lastChild //存的是最後一個節點 也是文本節點
          strong.nextSibling //存的是下一個兄弟節點  文本也算節點*/
          //strong.previousSibling//存的前一個兄弟節點

            
             
            //基於元素節點樹的遍歷
            //var div = document.getElementsByTagName('div')[0];
            // div.parentElement 返回當前元素的父元素節點  返回的是父親節點 裏面包括這個父親裏面全部的子節點
            // div.children   返回當前元素的子元素節點  但返回的是當前元素裏面全部的子節點
            //div.childElementCount ===div.children.length 返回的是當前元素子節點的數量
            //div.firstElementChild  返回第一個元素子節點
            //div.lastElementChild  返回最後一個元素子節點
             //div.nextElementSibling  返回後一個兄弟節點
             //div.previousElementSibling 返回前一個兄弟節點

              
               //節點的類型
              // 元素節點——1  屬性節點——2 （id class 是屬性節點）  文本節點——3
              // 註釋節點——8   document——9  DocumentFragment——44
              //獲取節點屬性 nodeType

           
           //節點的4個屬性 
           //var div = document.getElementsByTagName('div')[0];
            //div.firstChild.nodeName 返回的是第一個節點的名字
            //div.childNodes[1].nodeName 返回第2個節點名稱  只可讀 不可改
            //div.childNodes[0].nodeValue 能夠返回的是文本內容,可修改裏面的值  註釋也能修改
            //div.childNodes[0].nodeType //返回的是節點類型 不可改  是數值
            //div.hasChildNodes() 判斷div是否有子節點  
            //空格回車也算節點是文本節點 除非裏面什麼都沒有才輸出flase  輸出true或flase


                   //DOM元素的增刪插替換
                 /* var div = document.getElementsByTagName('div')[0];
                  var text = document.createTextNode('鑫baobao');
                  var span = document.createElement('span');
                  div.appendChild(text);
                  div.appendChild(text);
                  var text1=document.createTextNode('小鑫寶寶');
                  span.appendChild(text1);
                  document.body.appendChild(span);*/

               //插入節點
             /* var div = document.getElementsByTagName('div')[0];
              var span = document.getElementsByTagName('span')[0];
              var strong = document.createElement('strong');
              div.insretBefore(strong,span); //會在span標籤以前插入strong標籤*/



              //刪除標籤
             /* var div = document.getElementsByTagName('div')[0];
              var span  = document.getElementsByTagName('span')[0];
              div.removeChild(span);//剪切出來 給變量保存 還要用的狀況下
               span.remove()//完全刪除標籤 這是沒有用的狀況下  要將標籤先取出來 才能刪除*/

             //標籤替換
              /* var div = document.getElementsByTagName('div')[0];
               var p = document.createElement('p');
               var i = document.getElementsByTagName('i')[0];
               div.replaceChild(p,i); //新建立的p標籤和div裏面的i標籤替換了*/



             //innerHTML
          /*       var div = document.getElementsByTagName('div')[0];
               div.innerHTML = 234;//能夠改變div裏面的值
                div.innerHTML = "<span style = 'backgroundColor:red;>123</span> "//也能夠這樣寫
               var b = div.innertext; //取文本內容
                
                div.setAttribute('class','demo')//爲div加一個屬性值 class："demo";
                 */
     
              //getAttribute 的用法
              var div = document.getElementsByTagName('div')[0];
        var a = document.getElementsByTagName('a')[0];
         a.onclick = function(){
         console.log(this.getAttribute('data-log'));
      }

格式：標籤名.parentNode->父節點

 <script type="text/javascript"> //帶s的都是選擇一組 除了id之外，都是選擇一組，有組就能循環遍歷
     var div  =document.getElementById('only');//經過Id選擇元素
     var div  =document.getElementsByTagName('div');//經過標籤名選擇元素，將頁面裏面全部的div選擇出來
     var div = document.getElementsByClassName('demo')[0];//經過class名來選擇元素加個[0]是單獨選擇一個
     var div =document.getElementsByName('fruit');// 只有標籤中帶有name的屬性 才能使用
     var strong = document.querySelector('div > span strong.demo1');//跟css選擇器同樣  寫在括號裏面
     var strong = document.querySelectorAll('div >span strong.demo1 ')
       
       var div = document.getElementsByTagName('*')[0];//選擇全部標籤
           
         var div = document.querySelectorAll('div'); //body裏面有多少個div 它就有多少,後面不管添加刪除 它只有body裏面的全部div

        var newDiv =document.createElement('div'); //建立一個div
         document.body.appendChild(newDiv);//將建立的div放進body中
     </script>

DOM元素的增刪改查

增：1.document.createElement();建立一個元素節點方法
()裏面寫什麼就會建立什麼標籤
2.document.createTextNode(); 建立文本節點
3.document.createComment();建立註釋節點
4.document.createDocumentFragment();

插 1. document.appendChild(); 插入元素，或文本節點的
 2.document.insertBefore(a,b) 會b標籤以前插入a標籤


刪 1.parent.removeChild(); 若是標籤還要用,能夠用這個剪切出來,
用個變量保存
2.child.remove();完全刪除標籤

替換
parent.replaceChild(new,origin) 用新的元素替換老的元素

Element節點的一些屬性

1. document.innerHTML  往標籤裏面插入內容
2.innerText（火狐不兼容）/  textContent(老版本IE不兼容)

2.Element節點的一些方法
1.document.setAttribute('class','demo'); 爲這個標籤添加了一個屬性值
2.document.getAttribute(); 取出標籤裏面的屬性 好比data-log

3.dom.className=「」能夠在標籤裏面添加class屬性

日期對象Date()

Date 對象用於處理日期與時間。

建立 Date 對象： new Date()

先建立一個Date對象
var date=new Date();
   date.getDate();從Date對象返回一個月中的某一天
  date.getDay() 從Date對象返回一週中的某一天
  date.getFullYear() 從 Date 對象以四位數字返回年份。
  date.getHours() 返回Date對象的小時
 date.getMinutes() 返回對象的毫秒
 date.getMonth()  返回對象的月份
 date.getSeconds() 返回對象的秒數
  
  date.setFullYear() 設置Date對象中的年份(四位數字)

對Date的擴展，將 Date 轉化爲指定格式的String // 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 能夠用 1-2 個佔位符，

// 年(y)能夠用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字) //

Format將日期格式化

例子： // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18

js計時事件

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setInterval() - 間隔指定的毫秒數不停地執行指定的代碼。

setTimeout() - 在指定的毫秒數後執行指定代碼。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法

setInterval()方法

語法
window.setInterval("javascript function",milliseconds);
window.setInterval() 方法能夠不使用 window 前綴，直接使用函數 setInterval()。
setInterval() 第一個參數是函數（function）。
第二個參數間隔的毫秒數
注意: 1000 毫秒是一秒。

格式加用法
         setIntervar(function(){},1000)

clearInterval() 方法用於中止 setInterval() 方法執行的函數代碼。

語法
window.clearInterval(intervalVariable)
window.clearInterval() 方法能夠不使用window前綴，直接使用函數clearInterval()。
要使用 clearInterval() 方法, 在建立計時方法時你必須使用全局變量：
myVar=setInterval("javascript function",milliseconds);
而後你可使用 clearInterval() 方法來中止執行。

格式加用法
var timer = setInterval(unction(){},1000)
 clearInterval(timer)

setTimeout()方法

語法
myVar= window.setTimeout("javascript function", milliseconds);
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 myVar 的變量中。
假如你但願取消這個 setTimeout()，你可使用這個變量名來指定它。

setTimeout() 的第一個參數是含有 JavaScript 語句的字符。
第二個參數指示從當前起多少毫秒後執行第一個參數。
提示：1000 毫秒等於一秒。

格式加用法
setTimeout(function(){},1000)

clearTimeout() 方法用於中止執行setTimeout()方法的函數代碼

語法
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法能夠不使用window 前綴。

要使用clearTimeout() 方法, 你必須在建立超時方法中（setTimeout）使用全局變量:

myVar=setTimeout("javascript function",milliseconds);
若是函數還未被執行，你可使用 clearTimeout() 方法來中止執行函數代碼。

格式加用法
var timer=setTimeout( function(){},1000);
clearTImeout(timer)

語法
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法能夠不使用window 前綴。

要使用clearTimeout() 方法, 你必須在建立超時方法中（setTimeout）使用全局變量:

myVar=setTimeout("javascript function",milliseconds);
若是函數還未被執行，你可使用 clearTimeout() 方法來中止執行函數代碼。

格式加用法
var timer=setTimeout( function(){},1000);
clearTImeout(timer)

語法
window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法能夠不使用window 前綴。

要使用clearTimeout() 方法, 你必須在建立超時方法中（setTimeout）使用全局變量:

myVar=setTimeout("javascript function",milliseconds);
若是函數還未被執行，你可使用 clearTimeout() 方法來中止執行函數代碼。

格式加用法
var timer=setTimeout( function(){},1000);
clearTImeout(timer)

瀏覽器對象模型(BOM)

Window 對象

全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一：

Window 尺寸

有三種方法可以肯定瀏覽器窗口的尺寸。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器窗口的內部高度(包括滾動條)

window.innerWidth - 瀏覽器窗口的內部寬度(包括滾動條)

對於 Internet Explorer 八、七、六、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

Window Screen

window.screen對象在編寫時能夠不使用 window 這個前綴。

一些屬性：

screen.availWidth - 可用的屏幕寬度 screen.availHeight - 可用的屏幕高度

Window Location

window.location 對象在編寫時可不使用 window 這個前綴。一些例子：

一些實例:

location.hostname 返回 web 主機的域名 location.pathname 返回當前頁面的路徑和文件名 location.port 返回 web 主機的端口 （80 或 443） location.protocol 返回所使用的 web 協議（http: 或 https:

Window History

window.history對象在編寫時可不使用 window 這個前綴。

爲了保護用戶隱私，對 JavaScript 訪問該對象的方法作出了限制。

一些方法：

history.back() - 與在瀏覽器點擊後退按鈕相同

history.forward() - 與在瀏覽器中點擊向前按鈕相同

除此以外能夠用 history.go() 這個方法來實現向前，後退的功能

function a(){ history.go(1); // go() 裏面的參數表示跳轉頁面的個數 例如 history.go(1) 表示前進一個頁面 } function b(){ history.go(-1); // go() 裏面的參數表示跳轉頁面的個數 例如 history.go(-1) 表示後退一個頁面 }

1.DOM基本操做

1.查看滾動條的滾動距離

1.1 window.pageXOffset pageXOffset表示水平方向上頁面滾動的像素值

1.2window.pageYOffset pageYOffset表示垂直方向上頁面滾動的像素值 IE9以上能用 IE8及IE8如下不兼容

2.document.(body/document.Element).scrollLeft 橫向滾動條

2.1document.(body/document.Element).scrollTop 縱向滾動條

兼容性比較混亂，用時取兩個值相加，由於不可能存在兩個同時有值，其中一個會變成0

1.查看元素的幾何尺寸

1.1document.getBoundingClientRect();

1.2兼容性很好

1.3該方法返回一個對象，對象裏面有left，top，right，bottom等

left 和top表明該元素的左上角的X和Y座標，right和bottom表明右下角的X和Y座標

1.4 height和width屬性老版本IE並未實現

1.5返回的結果不是實時的

取值：

document.getBoundingClientRect().left 左上角的座標

1.查看元素的位置

1. document.offsetLeft

1.1 document.offsetTop

1.2對於無定位父級的元素，返回相對文檔的座標，對於有父級的元素，返回相對於最近的有定位的父級的座標

1.3 document.offsetParent 返回最近的有定位的父級，如無，返回body，body.offsetParent

1.4查看元素的尺寸 1.document.offsetWidth 元素的寬度 2document.offsetHeight 元素的高度

讓滾動條滾動

1.window有三個方法

1.1 scroll() 1.2scrollTo() 1.3scrollBy()

1.4 三個功能相似，用法都是將X，Y座標傳入。即實現讓滾動輪滾到當前位置

1.5 區別：scrollBy（）會在以前的數據基礎上作累加

使滾動條滾動位置直接調用該方法就行

事件的幾種類型

ele.onxxx = function(event){}  可是一個元素的同一事件只能綁定一個  等同於寫在HTML裏面

obj.addEventListener(type,fn,false);   能夠爲一個事件綁定多個處理程序

obj.attachEvent('on'+type,fn)    IE獨有 一樣能夠爲一個事件綁定多個處理類型

事件處理程序的運行環境

ele.onxxx=function(event){}  程序裏面的this指向dom元素自己

obj.addEventListener(type,fn,false);  程序裏的this指向dom元素自己

obj.attachEvent('on'+type,fn);   程序this指向window

解除事件處理程序

ele.onclick = false/''/null;

ele.removeEventListener(type,fn,false);  和 ele.addEventListener裏面的事件類型 函數 要對應

ele.detachEvent('on'+type,fn);  注意 若綁定匿名函數，則沒法解除

事件處理模型——事件冒泡、捕獲

1事件冒泡：結構上（非視覺上）嵌套關係的元素，會有在事件冒泡的功能，即同一事件自子元素冒泡向父元素.(自底向上)。

2事件捕獲：結構上（非視覺上）嵌套關係的元素，會存在事件捕獲的功能，即同一事件，自父元素捕獲至子元素（事件源元素）.（自頂向下）

只需將addEventListener裏false改成true就會捕獲 （IE沒有捕獲事件）

3觸發順序：先捕獲，後冒泡（前提是綁定兩個函數，一個爲捕獲，一個爲冒泡）

4 focus、blur、change、submit、rest、select等不冒泡

取消冒泡和阻止默認事件

1 取消冒泡 1 .W3C標準 event.stopPropagation();但不支持IE9一下版本二、IE獨有 event.cancelbubble= true;

2 阻止默認事件

1 默認事件——表單提交，a標籤跳轉，右鍵菜單等

2 return false；以對象屬性的方法註冊的事件才生效

3 event.preventDefault()；W3C標準 IE9一下不兼容

4 event.returnValue= false; 兼容IE

事件對象

1 event || window.event 用於IE 獲取對象屬性

2 事件源對象 1.event.target 火狐只有這個 2.event.srcElement IE只有這個

3 這兩個 chrome都有

事件委託

1 利用事件冒泡和事件源對象進行處理

2 優勢 1. 性能不須要循環全部的元素一個個綁定事件 2.靈活當有新的子元素時不須要從新綁定事件

js添加和刪除class類名

方法1.

添加：document.getElementById("id").classList.add("類名")；

刪除：document.getElementById("id").classList.remove("類名")；

方法2

var classVal=document.getElementById("id").getAttribute("class");

添加：document.getElementById("id").setAttribute("class",classVal.concat(" 類名"));

刪除：document.getElementById("id").getAttribute("class").replace("類名"," ");

方法3.

添加：document.getElementById("id").className+=" 類名";

JS事件（重要之最）

onclick鼠標點擊時觸發此事件

ondblclick鼠標雙擊時觸發此事件

onmousedown按下鼠標時觸發此事件

onmouseup鼠標按下後鬆開鼠標時觸發此事件

onmouseover當鼠標移動到某對象範圍的上方時觸發此事件

onmousemove鼠標移動時觸發此事件

onmouseout當鼠標離開某對象範圍時觸發此事件

onkeypress當鍵盤上的某個鍵被按下而且釋放時觸發此事件

.onkeydown當鍵盤上某個按鍵被按下時觸發此事件

onkeyup當鍵盤上某個按鍵被按放開時觸發此事件頁面相關事件

onabort圖片在下載時被用戶中斷

onbeforeunload當前頁面的內容將要被改變時觸發此事件

onerror出現錯誤時觸發此事件

onload頁面內容完成時觸發此事件

onmove瀏覽器的窗口被移動時觸發此事件

onresize當瀏覽器的窗口大小被改變時觸發此事件

onscroll瀏覽器的滾動條位置發生變化時觸發此事件

onstop瀏覽器的中止按鈕被按下時觸發此事件或者正在下載的文件被中斷onunload當前頁面將被改變時觸發此事件表單相關事件

onblur當前元素失去焦點時觸發此事件

onchange當前元素失去焦點而且元素的內容發生改變而觸發此事件

onfocus當某個元素得到焦點時觸發此事件

onreset當表單中RESET的屬性被激發時觸發此事件onsubmitIE3 、N2一個表單被遞交時觸發此事件滾動字幕事件onbounceIE四、N在Marquee內的內容移動至Marquee顯示範圍以外時觸發此事件

onfinish當Marquee元素完成須要顯示的內容後觸發此事件

onstart當Marquee元素開始顯示內容時觸發此事件編輯事件

onbeforecopy當頁面當前的被選擇內容將要複製到瀏覽者系統的剪貼板前觸發此事件

onbeforecut當頁面中的一部分或者所有的內容將被移離當前頁面[剪貼]並移動到瀏覽者的系統剪貼板時觸發此事件

onbeforeeditfocus當前元素將要進入編輯狀態

onbeforepaste內容將要從瀏覽者的系統剪貼板傳送[粘貼]到頁面中時觸發此事件onbeforeupdateIE五、 N當瀏覽者粘貼系統剪貼板中的內容時通知目標對象

oncontextmenu當瀏覽者按下鼠標右鍵出現菜單時或者經過鍵盤的按鍵觸發頁面菜單時觸發的事件

oncopy當頁面當前的被選擇內容被複制後觸發此事件

oncut當頁面當前的被選擇內容被剪切時觸發此事件

ondrag當某個對象被拖動時觸發此事件 [活動事件]

ondragdrop一個外部對象被鼠標拖進當前窗口或者幀

ondragend當鼠標拖動結束時觸發此事件，即鼠標的按鈕被釋放了

ondragenter當對象被鼠標拖動的對象進入其容器範圍內時觸發此事件

ondragleave當對象被鼠標拖動的對象離開其容器範圍內時觸發此事件

ondragover當某被拖動的對象在另外一對象容器範圍內拖動時觸發此事件

ondragstart當某對象將被拖動時觸發此事件

ondrop在一個拖動過程當中，釋放鼠標鍵時觸發此事件

onlosecapture當元素失去鼠標移動所造成的選擇焦點時觸發此事件

onpaste當內容被粘貼時觸發此事件onselectIE四、N當文本內容被選擇時的事件

onselectstart當文本內容選擇將開始發生時觸發的事件數據綁定

onafterupdate當數據完成由數據源到對象的傳送時觸發此事件

oncellchange當數據來源發生變化時

ondataavailable當數據接收完成時觸發事件

ondatasetchanged數據在數據源發生變化時觸發的事件

ondatasetcomplete當來子數據源的所有有效數據讀取完畢時觸發此事件

onerrorupdate當使用onBeforeUpdate事件觸發取消了數據傳送時，代替onAfterUpdate事件

onrowenter當前數據源的數據發生變化而且有新的有效數據時觸發的事件

onrowexit當前數據源的數據將要發生變化時觸發的事件

onrowsdelete當前數據記錄將被刪除時觸發此事件

onrowsinserted當前數據源將要插入新數據記錄時觸發此事件外部事件

onafterprint當文檔被打印後觸發此事件

onbeforeprint當文檔即將打印時觸發此事件

onfilterchange當某個對象的濾鏡效果發生變化時觸發的事件

onhelp當瀏覽者按下F1或者瀏覽器的幫助選擇時觸發此事件

onpropertychange當對象的屬性之一發生變化時觸發此事件

onreadystatechange當對象的初始化屬性值發生變化時觸發此事件

transitionend 事件

定義和用法

transitionend 事件在 CSS 完成過渡後觸發。

注意： 若是過渡在完成前移除，例如 CSS transition-property 屬性被移除，過渡事件將不被觸發。

更多關於 CSS 過渡，請查看咱們的 CSS3 過渡。

語法

object.addEventListener("webkitTransitionEnd", myScript); // Safari 3.1 到 6.0 代碼
object.addEventListener("transitionend", myScript); // Standard syntax

注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。

事件處理程序的運行環境

1. documen.onxxx =function(event) 程序this指向的時dom元素本事

2.addEventListener() 方法

addEventListener() 方法用於向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。

你能夠向一個元素添加多個事件句柄。

你能夠向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。

你能夠向任何 DOM 對象添加事件監聽，不只僅是 HTML 元素。如： window 對象。

addEventListener() 方法能夠更簡單的控制事件（冒泡與捕獲）。

當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也能夠添加事件監聽。

你可使用 removeEventListener() 方法來移除事件的監聽。

element.addEventListener(event, function, useCapture);
第一個參數是事件的類型 (如 "click" 或 "mousedown").

第二個參數是事件觸發後調用的函數。

第三個參數是個布爾值用於描述事件是冒泡仍是捕獲。該參數是可選的。 true 或flase

注意:不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。

格式  element.addEventListener("click", function(){ myFunction(p1, p2); });

3.document.attachEvent('on'+type,function);

type指的是事件 程序this指的是window

格式
 div.attachEvent('onclick',function(){
        handle.call(div);   這樣handle函數就指向divl
})

解除事件處理程序

1.ele.onclick=false / "" / null

2.ele.removeEventListener(type,function,false) type是事件解除事件時事件和函數要對應

3.ele.detachEvent('on'+type,function) 注意若綁定匿名函數，則沒法解除

js正則表達式基礎知識及應用

取值區間

\w===[0-9,A-z] \W===[^\w] \d===[0-9] \D===[^\d] \s===[\t \n \r \v \f] \S===[^\s] \b===單詞邊界 \B===非單詞邊界 .===[^\r \n]

eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。

語法 eval(string) 參數 string必需要計算的字符串，其中含有要計算的javascript表達式或要執行的語句

返回值

經過計算 string 獲得的值（若是有的話）。

說明

該方法只接受原始字符串做爲參數，若是 string 參數不是原始字符串，那麼該方法將不做任何改變地返回。所以請不要爲 eval() 函數傳遞 String 對象來做爲參數。

若是試圖覆蓋 eval 屬性或把 eval() 方法賦予另外一個屬性，並經過該屬性調用它，則 ECMAScript 實現容許拋出一個 EvalError 異常。

拋出

若是參數中沒有合法的表達式和語句，則拋出 SyntaxError 異常。

若是非法調用 eval()，則拋出 EvalError 異常。

若是傳遞給 eval() 的 Javascript 代碼生成了一個異常，eval() 將把該異常傳遞給調用者。

：雖然 eval() 的功能很是強大，但在實際使用中用到它的狀況並很少。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。