000 (H5*) 常見代碼

本文轉載自查看原文 2019-10-05 10:53 558 HTML

正文

1：HTML

1：塊級元素(block-level)

2：行內元素(inline-level)

3：行內塊元素（inline-block）

4: img標簽

src:圖像路徑

title：鼠標懸浮的時候顯示的文本

alt：圖片不顯示的時候，替換文本

border：邊框

5：表單元素

<input type="text" value="北京" style="color: #ccc;"

<input type="password" value="北京" style="color: #ccc;"

<input type="radio" value="北京" style="color: #ccc;"

<input type="checkbox" value="北京" style="color: #ccc;"

<input type="button" value="北京" style="color: #ccc;"

<input type="submit" value="北京" style="color: #ccc;"

<input type="reset" value="北京" style="color: #ccc;"

<input type="image" value="北京" style="color: #ccc;"

<input type="file" value="北京" style="color: #ccc;"

text password 文本密碼

radio checkbox(要有name屬性) 單選框復選框

button submit reset image 普通按鈕提交按鈕重置按鈕背景圖片按鈕

file 上傳文件按鈕

6：自定義列表 dl

<dl>

<dt>css網站</dt>

<dd>網址為www.divcss5.com</dd>

<dt>div css網站</dt>

<dd>網址為www.divcss5.com</dd>

<dt>div+css網站</dt>

<dd>網址為www.divcss5.com</dd>

</dl>

dl：defined list 自定義列表

dt:　　defined title 列表項標題

dd：　　defined　　description　　列表項描述

7：表格 Table

<caption>個人信息表</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

table：表格

caption：標題

thead 表頭

tbody：表格主體

tr：一行

th：表頭的單元格

td: 表格主體單元格

2：CSS

標簽類 id 通配符

后代子代

交集並集

偽類

1：標簽選擇器：

th {

　color:red;

}

2：class選擇器

.suibian {

　　 color: blue;

}

3：id選擇器

#last {

　　color: pink;

}

4：通配選擇器

* { /** 代表所有標簽的意思使用較少 */

color: pink;

}

5：后代選擇器

div p {

　　color: pink;

}

6：子代選擇器

ul > li > a {

color: pink;

}

7：交集選擇器

標簽選擇器和類選擇器

div.red { /*交集選擇器既是 div 又叫 red 滿足條件用的較少特殊情況使用了解 */

　　color: red;

}

8：並集選擇器

div,

span { /*並集選擇器用逗號隔開 , 代表和集體聲明適合於相同樣式 */

color: red;

}

9：鏈接偽類選擇器 LV hao

a:link { /* 未訪問過的連接狀態*/

color: #3c3c3c;

}

a:visited { /*這個鏈接我們已經點過的樣子已訪問過鏈接*/

color: orange;

}

a:hover { /*鼠標經過連接時候的樣子*/

color: #f10215;

}

a:active { /*鼠標按下時候的樣子*/

color: green;

}

10：font 風格權重大小字體

選擇器{font: font-style font-weight font-size/line-height font-family; 風格權重大小字體}

h1 {

font: italic 700 12px "微軟雅黑";

}

11：裝飾 text-decoration

div {

/*text-decoration: none; 取消裝飾*/

text-decoration: underline; /*下划線*/

/*text-decoration: overline; 上划線*/

/*text-decoration: line-through; 刪除線*/

}

12：背景 background

background: red url(image.jpg) repeat-y scroll 50% 0 ;

background:背景顏色背景圖片地址背景平鋪背景滾動背景位置x軸 y軸

如果是關鍵字

top center bottom

left center right

13：陰影 shadow

box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4) outset/inset;

box-shadow:水平位置垂直位置模糊距離陰影尺寸（影子大小）陰影顏色外/內陰影；

14：邊框 border

border: 1px solid red; /*上邊框*/

大小風格顏色

none：沒有邊框即忽略所有邊框的寬度（默認值）

solid：邊框為單實線(最為常用的)

dashed：邊框為虛線

dotted：邊框為點線

15：內邊距 padding

/*上下左右都是 20px*/

padding: 20px;

/*上下 10 左右 20*/

padding: 10px 20px;

/*上 10 左右 20 下是 30*/

padding: 10px 20px 30px;

/* 上 10 右20 下 30 左 40*/

padding: 10px 20px 30px 40px;

16：浮動為了讓塊元素在一行展示

1：float 浮漏特

浮：加了浮動的元素盒子是浮起來的，漂浮在其他的標准流盒子上面。

漏：加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏給了標准流的盒子。

特：特別注意，首先浮動的盒子需要和標准流的父級搭配使用，其次特別的注意浮動可以使元素顯示模式體現為行內塊特性。

不會超過內邊距

影響下面的元素

2：清除浮動本質

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。

3：清除浮動的方法

1:額外標簽法

<!-- 最后一個浮動標簽的后，新添加一個標簽 清除浮動 -->

<div style="clear:both"></div>

2：父級添加overflow屬性方法

/*別加錯位置了，給 父親加*/

<div class="overflow: hidden">

3：after偽元素清除浮動

.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix {*zoom: 1;} /* IE6、7 專有 */

4：雙元素清除浮動

.clearfix:before, .clearfix:after {

        content: "";
        display: table;
    }
.clearfix:after {
        clear: both;
    }

.clearfix {
        *zoom: 1;
    }

17：定位（完成飄起來、脫標）

1：靜態定位 static

標准流

2：相對定位relative(自戀型)：占有位置

1. 脫標、占有位置

2. 每次移動的位置，是以自己的左上角為基點移動（相對於自己來移動位置）

3：那么定位的主要價值就是移動位置，讓盒子到我們想要的位置上去。

3：絕對定位absolute (拼爹型)：浮動、不占位置（浮動之后，margin失效）

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

4：固定定位fixed(認死理型)：脫標、不占位置

固定定位有兩點：

1. 固定定位的元素跟父親沒有任何關系，只認瀏覽器。

2. 固定定位完全脫標，不占有位置，不隨着滾動條滾動。

5：子絕父相

3：JS

1：js是一門什么語言，包含什么

　　腳本語言: 不需要編譯,直接運行

　　解釋性語言: 遇到一樣代碼就解釋一行代碼

　　動態

　　基於對象

　　弱類型語言：聲明變量的時候都使用var

  JS分三個部分:
    * 1. ECMAScript標准: js的基本的語法
    * 2. DOM
    * 3. BOM

2：js中的原始數據類型: number,string,boolean,undefined,null,object

     number數據類型----無論是整數還是小數都是number數據類型的
     string數據類型----字符串,獲取字符串的長度:變量名.length
     boolean數據類型---兩個值,true，false
     null----只有一個,null
     undefined----只有一個,undefined,一個變量聲明了,沒有賦值
     object---對象-----面向對象的時候講解

     null和undefined數據是沒有太大意義的,null是很有意義的---對象的位置講
     NaN----不是一個數字,不是一個數字和一個數字計算--->結果就是NaN
     isNaN()--->判斷這個變量或者這個值是不是 不是一個數字---如果不是一個數字結果是true,如果是一個數字結果false

3：類型轉換

   1：其他類型轉數字
     parseInt()---->轉整數
     parseFloat()--->轉小數
     Number()---->轉數字-----要比上面兩個嚴格

//    console.log(parseInt("10"));//10

//    console.log(parseFloat("10"));//10

//    console.log(Number("10"));//10

   2： 其他類型轉字符串
     .toString()
     String();

//    var num=10;
//    console.log(num.toString());//字符串類型

//    //2  String();
//    var num1=20;
//    console.log(String(num1));



   3：其他類型轉布爾類型
     Boolean()---->要么是true要么是false

    //1  Boolean(值);
//
//    console.log(Boolean(1));//true
//    console.log(Boolean(0));//false
//    console.log(Boolean(11));//true
//    console.log(Boolean(-10));//true
//    console.log(Boolean("哈哈"));//true
//    console.log(Boolean(""));//false
//    console.log(Boolean(null));//false
//    console.log(Boolean(undefined));//false

4：變量

1：作用,存儲數據的或者是操作數據

2：獲取變量的類型 var num = 10;

    var str = "小白";
    var flag = true;
    var nll = null;
    var undef;
    var obj = new Object();
    //是使用typeof 獲取變量的類型
    console.log(typeof num);//number
    console.log(typeof str);//string
    console.log(typeof flag);//boolean
    console.log(String(nll));//是null
    console.log(typeof nll);//不是null
    console.log(typeof undef);//undefined
    console.log(typeof obj);//object
    console.log(typeof(num));


5： 操作符:一些符號-----用來計算

     
      1：算數運算符:  +  -  * / %
      2：算數運算表達式:由算數運算符連接起來的表達式
      3：一元運算符: 這個操作符只需要一個操作數就可以運算的符號  ++  --
      4：二元運算符: 這個操作符需要兩個操作數就可以運算,
      5：三元運算符: -----不講,明天講
      6：復合運算符: +=  -=  *= /= %=
      7：復合運算表達式:由復合運算符連接起來的表達式
     
      var num=10;
      num+=10;------>就是:num=num+10;
      console.log(num);20
     
     
      8：關系運算符: >  <  >=  <=  ==不嚴格的 ===嚴格的 !=不嚴格的不等 !==嚴格的不等
      9：關系運算表達式:由關系運算符連接起來的表達式
           關系運算表達式的結果是布爾類型
      10：邏輯運算符:
      &&---邏輯與--並且
      ||---邏輯或---或者
      !---邏輯非---取反--取非
      
      11：邏輯運算表達式:由邏輯運算符連接起來的表達式
       表達式1&&表達式2
      如果有一個為false,整個的結果就是false
      表達式1||表達式2
      如果有一個為true,整個的結果為true
      !表達式1
      表達式1的結果是true,整個結果為false
      表達式1的結果是false,整個結果為true
     
      12： 賦值運算符: =

6：數組:存儲一組有序的數據,數據類型可以不一樣

 1： 數組的作用:一次性存儲多個數據
      數組元素:數組中存儲的每個數據,叫數組元素,存儲了5個數據,有5個數組元素
      數組的長度:數組的元素的個數,叫數組的長度:數組名.length--->就是長度,數組的長度是可以改變的
      索引(下標):存儲數組元素的編號,從0開始,到數組的長度-1結束
      索引是用來存儲和讀取數組元素的
      遍歷數組:通過循環的方式找到數組中的每個數據
     
     
  2： 數組定義的方式:
      1. 通過構造函數定義數組
      var 數組名=new Array();空數組 Array()就是構造函數
      var 數組名=new Array(長度);是設置數組的初始的長度,長度是可以改變的
      var 數組名=new Array(值,值,值...);定義數組並設置數組中的元素值

      2. 字面量的方式定義數組
      var 數組名=[];空數組
      var 數組名=[10];這個數組有一個元素,值是10,長度是1
     
  3：存儲和讀取

    通過下標設置數組的元素值: 數組名[索引]=值
    通過下標訪問數組的元素值: 數組名[索引]



7：函數

    1：函數:把一些重復的代碼封裝起來,在需要的時候直接調用這個函數就可以了
      函數作用:代碼的重用

    2： 函數定義:
      function 函數名(){
          函數體
      }

     3： 函數調用:
      函數名();
     

     4： 參數:形參和實參 
　　　　　　形參:函數定義的時候函數名字后面的小括號里的變量就是參數,是不需要寫var
      　　實參:函數調用的時候小括號里傳入的變量或者是值,都是實參

　　　　  arguments----->可以獲取函數調用的時候,傳入的實參的個數
           　　 arguments是一個對象,是一個偽數組
   　　　　　　  arguments.length--->是實參的個數
    　　　　　　 arguments[索引]---->實參的值



     5：返回值:函數中如果有return,那么這個函數就有返回值
      如果函數中沒有return,那么這個函數沒有返回值
      如果函數中有return,但是后面什么內容都沒有,這個函數沒有明確返回值
      如果一個函數沒有明確的返回值,函數調用了,並且接收了,那么此時接收的結果undefined
      如果直接輸出函數名字,那么是這個函數的代碼

      無參數無返回值的函數
      function f1(){
     
      }

      有參數無返回值的函數,2個參數
      function f2(x,y){
     
      }

     無參數有返回值的函數
      function f3(){
        return 100;
      }

      有參數有返回值的函數
      function f4(x){
       return "您好";
      }

8：變量、作用域、作用域鏈

1：作用域:變量的使用范圍
     全局作用域:全局變量在任何位置都可以使用的范圍
     局部作用域:局部變量只能在某個地方使用---函數內
     全局變量,如果頁面不關閉,那么就不會釋放,就會占空間,消耗內存

　　 隱式全局變量:聲明的變量沒有var,就叫隱式全局變量
    全局變量是不能被刪除的,隱式全局變量是可以被刪除的
    定義變量使用var是不會被刪除的,沒有var是可以刪除的



2： 作用域鏈:
　　　　在一個函數中使用一個變量,先在該函數中搜索這個變量,找到了則使用,找不到則繼續向外面找這個變量,找到則使用,一直找到全局作用域,找不到則是undefined

 <script>


    var num=10;
    function f1() {
      var num=20;
      function f2() {
        var num=30;
        function f3() {
          var num=50;
          console.log(num);
        }
        f3();
      }
      f2();
    }
    f1();
  </script>



3：變量
　　 全局變量:只要是在函數外面聲明的變量都可以看成或者是理解成是全局變量
    局部變量:在函數中定義的變量


9：函數作為參數

<script>

    //函數可以作為參數使用,如果一個函數作為參數,那么我們說這個參數(函數)可以叫回調函數
    //只要是看到一個函數作為參數使用了,那就是回調函數


    function sayHi(fn) {
      console.log("您好啊");
      fn();//fn此時應該是一個函數
    }
    function suSay() {
      console.log("我猥瑣,我邪惡,我齷齪,小蘇說");
    }


    sayHi(suSay);
</ script>



10：函數作為返回值

<script>
    //結論:函數是可以作為返回值使用的:
    function f1() {
      console.log("f1函數調用了");
      return function () {
        console.log("這是一個函數");
      };
    }

    var ff=f1();//調用
    //ff就是一個函數了
    ff();

  </script>

11: 預解析和函數預解析分段不沖突、變量不分段

<script>
    //預解析:提前解析代碼
    /*
    *
    * 預解析:就是在解析代碼之前
    * 預解析做什么事?
    * 把變量的聲明提前了----提前到當前所在的作用域的最上面
    * 函數的聲明也會被提前---提前到當前所在的作用域的最上面
    *
    *
    * */

    //1****:函數調用的時候,把會函數的聲明提升到作用域的上面
//    f1();//調用
//    var num=20;//這個變量的聲明會提升到變量使用之前
//    function f1() {
//      console.log(num);
//      //var num=10;
//    }


　　// 2：函數的聲明提前
//    function f1() {
//      console.log("小蘇好猥瑣");
//    }
//
//    f1();
//    function f1() {
//      console.log("小蘇沒有助教猥瑣");
//    }
//    f1();



    //把變量的聲明提前了
//    var num;
//    console.log(num);
//    num=10;
//    function f1() {
//      console.log("哈哈,助教好猥瑣哦");
//    }
    //f1();//報錯




  </script>

  <script>
    //預解析中,變量的提升,只會在當前的作用域（script）中提升,提前到當前的作用域的最上面
    //函數中的變量只會提前到函數的作用域中的最前面,不會出去
    //預解析會分段(多對的script標簽中函數重名,預解析的時候不會沖突)

    // 1:  變量
  //  function f1() {

  //   console.log(num);//undefined
  //   var num=10;
  //   }
  //  f1();
  //  console.log(num);// 報錯


    // 2：函數預解析分段不沖突，

    // f1();  // 預解析分段。只會提升到當前的script標簽
    // function f1() {
    //   console.log("哈哈");
    // }

      // 3：變量預解析變量不分段
      var num = 10;

  </script>
  <script>
    
    // function f1() {
    //   console.log("嘎嘎");
    // }


     console.log(num);
     var num = 30;
     console.log(num);

  </script>

12：對象

1：創建對象三種方式:

　1.調用系統的構造函數創建對象

     var 變量名= new Object();

2：構造函數創建對象

 //工廠模式創建對象
    function createObject(name,age) {
      var obj = new Object();//創建對象
      //添加屬性
      obj.name = name;
      obj.age = age;
      //添加方法
      obj.sayHi = function () {
        console.log("阿涅哈斯誒呦,我叫:" + this.name + "我今年:" + this.age);
      };
      return obj;
    }

3：自定義構造函數

   /*
    *
    * 1. 在內存中開辟(申請一塊空閑的空間)空間,存儲創建的新的對象
    * 2. 把this設置為當前的對象
    * 3. 設置對象的屬性和方法的值
    * 4. 把this這個對象返回
    *
    * */
//自定義構造函數創建對象,我要自己定義一個構造函數,自定義構造函數,創建對象
    //函數和構造函數的區別；名字是不是大寫(首字母是大寫)
    // 自定義構造函數可以直接調用（和普通函數一樣。） Person();
    function Person(name,age) {
      this.name=name;
      this.age=age;
      this.sayHi=function () {
        console.log("我叫:"+this.name+",年齡是:"+this.age);
      };
    }

4：字面量創建函數

var obj2={
      name:"小明",
      age:20,
      sayHi:function () {
        console.log("我是:"+this.name);
      },
      eat:function () {
        console.log("吃了");
      }
    };

13：簡單數據類型和復雜數據類型

1：原始數據類型: number,string,boolean,undefined, null,object
    基本類型(簡單類型),值類型: number,string,boolean
    復雜類型(引用類型):object
    空類型:undefined,null

2：值類型的值在哪一塊空間中存儲? 棧中存儲
   引用類型的值在哪一塊空間中存儲?對象在堆上存儲,地址在棧上存儲

    var num=10;//值類型,值在棧上
    var obj={};//復雜類型,對象在堆,地址(引用)在棧

 3：值類型之間傳遞,傳遞的是值
    引用類型之間傳遞,傳遞的是地址(引用)

 4： 值類型作為函數的參數,傳遞的是值
    引用類型作為函數的參數,傳遞的是地址

14：Math

  1：實例對象、靜態對象
  實例對象:通過構造函數創建出來,實例化的對象
  靜態對象:不需要創建,直接就是一個對象,方法(靜態方法)直接通過這個對象名字調用,
  實例方法必須通過實例對象調用
  靜態方法必須通過大寫的對象調用

  2： Math是對象，不是構造函數
     Math.PI----π---
     Math.E----常數的底數
     Math.abs(值)-----絕對值

     Math.ceil(值)----向上取整
     Math.floor(值)---向下取整

     Math.max(值)---求最大值
     Math.min(值)---求最小值

     Math.pow(2,4)---求2的4次方
     Math.sqrt(16)---求16開方

15：日期：date 
1：函數

    dt.getFullYear();//年
    dt.getMonth();//月---從0開始
    dt.getDate();//日
    dt.getHours();//小時
    dt.getMinutes();//分鍾
    dt.getSeconds();//秒
    dt.getDay();//星期---從0開始


    dt.toDateString();//日期
    dt.toLocaleDateString();//日期

    dt.toTimeString();//時間
    dt.toLocaleTimeString

2:格式化日期

/**
 * 獲取指定格式的時間
 * @param dt 日期的對象
 * @returns {string} 返回的是字符串的日期時間
 */
function getDate(dt) {
    //獲取年
    var year = dt.getFullYear();
    //獲取月
    var month = dt.getMonth() + 1;
    //獲取日
    var day = dt.getDate();
    //獲取小時
    var hour = dt.getHours();
    //獲取分鍾
    var minute = dt.getMinutes();
    //獲取秒
    var second = dt.getSeconds();
    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hour = hour < 10 ? "0" + hour : hour;
    minute = minute < 10 ? "0" + minute : minute;
    second = second < 10 ? "0" + second : second;
    return year + "年" + month + "月" + day + "日 " + hour + ":" + minute + ":" + second;
}

16：字符串

　　　實例方法---->必須要通過new的方式創建的對象(實例對象)來調用的方法
     靜態方法---->直接通過大寫的構造函數的名字調用的方法(直接通過大寫的對象名字調用的)
   
     1：字符串的常用屬性:
      .length------>字符串的長度
      .charAt(索引),返回值是指定索引位置的字符串,超出索引,結果是空字符串
      .fromCharCode(數字值,可以是多個參數),返回的是ASCII碼對應的值
　　　 .indexOf(要找的字符串,從某個位置開始的索引);返回的是這個字符串的索引值,沒找到則返回-1
      .lastIndexOf(要找的字符串);從后向前找,但是索引仍然是從左向右的方式,找不到則返回-1

　　　　.concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串
　　　　.replace("原來的字符串","新的字符串");用來替換字符串的 
　　　　.trim();干掉字符串兩端的空格

　　　　.slice(開始的索引,結束的索引); 從索引5的位置開始提取,到索引為10的前一個結束,沒有10，並返回這個提取后的字符串 
　　　　.split("要干掉的字符串",切割后留下的個數);切割字符串 

　　　　.substr(開始的位置,個數);返回的是截取后的新的字符串 
　　　  .substring(開始的索引,結束的索引),返回截取后的字符串,不包含結束的索引的字符串 

　　　　.toLocaleLowerCase();轉小寫 
　　　　.toLowerCase();轉小寫
　　　  .toLocaleUpperCase()轉大寫 
　　　  .toUpperCase();轉大寫

  <script>
    /*
     *
     * 實例方法---->必須要通過new的方式創建的對象(實例對象)來調用的方法
     * 靜態方法---->直接通過大寫的構造函數的名字調用的方法(直接通過大寫的對象名字調用的)
     *
     * */
    /*
     *
     * 字符串的常用屬性:
     * .length------>字符串的長度
     * .charAt(索引),返回值是指定索引位置的字符串,超出索引,結果是空字符串
     * .fromCharCode(數字值,可以是多個參數),返回的是ASCII碼對應的值
     * .concat(字符串1,字符串2,...);返回的是拼接之后的新的字符串
     * .indexOf(要找的字符串,從某個位置開始的索引);返回的是這個字符串的索引值,沒找到則返回-1
     * .lastIndexOf(要找的字符串);從后向前找,但是索引仍然是從左向右的方式,找不到則返回-1
     * .replace("原來的字符串","新的字符串");用來替換字符串的
     * .slice(開始的索引,結束的索引); 從索引5的位置開始提取,到索引為10的前一個結束,沒有10，並返回這個提取后的字符串
     * .split("要干掉的字符串",切割后留下的個數);切割字符串
     * .substr(開始的位置,個數);返回的是截取后的新的字符串
     * .substring(開始的索引,結束的索引),返回截取后的字符串,不包含結束的索引的字符串
     * .toLocaleLowerCase();轉小寫
     * .toLowerCase();轉小寫
     * .toLocaleUpperCase()轉大寫
     * .toUpperCase();轉大寫
     * .trim();干掉字符串兩端的空格
     *
     *
     * */


    //    var str="12345";
    //    console.log(str.length);
    //
    //    var str="whatareyounoshalei";
    //    var result=str.charAt(1000);
    //    console.log(result);

    //    var str=String.fromCharCode(107,108,109);
    //    console.log(str);


    //sos


    //    var str=String.fromCharCode(83,79,83);
    //    console.log(str);


    //    var str="what";
    //    console.log(str+"are"+"you"+"no"+"sha"+"lei");


    //    var str="小蘇";
    //    console.log(str.concat("喜歡","鳳姐","這是","真的"));


    //    var str="小蘇真的好猥好瑣啊";
    //    var index=str.indexOf("好",5);
    //    console.log(index);

    //    var str="helo amen";
    //    var index=str.lastIndexOf("Y");
    //    console.log(index);

    //    var str="小蘇好帥哦,真的好勇敢哦";
    //    if(str.indexOf("帥")!=-1){
    //      str=str.replace("帥","猥瑣");
    //    }else{
    //      console.log("不存在");
    //    }
    //    console.log(str);


//    var str = "如果有一天我邪惡了,請記住,我曾純潔過";
//    //從索引5的位置開始提取,到索引為10的前一個結束,沒有10，並返回這個提取后的字符串
//    str = str.slice(5, 10);
//    console.log(str);

//    var str="喬峰|慕容|鳳姐|梅超風|小蘇|大蛇丸";
//    var arr=str.split("|");
//    for(var i=0;i<arr.length;i++){
//      console.log(arr[i]);
//    }


//    var str="哈哈,小蘇真的是好帥哦";
//    str=str.substr(5,5);
//    console.log(str);


//    var str="哈哈,小蘇真的是好帥哦";
//    str=str.substring(5,9);
//    console.log(str);

//    var str="HELLO";
//    //str=str.toLocaleLowerCase();
//    str=str.toLowerCase();
//    console.log(str);


//    var str="hello";
//    str=str.toLocaleUpperCase();
//    //str=str.toUpperCase();
//    console.log(str);

    var str="   哦,這    是一個神奇的一天   ";
    str=str.trim();
    console.log("===="+str+"====");
  </script>

17：Array 數組的方法

　　　　Array.isArray(對象)---->判斷這個對象是不是數組
      instanceof關鍵字
      .concat(數組,數組,數組,...) 組合一個新的數組
      .every(函數)--返回值是布爾類型,函數作為參數使用,函數中有三個參數,第一個參數是元素的值，第二個參數是索引值,第三個參數是原來的數組(沒用)
      如果這個數組中的每個元素的值都符合條件,最后才返回的是true
     
     .filter(函數);返回的是數組中每一個元素都復合條件的元素,組成了一個新的數組
     
      .push(值);--->把值追加到數組中,加到最后了---返回值也是追加數據之后的數組長度
      .pop();--->刪除數組中最后一個元素,返回值就是刪除的這個值
      .shift();--->刪除數組中第一個元素,返回值就是刪除的這個值
      .unshift();--->向數組的第一個元素前面插入一個新的元素,----返回值是插入后的程度

      .forEach(函數)方法---遍歷數組用---相當於for循環
      .indexOf(元素值);返回的是索引,沒有則是-1
      .join("字符串");----返回的是一個字符串
      .map(函數);--->數組中的每個元素都要執行這個函數,把執行后的結果重新的全部的放在一個新的數組中

      .reverse();----->反轉數組
      .sort();---排序的,可能不穩定,如果不穩定,請寫MDN中的那個固定的代碼
      .arr.slice(開始的索引,結束的索引);把截取的數組的值放在一個新的數組中,但是不包含結束的索引對應的元素值
      .splice(開始的位置,要刪除的個數,替換的元素的值);一般是用於刪除數組中的元素,或者是替換元素,或者是插入元素

  <script>

    /*
     *
     * Array.isArray(對象)---->判斷這個對象是不是數組
     * instanceof關鍵字
     * .concat(數組,數組,數組,...) 組合一個新的數組
     * .every(函數)--返回值是布爾類型,函數作為參數使用,函數中有三個參數,第一個參數是元素的值，第二個參數是索引值,第三個參數是原來的數組(沒用)
     * 如果這個數組中的每個元素的值都符合條件,最后才返回的是true
     *
     * .filter(函數);返回的是數組中每一個元素都復合條件的元素,組成了一個新的數組
     *
     * .push(值);--->把值追加到數組中,加到最后了---返回值也是追加數據之后的數組長度
     * .pop();--->刪除數組中最后一個元素,返回值就是刪除的這個值
     * .shift();--->刪除數組中第一個元素,返回值就是刪除的這個值
     * .unshift();--->向數組的第一個元素前面插入一個新的元素,----返回值是插入后的程度
     * .forEach(函數)方法---遍歷數組用---相當於for循環
     * .indexOf(元素值);返回的是索引,沒有則是-1
     * .join("字符串");----返回的是一個字符串
     * .map(函數);--->數組中的每個元素都要執行這個函數,把執行后的結果重新的全部的放在一個新的數組中
     * .reverse();----->反轉數組
     * .sort();---排序的,可能不穩定,如果不穩定,請寫MDN中的那個固定的代碼
     * .arr.slice(開始的索引,結束的索引);把截取的數組的值放在一個新的數組中,但是不包含結束的索引對應的元素值
     * .splice(開始的位置,要刪除的個數,替換的元素的值);一般是用於刪除數組中的元素,或者是替換元素,或者是插入元素
     *
     *
     * */
    //構造函數
    //    var arr1=new Array();
    //    //字面量的方式
    //    var arr2=[];


    //對象是不是數組類型:兩種
    //1   instanceof
    //    var obj=[];
    //    console.log(obj instanceof Array);//false
    //
    //    //2 使用數組的
    //    console.log(Array.isArray(obj));//


    //    var arr=["a","b","c"];
    //    var newArr=Array.from(arr);
    //    console.log(newArr);

    //    var arr1=[10,20,30];
    //    var arr2=[40,50,60];
    //    console.log(arr1.concat(arr2));

    //    var arr=[1000,2000,3000];
    //    //a----: 元素的值
    //    //b----: 索引的值
    //    //c----:誰調用了這個方法,那么c就是誰---->arr
    //   var flag= arr.every(function (a,b) {
    //      //console.log(a+"==="+b+"===="+c);
    //      return a>2000;//數組中的每個元素的值都要大於2000的情況,最后才返回true
    //    });


    //    var arr=["小明明lkko","小曹操674","小白白bd","笑眯眯a"];
    //   var flag=arr.every(function (ele,index) {
    //      //數組中的每個元素的長度是不是大於4
    //      return ele.length>4;
    //    });


    //console.log(flag);


    //    var arr=[10,20,30,40,50,60,70,80];
    //    var newArr=arr.filter(function (ele) {//ele---每個元素
    //      return ele>40;
    //    });
    //    console.log(newArr);

    //    var arr=[10,0,20,0,40,0,60,100];
    //    var newArr=arr.filter(function (ele) {
    //      return ele!=0;
    //    });
    //    console.log(newArr);

    //    var arr=[10,20,30,40,50];
    //    var result=arr.unshift(100);
    //    console.log(result);
    //    console.log(arr);
//
//    var arr = [10, 20, 30, 40];
//    arr.forEach(function (ele,index) {
//      console.log(ele+'======'+index);
//    });

//    var arr=[10,20,30,40];
//    var index=arr.indexOf(300);
//    console.log(index);


//    var arr=["小白","小黑","小紅","小芳","小綠","小蘇"];
//    var str=arr.join("|");
//    console.log(str);


//    var numbers = [1, 4, 9];
//    var roots = numbers.map(Math.sqrt);
//    console.log(roots);


//    var arr=[10,20,30,40,50];
//    arr.reverse();//反轉
//    console.log(arr);


//    var arr=[1,40,20,10,100];
//    //a---arr[j]
//    //b---arr[j+1]
//    arr.sort(function (a,b) {
//      if(a>b){
//        return 1;
//      }else if(a==b){
//        return 0;
//      }else{
//        return -1;
//      }
//    });
//    console.log(arr);


//
//    var arr=[10,20,30,40,50,60,70,80,90,100];
//    var newArr= arr.slice(3,7);
//    console.log(newArr);


    var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

   // myFish.splice(2, 0, 'drum'); // 在索引為2的位置插入'drum'

    // myFish 變為 ["angel", "clown", "drum", "mandarin", "sturgeon"]

    myFish.splice(2, 1); // 從索引為2的位置刪除一項（也就是'drum'這一項）

    console.log(myFish);
    // myFish 變為 ["angel", "clown", "mandarin", "sturgeon"]
  </script>

18：包裝類型

  <script>
    //基本包裝類型

    //普通變量不能直接調用屬性或者方法
    //對象可以直接調用屬性和方法

    //基本包裝類型:本身是基本類型,但是在執行代碼的過程中,如果這種類型的變量調用了屬性或者是方法,那么這種類型就不再是基本類型了,而是基本包裝類型,這個變量也不是普通的變量了,而是基本包裝類型對象
    //string number boolean


//    var str="hello";
//    str=str.replace("ll","HH");
//    console.log(str);


//    var str=new String("hello");
//    str=str.replace("ll","HH");
//    console.log(str);
//    str=null;

//    var num=10;//number---->
//    console.log(num.toString());


    //如果是一個對象&&true,那么結果是true
    //如果是一個true&&對象,那么結果是對象


//    var flag=new Boolean(false);
//    var result=true&&flag;
//    console.log(result);


//    var num=10;
//    var num2=Number("10");//轉換,沒有new---類型轉
//    var num3=new Number("10");//基本包裝類型


  </script>


19：構造函數、原型對象、實例對象之間的關系

1 構造函數可以實例化對象

2 構造函數中有一個屬性叫prototype,是構造函數的原型對象

3 構造函數的原型對象(prototype)中有一個constructor構造器,這個構造器指向的就是自己所在的原型對象所在的構造函數

4 實例對象的原型對象(__proto__)指向的是該構造函數的原型對象

5 構造函數的原型對象(prototype)中的方法是可以被實例對象直接訪問的

20：原型對象的簡單寫法--必須手動添加構造器

<script>
    function Student(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
    }
    //簡單的原型寫法
    Student.prototype = {
      //手動修改構造器的指向
      constructor:Student,
      height: "188",
      weight: "55kg",
      study: function () {
        console.log("學習好開心啊");
      },
      eat: function () {
        console.log("我要吃好吃的");
      }
    };

    var stu=new Student("段飛",20,"男");
    stu.eat();
    stu.study();
    console.dir(Student);
    console.dir(stu);

  </script>

21：實例對象訪問屬性和方法

<script>
    function Person(age,sex) {
      this.age=age;//年齡
      this.sex=sex;
      this.eat=function () {
        console.log("構造函數中的吃");
      };
    }
    Person.prototype.sex="女";
    Person.prototype.eat=function () {
      console.log("原型對象中的吃");
    };


    var per=new Person(20,"男");
    console.log(per.sex);//男
    per.eat();

    // console.log(per.height);//男
    // per.play();

    console.dir(per);


    /*
    * 實例對象使用的屬性或者方法,先在實例中查找,找到了則直接使用,找不到則,去實例對象的__proto__指向的原型對象prototype中找,找到了則使用
    *  找不到屬性：undefined
    *  找不到方法: 報錯 Uncaught TypeError: per.play is not a function
    * */


  </script>

22：call和apply方法調用修改原型指向，調用

call：參數個數

apply：參數數組

<script>
        function f1 (x, y) {
            console.log("結果是："+(x+ y) + this);
        }
        
        // 函數的調用
        f1(10, 20);

        console.log("===========");

        //1:  此時的f1實際上是當成對象來使用的,對象可以調用方法,apply和call方法也是函數的調用的方式
        
        f1.apply();
        f1.call();


        //2:  apply和call都可以讓函數或者方法來調用,傳入參數和函數自己調用的寫法不一樣,但是效果是一樣的, apply傳入的是數組，  call，傳入的是參數
    
        f1.apply(null, [100, 200]);

        f1.call(null, 100, 200);
        console.log("===========");

        function f2(x, y){
            console.log("這個函數是window對象的一個方法"+ (x+y) + this);
            console.dir(this);
        }

        window.f2(10, 20);

        var obj = {
            age: 10,
            name: "張三",
        }

        //3:  apply和call可以改變this的指向,
        window.f2.call(obj, 10, 20);
        window.f2.apply(obj, [10,20]);


        // 4：apply和call方法實際上並不在函數這個實例對象中，而是在Function的prototype，原型對象中。
　　　　　　　　原型對象可以看成+方法，實例方法可以當成-方法。調用+方法時候可以當成對象。
        console.log(f2.__proto__ == Function.prototype);

        console.log(Function.prototype); //{ [native code] }

        console.dir(Function);

    
    </script>

23：bind方法復制

修改原型指向，沒有調用

<script>
        
        console.log("=====  11 =====")
        function f1 (x, y ){
            console.log((x+y) + " :======>>>>"+this );
            console.dir(this);
        }    
        
        f1.bind();

        //  方法復制了一份，並且傳遞參數，結果還是方法，方法沒有調用。此時f1是對象。
        //   bind方法是復制的意思，可以在復制的時候傳遞參數，也可以在復制之后傳遞參數
        //  apply 和 call 是調用的時候改變this的指向
        //  bind是 復制的時候修改this的指向
        var ff = f1.bind(null, 10, 20);

        console.log (ff);

        ff();


        var f2 = f1.bind(null);
        f2(10, 20);
        console.log("=====  22 =====")


        // bind是方法復制，apply和call是方法調用
        function Person (){
            this.age = 10;
        }

        Person.prototype.eat = function () { 
            console.log("這個是吃");
         };

         var per = new Person;

         var ff = f1.bind(per);

         ff(10, 20);


         console.log("=====  33 =====")

         function Person(age) {
             this.age = age;
         }

         Person.prototype.play = function () {
             console.log(this + "========>>>>" + this.age);
         }


         function Student (age) {
             this.age = age;
         }

         var per = new Person(10);
         var stu = new Student(20);

         var paly2 = per.play.bind(stu);

         paly2();

    </script>

24：閉包

1：閉包的定義：

函數A中，有一個函數B，函數B中可以訪問函數A中定義的變量或者數據，此時就行程了閉包。

閉包緩存數據

總結：如果想要緩存數據，需要把數據放在外層函數和內層函數之間。

閉包的作用：緩存數據。優點也是缺點，沒有及時釋放

局部變量在函數中，函數使用結束后，局部變量就會被自動釋放。

閉包后，里面的局部變量的使用作用域鏈就會被延長。

   <script>
        /* 閉包
         * 閉包的概念：函數A中，有一個函數B，函數B中可以訪問函數A中定義的變量或者數據，此時就行程了閉包。

         *閉包的模式：函數閉包和對象閉包

         * 閉包的作用：緩存數據，延長作用域鏈

         * 閉包的優點和缺點：緩存數據

         * 閉包的應用：

         * ****/


         console.log("=======  11  ========");
        //  1：函數式閉包
         function f1() {
             var num = 10;

             // 函數
             function f2() {
                 console.log(num);
             }

             f2();
         }

         f1();

         console.log("=======  22  ========");
        //  2：對象是閉包
        function  f3() {

            var num1 = 20;

            // 對象
            var obj = {
                age : num1,
            }

            console.log(obj.age);
        }

        f3();

        console.log("=======  33  ========");

        function f4() {
            var num4 = 40;
            return function () { 
                console.log(num4); 
                return num4;
            };
        }
 
        var ff1 = f4();
        var result =  ff1();
        console.log(result);
        

        console.log("=======  44  ========");
        function f5() {
            var num5 = 50;
            var obj = {
                age : num5,
            }
            return obj;
        }

        var resultObj = f5();
        var result5 = resultObj.age;
        console.log(result5);
    </script>

25：沙箱：虛擬測試和真實世界結果一樣，不影響真實世界。

1：沙箱的定義和2種格式

<script>
       //沙箱:環境,黑盒,在一個虛擬的環境中模擬真實世界,做實驗,實驗結果和真實世界的結果是一樣,但是不會影響真實世界 
        
       // 沙箱 函數的自調用

       console.log("========  11  ========");
       // 沙箱的模板,函數自調用兩種格式
        //   格式一：       ()();
       (function () {  
        var num = 10;
        console.log(num + 10);
       })();



       // 格式二：使用的比較多.    (());
       (function () {  
        var num = 10;
        console.log(num + 20);
       }());

     
    </script>

26：原型和原型鏈

<script>
        // 1：使用對象---->使用對象中的屬性和方法，就需要先有構造函數

        // 1.1：構造函數。
        function Person (name, age){
            this.name = name;
            this.age = age;
            this.sayHi = function () {  
                console.log("您好，您真帥");
            };
        }    
        
        // 1.2：實例化對象，並初始化
        var per = new Person("小明", 20);

        // 1.3: 如果想要使用一些屬性和方法，並且屬性的值在每個對象中都是一樣的，方法在每個對象中的操作也是一樣的，那么，為了共享數據，節約內存空間，是可以把屬性和方法通過原型的方法進行賦值
        
        Person.prototype.sex = "男";
        Person.prototype.sayHello = function (){
            console.log("您怎么可以這么帥呀");
        };

        console.dir(per);     // 實例對象
        console.dir(Person);  // 構造函數

        // 實例對象中的原型__proto__和構造函數中的原型prototype指向是一樣的，指向的是原型對象
        // 實例對象的原型__proto__原型指向的是  構造函數中的原型prototype，原型對象

        // 原型對象中的構造器指向的是原型對象所在的構造函數
        // 實例對象和原型對象通過原型來聯系的

        // 實例對象中的原型__proto__是游覽器使用的，不是正規的
        // 構造函數中的prototype是原型，是程序員使用的

        // 原型鏈：是一種關系，實例對象和原型對象之間的關系，關系是通過原型（__proto__）來聯系的
        console.log(per.__proto__ == Person.prototype);
    </script>

1：實例對象中的原型__proto__和構造函數中的原型prototype指向是一樣的，指向的是原型對象

2：實例對象的原型__proto__原型指向的是構造函數中的原型prototype，原型對象

3：原型對象中的構造器指向的是原型對象所在的構造函數，實例對象和原型對象通過__proto__來聯系的

4: 原型鏈：是一種關系，實例對象和原型對象之間的關系，關系是通過原型（__proto__）來聯系的

27：構造函數的原型指向可以改變

<script>

        console.log("=======  11  =======");  
        // 1:構造函數中的this是實例對象
        function Person (age){
            this.age = age;
            console.log(this);
        }    
        
        // 2：原型對象中的方法中的this是實例對象
        Person.prototype.eat = function (){
            console.log(this);
            console.log("人吃了嗎？");
        };

        var per = new Person(20);
        
        per.eat();


        console.log("=======  22  ======="); 
        // 3：學生
        function Student (){

        };


        // 原型的指向是可以改變的
        // 構造函數的原型對象（prototype）指向如果改變了，實例對象的原型（__proto__）指向也會發生改變

        // 原型的指向是可以改變的
        // 實例對象和原型對象之間的關系是通過__proto__原型來聯系起來的，這個關系就是原型鏈
        Student.prototype = new Person(20);

        var stu = new Student();
        stu.eat();
    </script>

1: 原型的指向是可以改變的

2: 構造函數的原型對象（prototype）指向如果改變了，實例對象的原型（proto）指向也會發生改變

3: 實例對象和原型對象之間的關系是通過proto原型來聯系起來的，這個關系就是原型鏈

28: 原型的最終指向

<script>
    
        // 1:  只要是對象就有__proto__.
        // 2:  只要有__proto__，他就指向某個構造函數的prototype、
    
        function Person() {

        }
        Person.prototype.eat=function () {
        console.log("吃東西");
        };

        var per=new Person();
        console.dir(per);
        console.dir(Person);

        //實例對象中有__proto__原型
        //構造函數中有prototype原型
        //prototype是對象
        //所以,prototype這個對象中也有__proto__,那么指向了哪里
        //實例對象中的__proto__指向的是構造函數的prototype
        //所以,prototype這個對象中__proto__指向的應該是某個構造函數的原型prototype

        //Person的prototype中的__proto__的指向
        //console.log(Person.prototype.__proto__);

        //per實例對象的__proto__------->Person.prototype的__proto__---->Object.prototype的__proto__是null

        console.log(per.__proto__==Person.prototype);
        console.log(per.__proto__.__proto__==Person.prototype.__proto__);
        console.log(Person.prototype.__proto__==Object.prototype);
        console.log(Object.prototype.__proto__);
    </script>

1：實例對象per的__proto__指向的是構造函數Person的prototype對象。

2：prototype是一個對象。

3：prototype的__proto__指向的是某個構造函數的prototype對象。某個指的是：NSobject。

4：NSObject的原型對象prototype對象，他的__proto__指向的是null。

29：先修改原型指向在添加方法。

<script>
    
        function Person (age){
            this.age = age;
        };

        Person.prototype.eat = function () {  
            console.log("人在吃飯");
        };
    
        function Student(sex){
            this.sex = sex;
        };

        // 1： 修改原型指向
        Student.prototype = new Person(10);

        // 2： 添加原型方法，要想問原型添加新方法，一定要再原型指向修改后添加原型方法。
        Student.prototype.sayHi = function (){
            console.log("您好呀，學生！！");
        };

        var stu = new Student("男");
        console.dir(stu);

    </script>

1：先添加原型方法，在修改原型指向。

2：先修改原型指向，在添加原型方法。方法添加在實例對象中。

30: 一個神奇的原型鏈

<body>
    <div id="dv"></div>
    <script>
      //原型鏈:實例對象和原型對象之間的關系,通過__proto__來聯系
      var divObj=document.getElementById("dv");
      console.dir(divObj);

      //divObj.__proto__---->HTMLDivElement.prototype的__proto__--->HTMLElement.prototype的__proto__---->Element.prototype的__proto__---->Node.prototype的__proto__---->EventTarget.prototype的__proto__---->Object.prototype沒有__proto__,所以,Object.prototype中的__proto__是null
    </script>
</body>

1：首先從f3中找age，之后在f2中找age，最后在f1中找age，如果沒有就是undefined。

31：原型鏈

1：原型鏈是實例對象之間的關系，實例對象中__proto__之間的關系。

32：繼承（通過原型來修改原型執行實現繼承）

<script>

    /*
    *
    * 面向對象編程思想:根據需求,分析對象,找到對象有什么特征和行為,通過代碼的方式來實現需求,要想實現這個需求,就要創建對象,要想創建對象,就應該顯示有構造函數,然后通過構造函數來創建對象.,通過對象調用屬性和方法來實現相應的功能及需求,即可
    * 首先JS不是一門面向對象的語言,JS是一門基於對象的語言,那么為什么學習js還要學習面向對象,因為面向對象的思想適合於人的想法,編程起來會更加的方便,及后期的維護....
    * 面向對象的編程語言中有類(class)的概念(也是一種特殊的數據類型),但是JS不是面向對象的語言,所以,JS中沒有類(class),但是JS可以模擬面向對象的思想編程,JS中會通過構造函數來模擬類的概念(class)
    *
    *
    * 小明,小紅，小麗，小白，小花 都是人
    * 共同的特征和行為
    * 特征--->屬性
    * 行為---方法
    *
    * 面向對象的特性:封裝,繼承,多態
    *
    * 封裝:就是包裝
    * 一個值存儲在一個變量中--封裝
    * 一坨重復代碼放在一個函數中--封裝
    * 一系列的屬性放在一個對象中--封裝
    * 一些功能類似的函數(方法)放在一個對象中--封裝
    * 好多相類似的對象放在一個js文件中---封裝
    *
    * 繼承: 首先繼承是一種關系,類(class)與類之間的關系,JS中沒有類,但是可以通過構造函數模擬類,然后通過原型來實現繼承
    * 繼承也是為了數據共享,js中的繼承也是為了實現數據共享
    *
    * 原型作用之一:數據共享,節省內存空間
    * 原型作用之二:為了實現繼承
    *
    * 繼承是一種關系:
    *
    * 父類級別與類級別的關系
    *
    * 例子:
    *
    * 小楊--->人, 姓名, 有錢, 帥, 有功夫--降龍十八掌
    * 小楊子-->人,
    * 繼承:
    * 姓氏----繼承
    * 外表----繼承
    * 財產----繼承
    * 功夫---繼承
    *
    *
    * 人:  姓名, 性別, 年齡 ,吃飯, 睡覺
    *
    * 學生類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 學習行為
    * 老師類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資,教學行為
    * 程序員: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資, 敲代碼
    * 司機類別: 姓名, 性別, 年齡 ,吃飯, 睡覺 工資 開車
    *
    *
    * 動物類別:  體重， 顏色, 吃
    * 狗類別:   體重,顏色, 吃, 咬人
    * 二哈類別: 體重,顏色, 吃, 咬人 逗主人開心,汪汪,你好帥
    *
    * 多態:一個對象有不同的行為,或者是同一個行為針對不同的對象,產生不同的結果,要想有多態,就要先有繼承,js中可以模擬多態,但是不會去使用,也不會模擬,
    * */



    //例子:
    //人,都有姓名,性別,年齡, 吃飯, 睡覺, 玩
    //學生,都有姓名,性別,年齡, 成績, 吃飯, 睡覺, 玩 ,學習的行為


    //js中通過原型來實現繼承

    function Person(name,age,sex) {
      this.name=name;
      this.sex=sex;
      this.age=age;
    }
    Person.prototype.eat=function () {
      console.log("人可以吃東西");
    };
    Person.prototype.sleep=function () {
      console.log("人在睡覺");
    };
    Person.prototype.play=function () {
      console.log("生活就是不一樣的玩法而已");
    };


    function Student(score) {
      this.score=score;
    }
    //改變學生的原型的指向即可==========>學生和人已經發生關系
    Student.prototype=new Person("小明",10,"男");
    Student.prototype.study=function () {
      console.log("學習很累很累的哦.");
    };

    //相同的代碼太多,造成了代碼的冗余(重復的代碼)

    var stu=new Student(100);
    console.log(stu.name);
    console.log(stu.age);
    console.log(stu.sex);
    stu.eat();
    stu.play();
    stu.sleep();
    console.log("下面的是學生對象中自己有的");
    console.log(stu.score);
    stu.study();
 </script>

33：利用call，在構造函數中修改原型指向

父類中的方法無法繼承

<script>
    
    //解決方案:繼承的時候,不用改變原型的指向,直接調用父級的構造函數的方式來為屬性賦值就可以了------借用構造函數:把要繼承的父級的構造函數拿過來,使用一下就可以了    

    //借用構造函數:構造函數名字.call(當前對象,屬性,屬性,屬性....);
    //解決了屬性繼承,並且值不重復的問題
    //缺陷:父級類別中的方法不能繼承

    function Person(name, age, sex, weight) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.weight = weight;
    }
    Person.prototype.sayHi = function () {
      console.log("您好");
    };
    function Student(name,age,sex,weight,score) {
      //借用構造函數
      Person.call(this,name,age,sex,weight);
      this.score = score;
    }
    var stu1 = new Student("小明",10,"男","10kg","100");
    console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);

    var stu2 = new Student("小紅",20,"女","20kg","120");
    console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);

    var stu3 = new Student("小麗",30,"妖","30kg","130");
    console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);


  </script>

34：組合繼承

1：構造函數call解決屬性繼承

2：原型繼承解決方法繼承。

<script>


    //原型實現繼承
    //借用構造函數實現繼承
    //組合繼承:原型繼承+借用構造函數繼承

    function Person(name,age,sex) {
      this.name=name;
      this.age=age;
      this.sex=sex;
    }
    Person.prototype.sayHi=function () {
      console.log("阿涅哈斯誒呦");
    };
    function Student(name,age,sex,score) {
      //借用構造函數:屬性值重復的問題
      Person.call(this,name,age,sex);
      this.score=score; 
    }
    //改變原型指向----繼承
    Student.prototype=new Person();//不傳值
    Student.prototype.eat=function () {
      console.log("吃東西");
    };
    var stu=new Student("小黑",20,"男","100分");
    console.log(stu.name,stu.age,stu.sex,stu.score);
    stu.sayHi();
    stu.eat();
    var stu2=new Student("小黑黑",200,"男人","1010分");
    console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
    stu2.sayHi();
    stu2.eat();

    //屬性和方法都被繼承了



  </script>

35：拷貝繼承

拷貝繼承；把一個對象中的屬性或者方法直接復制到另一個對象中

<script>

    //拷貝繼承；把一個對象中的屬性或者方法直接復制到另一個對象中

//    var obj1={
//      name:"小糊塗",
//      age:20,
//      sleep:function () {
//       console.log("睡覺了");
//      }
//    };
//
//    //改變了地址的指向
//    var obj2=obj1;
//    console.log(obj2.name,obj2.age);
//    obj2.sleep();



//    var obj1={
//      name:"小糊塗",
//      age:20,
//      sleep:function () {
//        console.log("睡覺了");
//      }
//    };
//
//
//    var obj2={};
//    for(var key in obj1){
//      obj2[key]=obj1[key];
//    }
//    console.log(obj2.name);



    function Person() {
    }
    Person.prototype.age=10;
    Person.prototype.sex="男";
    Person.prototype.height=100;
    Person.prototype.play=function () {
      console.log("玩的好開心");
    };
    var obj2={};
    //Person的構造中有原型prototype,prototype就是一個對象,那么里面,age,sex,height,play都是該對象中的屬性或者方法

    for(var key in Person.prototype){
      obj2[key]=Person.prototype[key];
    }
    console.dir(obj2);
    obj2.play();



  </script>

36：函數聲明和函數表達式的區別

以后寧願用函數表達式,都不用函數聲明

<script>

    //函數聲明
//
//    if(true){
//      function f1() {
//        console.log("哈哈,我又變帥了");
//      }
//    }else{
//      function f1() {
//        console.log("小蘇好猥瑣");
//      }
//    }
//    f1();


    //函數表達式

    var ff;
    if(true){
      ff=function () {
        console.log("哈哈,我又變帥了");
      };
    }else{
      ff=function () {
        console.log("小蘇好猥瑣");
      };
    }
    ff();

    //函數聲明如果放在if-else的語句中,在IE8的瀏覽器中會出現問題
    //以后寧願用函數表達式,都不用函數聲明



  </script>

37：函數中this的指向

<script>

    /*
     *
     * 函數中的this的指向
     *
     *
     * 普通函數中的this是誰?-----window
     * 對象.方法中的this是誰?----當前的實例對象
     * 定時器方法中的this是誰?----window
     * 構造函數中的this是誰?-----實例對象
     * 原型對象方法中的this是誰?---實例對象
     *
     *
     * */

    //嚴格模式:
//    "use strict";//嚴格模式
//    function f1() {
//      console.log(this);//window
//    }
//    f1();


    //普通函數
    //    function f1() {
    //      console.log(this);
    //    }
    //   f1();

    //定時器中的this
    //    setInterval(function () {
    //      console.log(this);
    //    },1000);

    //構造函數
    //    function Person() {
    //      console.log(this);
    //對象的方法
    //      this.sayHi=function () {
    //        console.log(this);
    //      };
    //    }
    //原型中的方法
    //    Person.prototype.eat=function () {
    //      console.log(this);
    //    };
    //    var per=new Person();
    //    console.log(per);
    //    per.sayHi();
    //    per.eat();


    //BOM:中頂級對象是window,瀏覽器中所有的東西都是window的




  </script>

38：淺拷貝

<script>
    
        //淺拷貝:拷貝就是復制,就相當於把一個對象中的所有的內容,復制一份給另一個對象,直接復制,或者說,就是把一個對象的地址給了另一個對象,他們指向相同,兩個對象之間有共同的屬性或者方法,都可以使用
        
        
        var obj1={
          age:10,
          sex:"男",
          car:["奔馳","寶馬","特斯拉","奧拓"]
        };
        //另一個對象
        var obj2={};
        
        //寫一個函數,作用:把一個對象的屬性復制到另一個對象中,淺拷貝
        //把a對象中的所有的屬性復制到對象b中
        function extend(a,b) {
          for(var key in a){
            b[key]=a[key];
          }
        }
        extend(obj1,obj2);

        obj2.sex = "女";
        console.dir(obj2);//開始的時候這個對象是空對象
        console.dir(obj1);//有屬性

    
        console.log(obj1 == obj2);
        
        
    </script>

淺拷貝：示意圖

39：深拷貝

// 只要不是基本類型，比如數組和對象的話，就需要重新開始開辟一塊內存，來存儲。之后把地址給這個屬性。

<script>
        //深拷貝:拷貝還是復制,深:把一個對象中所有的屬性或者方法,一個一個的找到.並且在另一個對象中開辟相應的空間,一個一個的存儲到另一個對象中
    
        var obj1={
          age:10,
          sex:"男",
          car:["奔馳","寶馬","特斯拉","奧拓"],
          dog:{
            name:"大黃",
            age:5,
            color:"黑白色"
          }
        };
    
        var obj2={};//空對象
        //通過函數實現,把對象a中的所有的數據深拷貝到對象b中
        function extend(a,b) {
          for(var key in a){
            //先獲取a對象中每個屬性的值
            var item=a[key];
            //判斷這個屬性的值是不是數組
            if(item instanceof Array){
              //如果是數組,那么在b對象中添加一個新的屬性,並且這個屬性值也是數組
              b[key]=[];
              //調用這個方法，把a對象中這個數組的屬性值一個一個的復制到b對象的這個數組屬性中
              extend(item,b[key]);
            }else if(item instanceof Object){//判斷這個值是不是對象類型的
         //如果是對象類型的,那么在b對象中添加一個屬性,是一個空對象
              b[key]={};
              //再次調用這個函數,把a對象中的屬性對象的值一個一個的復制到b對象的這個屬性對象中
              extend(item,b[key]);
            }else{
              //如果值是普通的數據,直接復制到b對象的這個屬性中
              b[key]=item;
            }
          }
        }
    
        extend(obj1,obj2);
        console.dir(obj1);
        console.dir(obj2);

    </script>

深拷貝示意圖

40：遍歷DOM樹

<script>

  //獲取頁面中的根節點--根標簽
  var root=document.documentElement;//html
  //函數遍歷DOM樹
  //根據根節點,調用fn的函數,顯示的是根節點的名字
  function forDOM(root1) {
    //調用f1,顯示的是節點的名字
   // f1(root1);
    //獲取根節點中所有的子節點
    var children=root1.children;
    //調用遍歷所有子節點的函數
    forChildren(children);
  }
  //給我所有的子節點,我把這個子節點中的所有的子節點顯示出來
  function forChildren(children) {
    //遍歷所有的子節點
    for(var i=0;i<children.length;i++){
      //每個子節點
      var child=children[i];
      //顯示每個子節點的名字
      f1(child);
      //判斷child下面有沒有子節點,如果還有子節點,那么就繼續的遍歷
      child.children&&forDOM(child);
    }
  }
  //函數調用,傳入根節點
  forDOM(root);
  function f1(node) {
    console.log("節點的名字:"+node.nodeName);
  }

  //節點:nodeName,nodeType,nodeValue


//  第一個函數:給我根節點,我會找到所有的子節點:forDOM(根節點)
//  獲取這個根節點的子節點
//  var children=根節點的.children
//  調用第二個函數
//
//  第二個函數:給我所有的子節點,我把每個子節點的名字顯示出來(children)
//  for(var i=0;i<children.length;i++){
//    每個子節點
//    var child=children[i];
//    f1(child);給我節點,我顯示該節點的名字
//    child是子節點,但是如果child里面還有子節點,此時child就是爹了
//    child.children&&第一個函數(child)
//
//  }

</script>

41：正則表達式

<script>

    /*
    *
    * 正則表達式:也叫規則表達式,按照一定的規則組成的一個表達式,這個表達式的作用主要是匹配字符串的,
    * "我的電話:10086,他的電話:10010,你的電話:10000" 正則表達式,把這個字符串中的所有的數字找到
    *
    * 正則表達式的作用:匹配字符串的
    *
    * 在大多數編程語言中都可以使用
    *
    * 正則表達式的組成:是由元字符或者是限定符組成的一個式子
    *
    *
    * 元字符:
    *
    * 1:  .  表示的是:除了\n以外的任意的一個字符   "fdsfs238"
    *
    *
    * 2:  [] 表示的是:范圍,  [0-9] 表示的是0到9之間的任意的一個數字,  "789" [0-9]
    * [1-7] 表示的是1到7之間的任意的一個數字
    * [a-z] 表示的是:所有的小寫的字母中的任意的一個
    * [A-Z] 表示的是:所有的大寫的字母中的任意的一個
    * [a-zA-Z] 表示的是:所有的字母的任意的一個
    * [0-9a-zA-Z] 表示的是: 所有的數字或者是字母中的一個
    * [] 另一個函數: 把正則表達式中元字符的意義干掉    [.] 就是一個.
    *
    *
    * 3:  | 或者     [0-9]|[a-z] 表示的是要么是一個數字,要么是一個小寫的字母
    *
    *
    * 4:  () 分組 提升優先級   [0-9]|([a-z])|[A-Z]
    * ([0-9])([1-5])([a-z]) 三組, 從最左邊開始計算
    * (()(()))
    *
    *
    * 都是元字符,但是也可以叫限定符,下面的這些
    *   5:   *   表示的是:前面的表達式出現了0次到多次
    *    [a-z][0-9]* 小寫字母中的任意一個 后面是要么是沒有數字的,要么是多個數字的
    *    "fdsfs3223323"  [a-z][0-9]*
    *
    *
    *   6:  +  表示的是:前面的表達式出現了1次到多次
    *    [a-z][9]+  小寫字母一個后面最少一個9,或者多個9
    *    "fesfewww9fefds"
    *
    *
    *    7:  ?  表示的是:前面的表達式出現了0次到1次,最少是0次,最多1次 ,另一個含義:阻止貪婪模式
    *    [4][a-z]? "1231234ij"
    *  
    *
    *   限定符:限定前面的表達式出現的次數
    *  
    *   
    *   8:   {} 更加的明確前面的表達式出現的次數
    *  {0,} 表示的是前面的表達式出現了0次到多次,和 *一樣的
    *  {1,} 表示的是前面的表達式出現了1次到多次,和 +一樣的
    *  {0,1} 表示的是前面的表達式出現了0次到1次,和 ?一樣的
    *  {5,10} 表示的是前面的表達式出現了5次到10次
    *  {4} 前面的表達式出現了4次
    *  {,10} 錯誤的========不能這么寫
    *
    *
    *  9:   ^ 表示的是以什么開始,或者是取非(取反) ^[0-9] 以數字開頭
    *  ^[a-z] 以小寫字母開始
    *  [^0-9] 取反,非數字
    *  [^a-z] 非小寫字母
    *  [^0-9a-zA-Z_]   特殊字符
    * 
    *
    *  10:   $ 表示的是以什么結束   [0-9][a-z]$  必須以小寫字母結束
    *  ^[0-9][a-z] 相當於是嚴格模式   "3f2432e"  "4f"
    *
    *
    *  11：  \d 數字中的任意一個,   digit 數字
    *        \D 非數字中的一個
    *  12：  \s 空白符中的一個     Space  空白符號
    *        \S 非空白符
    *   13：  \w 非特殊符號   Word,單詞.\w匹配包括下划線的任何單詞字符.等價於'[A-Za-z0-9_]'.
    *         \W 特殊符號
    *   \b 單詞的邊界
    *   "what are you no sha lei"
    *
    *
    *    . 除了\n以外的任意一個單個字符
    *    []  范圍
    *    () 分組,提升優先級
    *    | 或者
    *    * 0-多次
    *    + 1-多次
    *    ? 0-1次
    *    {0,} 和*一樣
    *    {1,} 和+
    *    {0,1} 和?
    *
    *    \d 數字中的一個
    *    \D 非數字
    *    \s 空白符
    *    \S 非空白符
    *     \W  特殊符號
    *     \w 非特殊符號 _
    *     ^ 取反,以什么開始
    *     $ 以什么結束
    *
    *     \b 單詞邊界
  
    * */
  </script>

42：正則表達式的創建方式

<script>

   //創建正則表達式對象

    //兩種:
    /*
    *
    * 1.通過構造函數創建對象
    *
    *
    * 2.字面量的方式創建對象
    *
    *
    * 正則表達式的作用:匹配字符串的
    *
    * */
//   //對象創建完畢---
//    var reg=new RegExp(/\d{5}/);
//   //字符串
//    var str="我的電話是10086";
//   //調用方法驗證字符串是否匹配
//    var flag=reg.test(str);
//    console.log(flag);



//   //對象創建完畢---
//   var reg=new RegExp(/\d{5}/);
//   //調用方法驗證字符串是否匹配
//   var flag=reg.test("我的電話是10086");
//   console.log(flag);


    //字面量的方式創建正則表達式對象
    var reg=/\d{1,5}/;
    var flag=reg.test("小蘇的幸運數字:888");
    console.log(flag);



  </script>

43：字符創中的正則表達式

<script>
    //正則表達式中:g 表示的是全局模式匹配
    //正則表達式中:i 表示的是忽略大小寫
    // match是匹配的意思
    // replace是替換的意思

    
       var str="中國移動:10086,中國聯通:10010,中國電信:10000";
       //把里面所有的數字全部顯示出來
       var array=str.match(/\d{5}/g);
       console.log(array);


    //
    //    var str = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";
    //    var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
    //    console.log(array);


    //提取這里的日
    //    var str="2017-11-12";
    //    var array=str.match(/(\d{4})[-](\d{2})[-](\d{2})/g);
    //    //console.log(array);
    //    //正則表達式對象.$3
    //    console.log(RegExp.$3);


    //    var email="shuaiyangtaishuaile@itcast.com.cn";
    //    email.match(/([0-9a-zA-Z_.-]+)[@]([0-9a-zA-Z_-]+)(([.][a-zA-Z]+){1,2})/);
    //    console.log(RegExp.$1);//用戶名
    //    console.log(RegExp.$2);//126
    //    console.log(RegExp.$3);//域名


    //    var str="小蘇好帥哦,真的是太帥了,帥,就是真帥";
    //    str=str.replace(/帥/g,"猥瑣");
    //    console.log(str);

    //    var str="  哦買噶的    ,太幸福了  ";
    //    str=str.trim();
    //    console.log("==="+str+"===");


    //    var str = "  哦買噶的    ,太幸福了  ";
    //    str = str.replace(/\s+/g, "");
    //    console.log("===" + str + "===");


    //所有的h都替換成S
    //    var str="HhpphH";//SSppSS
    //    str=str.replace(/[h]/gi,"S");
    //    console.log(str);


    //    var reg = new RegExp(/[h]/gi);
    //    var str = "HhpphH";//SSppSS
    //    str = str.replace(reg, "S");
    //    console.log(str);

//
//    var str = "中國移動:10086,中國聯通:10010,中國電信:10000";
//    //把里面所有的數字全部顯示出來
//    //var array = str.match(/\d{5}/g);
//    //正則表達式對象.exec方法傳入字符串
//    var reg=/\d{5}/g;
//    //var array=reg.exec(str);
////    console.log(array);
////    console.log(reg.exec(str));
////    console.log(reg.exec(str));
////    console.log(reg.exec(str));
//
//    var result=reg.exec(str);
//    while(result!=null){
//      console.log(result);
//      result=reg.exec(str);
//    }



//    var str = "中國移動:10086,中國聯通:10010,中國電信:10000";
//    var reg=/\d{5}/g;
//    //通過正則表達式匹配這個字符串
//    var array=reg.exec(str);
//    console.log(array);
//    console.log(reg.exec(str));
//    console.log(reg.exec(str));
//    console.log(reg.exec(str));//null
//


    var str = "中國移動:10086,中國聯通:10010,中國電信:10000";
    var reg=/\d{5}/g;
    //通過正則表達式匹配這個字符串
    var array=reg.exec(str);
    while (array!=null){
      //輸出匹配的內容
      console.log(array[0]);
      array=reg.exec(str);
    }

  </script>

44:真數組和偽數組

<script>
        //偽數組和數組的區別
        //真數組的長度是可變的
        //偽數組的長度不可變
        //真數組可以使用數組中的方法
        //偽數組不可以使用數組中的方法
        
    
    //    function f1() {
    //      var sum=0;
    //      for(var i=0;i<arguments.length;i++){
    //        sum+=arguments[i];
    //      }
    //      console.log(sum);
    //    }
    //    //arguments得到的是實參的個數及實參的每個值
    //
    //    f1(10,20,30,40);
    
    
    //    function f1() {
    //     var sum=0;
    //      arguments.forEach(function () {
    //
    //      });
    //    }
    //    //arguments得到的是實參的個數及實參的每個值
    //
    //    f1(10,20,30,40);
    
    //    var arr=[10,20,30];
    //    arr.forEach(function () {
    //
    //    });
    
    
    
        var arr=[10,20];
        arr.forEach()
        console.dir(arr);
    
        // 數組實例對象的__proto__----->Array的prototype
    
        //數組
    //    var arr=[10,20,30];
    //    arr[3]=100;
    //    console.log(arr.length);
    //    //對象---假的數組
    //    var obj={
    //      0:10,
    //      1:20,
    //      2:30,
    //      length:3
    //    };
    //
    //    console.log(obj[0]);
    //    console.log(obj[1]);
    //    console.log(obj[2]);
    //    console.log(obj.length);
    //    obj[3]=1000;
    //    console.log(obj[3]);
    //    console.log(obj.length);
    
        //遍歷數組
    //    for(var i=0;i<arr.length;i++){
    //      console.log(arr[i]);
    //    }
    //
    //    for(var i=0;i<obj.length;i++){
    //      console.log(obj[i]);
    //    }
    </script>

4：Vue

1：MVC和MVVM（背誦）

前端的主要工作？主要負責MVC中的V這一層；主要工作就是和界面打交道，來制作前端頁面效果；

2：常見的指令

1： {{}} 　　插值表達式

2：v-cloak　　解決插值表達式的閃爍問題。原理是標簽的顯示隱藏。

3：v-text　　用來實現數據。

4: v-html　　用來展示html文本

5：v-bind: 是Vue中，提供用於綁定屬性的指令。

　　 v-bind:可以簡寫成：

6：v-on　　Vue中提供了v-on：事件綁定機制。

　　v-on：可以簡寫成@

7：v-model　　雙向數據綁定。

v-mdoel可以實現model和view的雙向綁定 v-model只能用在表單元素中。

input(radio, text, address, email....) select checkbox textarea

區別：

1：v-text：沒有插值表達式閃爍的問題。

2: v-text會覆蓋元素內容。但是插值表達式只會修改插值表達式，不會把整個內容覆蓋。

1：插值表達式

<div id="app">
        <!-- 3：插值表達式  -->
        <p>{{ msg}} </p>
    </div>
   <!-- 2：創建一個vue對象 {}配置對象 幾個屬性：el：元素 -->
   <script>
       var vm = new Vue ({
        el : '#app',
        data : {
            msg : '歡迎學習Vue' //通過vue提供的指令，去渲染數據，不是通過操作DOM。
        }
   })
   </script>

2：實例

<div id="app">
            <p>{{msg}}</p>
            <p v-text="msg"></p>
            <div>{{msg2}}</div>
            <div v-text="msg2"></div>
             <div v-html="msg2"></div>
             <input type="button" value="按鈕" v-bind:title="myTitle" v-on:click='show'>
             <!-- <input type="button" value="按鈕" v-bind:title="myTitle" v-on:mouseover='show'> -->
    </div>

    

    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "123",
                msg2: "<h1>我是一個大大的H1標簽</h1>",
                myTitle:'這是一個自定義按鈕的標題',
            },
            methods:{
                show : function (){
                    alert("Hello")
                }
            }
        })    
        
    </script>

3：v-model

 <div id="app">
        <h4>{{msg}}</h4>
        <!-- <input type="text" :value="msg"> -->

        <!-- v-mdoel可以實現model和view的雙向綁定 v-model只能用在表單元素中 -->
        <input type="text" v-model="msg">

    </div>

    <script>
        var vm = new Vue({
            el : '#app',
            data : {
                msg : '我的單向數據',
            }, 
            metheds : {

            },
        });
    </script>

3: 五大事情修飾符

事件修飾符：

.stop 阻止冒泡

.prevent 阻止默認事件

.capture 添加事件偵聽器時使用事件捕獲模式

.self 只當事件在該元素本身（比如不是子元素）觸發時觸發回調

.once 事件只觸發一次

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }

    .outer {
      padding: 40px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app">

    <!-- 使用  .stop  阻止冒泡 -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click.stop="btnHandler">
    </div> -->

    <!-- 使用 .prevent 阻止默認行為 -->
    <!-- <a href="http://www.baidu.com" @click.prevent="linkClick">有問題，先去百度</a> -->

    <!-- 使用  .capture 實現捕獲觸發事件的機制 -->
    <!-- <div class="inner" @click.capture="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> -->

    <!-- 使用 .self 實現只有點擊當前元素時候，才會觸發事件處理函數 -->
    <!-- <div class="inner" @click="div1Handler">
      <input type="button" value="戳他" @click="btnHandler">
    </div> -->

    <!-- 使用 .once 只觸發一次事件處理函數 -->
    <!-- <a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a> -->


    <!-- 演示： .stop 和 .self 的區別 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div> -->

    <!-- .self 只會阻止自己身上冒泡行為的觸發，並不會真正阻止 冒泡的行為 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div> -->

  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1Handler() {
          console.log('這是觸發了 inner div 的點擊事件')
        },
        btnHandler() {
          console.log('這是觸發了 btn 按鈕 的點擊事件')
        },
        linkClick() {
          console.log('觸發了連接的點擊事件')
        },
        div2Handler() {
          console.log('這是觸發了 outer div 的點擊事件')
        }
      }
    });
  </script>
</body>

</html>

4：在Vue中使用CSS

1: 使用內聯樣式

<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>

 <div id="app">
    <!-- 對象就是無序鍵值對的集合 -->

　　// 方式一：直接寫樣式

    <!-- <h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>  -->

　　// 方式二  一個class
    <!-- <h1 :style="styleObj1">這是一個h1</h1> -->

　　// 方式三  兩個class
    <h1 :style="[ styleObj1, styleObj2 ]">這是一個h1</h1>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        styleObj1: { color: 'red', 'font-weight': 200 },
        styleObj2: { 'font-style': 'italic' }
      },
      methods: {}
    });
  </script>

2: 使用class樣式

4中方式：

字符串

字符串拼接

數組

對象

<div id="app">
　　　　// 方式一：直接用字符串 空格拼接
        <!-- <h1 class="red thin">這是一個很大的h1，大到你無法想象 </h1> -->

　　　　// 方式二：數組的方式：字符串數組
        <!-- <h1 :class="['thin', 'red']">這是一個很大的h1，大到你無法想象 </h1>  -->
　　
　　　　// 方式三：對象方式
        <h1 :class="{red:true, thin:true, active:true}">這是一個很大的h1，大到你無法想象 </h1>

　　　　// 方式4：一個class 字符串
        <h1 :class="classobj">這是一個很大的h1，大到你無法想象 </h1>
    </div>

    <script>
    var vm = new Vue({
        el : "#app",
        data : {
            classobj : {red:true, thin:true, active:true},
        },
        methodes : {

        },
    });
    </script>

5：v-for遍歷

1：遍歷數組

<div id="app">
    <!-- <p>{{list[0]}}</p>
    <p>{{list[1]}}</p>
    <p>{{list[2]}}</p>
    <p>{{list[3]}}</p>
    <p>{{list[4]}}</p> -->

    <p v-for="(item, i) in list">索引值：{{i}} --- 每一項：{{item}}</p>

  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [1, 2, 3, 4, 5, 6]
      },
      methods: {}
    });
  </script>

2 ：遍歷對象數組

<div id="app">
    <p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: 'zs1' },
          { id: 2, name: 'zs2' },
          { id: 3, name: 'zs3' },
          { id: 4, name: 'zs4' }
        ]
      },
      methods: {}
    });
  </script>

3：遍歷對象

key屬性添加，如果出現錯誤的話，key的值是字符串或者數值。

<div id="app">
    <!-- 注意：在遍歷對象身上的鍵值對的時候， 除了 有  val  key  ,在第三個位置還有 一個 索引  -->
    <p v-for="(val, key, i) in user">值是： {{ val }} --- 鍵是： {{key}} -- 索引： {{i}}</p>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        user: {
          id: 1,
          name: '托尼·屎大顆',
          gender: '男'
        }
      },
      methods: {}
    });
  </script>

4：遍歷數字

<div id="app">
    <!-- in 后面我們放過  普通數組，對象數組，對象， 還可以放數字 -->
    <!-- 注意：如果使用 v-for 迭代數字的話，前面的 count 值從 1 開始 -->
    <p v-for="count in 10">這是第 {{ count }} 次循環</p>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

7：v-if和v-show指令

v-if的特點是：每次都會重新刪除或者創建元素

v-show的特點是：每次不會進行DOM的刪除或者創建，只是切換元素的狀態。

性能上：v-if有較高的性能消耗，v-show有較高的初始的渲染消耗

<div id="app">

    <!-- <input type="button" value="toggle" @click="toggle"> -->
    <input type="button" value="toggle" @click="flag=!flag">

    <!-- v-if 的特點：每次都會重新刪除或創建元素 -->
    <!-- v-show 的特點： 每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式 -->

    <!-- v-if 有較高的切換性能消耗 -->
    <!-- v-show 有較高的初始渲染消耗 -->

    <!-- 如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show -->
    <!-- 如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if -->
    <h3 v-if="flag">這是用v-if控制的元素</h3>
    <h3 v-show="flag">這是用v-show控制的元素</h3>

  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        /* toggle() {
          this.flag = !this.flag
        } */
      }
    });
  </script>

8: 過濾器

1：全局過濾器

<div id="app">
    <p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p>
  </div>

  <script>
    // 定義一個 Vue 全局的過濾器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      // 字符串的  replace 方法，第一個參數，除了可寫一個 字符串之外，還可以定義一個正則
      return msg.replace(/單純/g, arg + arg2)
    })

    Vue.filter('test', function (msg) {
      return msg + '========'
    })


    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'
      },
      methods: {}
    });
  </script>

2：局部過濾器

<div id="app">
        <!-- 1：全局過濾器 -->
        <h1>{{ msg | appendStr("全局過濾器")}}</h1>
        <!-- 2：私有過濾器 -->
        <h1>{{ msg | appendEndStr("全局過濾器")}}</h1>
    </div>
 <script>

        // 1：全局過濾器
        Vue.filter("appendStr", function (msg, arg) {  
            return msg + arg;
        });

var vm = new Vue({
            el : "#app",
            data : {
                msg : "原始的消息",
            },
            methods : {

            },

            // 2：私有過濾器
            filters : {
                appendEndStr : function (msg, arg) {
                    return msg + arg + "~~~~";
                }
                ,
            },

       
        });
    
    </script>

9: 自定義指令

<div id="app">
        <!-- 自定義指令 -->
        <!--  傳的參數是字符串，如果不是字符串的話，就是變量，。去data中找 -->
        <input type="text" v-focus v-color="'red'">
        <p v-fontweight="'red'">我是一個p標簽</p>
        <p>我是一個p標簽</p>
        <h1>我是一個h1標簽</h1>
        <h1 v-fontweight="'red'">我是一個h1標簽</h1>
    </div>

    <script>

        //  第一個參數是指令的名字，第二個參數是對象
　　　　 //  1：自定義全局指令
        Vue.directive("focus", {
            bind : function (el) {  
                //進行一些樣式的操作
                // el.style.color = "red";
            },

            inserted : function (el) {
              // 進行一些js操作  
              el.focus();
            },

            updated : function (el) {
                
            },

        });


        //  自定義樣式指令
        Vue.directive("color", {
            bind : function (el, binding) {
                el.style.color = binding.value;
            },

            inserted : function (el) { 

             },

             updated : function (el) { 

              },

        });

        var vm = new Vue({
            el : "#app",
            data : {

            },


            methods : {

            },

// 2： 自定義私有的指令
            directives : {
                "fontweight" : { 
                    bind : function (el , binding) {  
                        el.style.color = binding.value;
                    }
                 },
            },
        });
    
    </script>

10：Vue的生命周期

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'ok'
      },
      methods: {
        show() {
          console.log('執行了show方法')
        }
      },
      beforeCreate() { // 1：這是我們遇到的第一個生命周期函數，表示實例完全被創建出來之前，會執行它
        // console.log(this.msg)
        // this.show()
        // 注意： 在 beforeCreate 生命周期函數執行的時候，data 和 methods 中的 數據都還沒有沒初始化
      },
      
      created() { // 2：這是遇到的第二個生命周期函數
        // console.log(this.msg)
        // this.show()
        //  在 created 中，data 和 methods 都已經被初始化好了！
        // 如果要調用 methods 中的方法，或者操作 data 中的數據，最早，只能在 created 中操作
      },

      beforeMount() { // 3： 這是遇到的第3個生命周期函數，表示 模板已經在內存中編輯完成了，但是尚未把 模板渲染到 頁面中
        // console.log(document.getElementById('h3').innerText)
        // 在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串
      },

      mounted() { // 4： 這是遇到的第4個生命周期函數，表示，內存中的模板，已經真實的掛載到了頁面中，用戶已經可以看到渲染好的頁面了
        // console.log(document.getElementById('h3').innerText)
        // 注意： mounted 是 實例創建期間的最后一個生命周期函數，當執行完 mounted 就表示，實例已經被完全創建好了，此時，如果沒有其它操作的話，這個實例，就靜靜的 躺在我們的內存中，一動不動
      },


      // 5： 接下來的是運行中的兩個事件
      beforeUpdate() { // 這時候，表示 我們的界面還沒有被更新【數據被更新了嗎？  數據肯定被更新了】
        /* console.log('界面上元素的內容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 數據是：' + this.msg) */
        // 得出結論： 當執行 beforeUpdate 的時候，頁面中的顯示的數據，還是舊的，此時 data 數據是最新的，頁面尚未和 最新的數據保持同步
      },

      // 6：
      updated() {
        console.log('界面上元素的內容：' + document.getElementById('h3').innerText)
        console.log('data 中的 msg 數據是：' + this.msg)
        // updated 事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的
      }
    });
  </script>

7：當執行beforeDestory鈎子函數的時候，Vue實例從運行階段進入到銷毀階段

當執行beforeDestory鈎子函數的時候，Vue實例身上所有的data和methods和過濾器和指令都處於可以利用的狀態。此時還沒有真正的銷毀。

8：當執行Destoryed鈎子函數的時候，Vue實例身上所有的data和methods和過濾器和指令都處於不利用的狀態。

11：按鍵修飾符號

.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

自定義全局鍵盤碼：

Vue.config.keycodes.f2 = 113;

12：Vue動畫

1：transition動畫

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 2. 自定義兩組樣式，來控制 transition 內部的元素實現動畫 -->
  <style>
    /* v-enter 【這是一個時間點】 是進入之前，元素的起始狀態，此時還沒有開始進入 */
    /* v-leave-to 【這是一個時間點】 是動畫離開之后，離開的終止狀態，此時，元素 動畫已經結束了 */
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    /* v-enter-active 【入場動畫的時間段】 */
    /* v-leave-active 【離場動畫的時間段】 */
    .v-enter-active,
    .v-leave-active{
      transition: all 0.8s ease;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏 -->
    <!-- 1. 使用 transition 元素，把 需要被動畫控制的元素，包裹起來 -->
    <!-- transition 元素，是 Vue 官方提供的 -->
    <transition>
      <h3 v-if="flag">這是一個H3</h3>
    </transition>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

</html>

2：animate.css 動畫

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <link rel="stylesheet" href="./lib/animate.css">
  <!-- 入場 bounceIn    離場 bounceOut -->
</head>

<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- 需求： 點擊按鈕，讓 h3 顯示，再點擊，讓 h3 隱藏 -->
    <!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
      <h3 v-if="flag">這是一個H3</h3>
    </transition> -->

    <!-- 使用 :duration="毫秒值" 來統一設置 入場 和 離場 時候的動畫時長 -->
    <!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
      <h3 v-if="flag" class="animated">這是一個H3</h3>
    </transition> -->

    <!-- 使用  :duration="{ enter: 200, leave: 400 }"  來分別設置 入場的時長 和 離場的時長  -->
    <transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">這是一個H3</h3>
    </transition> 
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

</html>

3：鈎子函數動畫

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <input type="button" value="快到碗里來" @click="flag=!flag">
    <!-- 1. 使用 transition 元素把 小球包裹起來 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>

  <script>

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {
        // 注意： 動畫鈎子函數的第一個參數：el，表示 要執行動畫的那個DOM元素，是個原生的 JS DOM對象
        // 大家可以認為 ， el 是通過 document.getElementById('') 方式獲取到的原生JS DOM對象
        beforeEnter(el){
          // beforeEnter 表示動畫入場之前，此時，動畫尚未開始，可以 在 beforeEnter 中，設置元素開始動畫之前的起始樣式
          // 設置小球開始動畫之前的，起始位置
          el.style.transform = "translate(0, 0)"
        },
        enter(el, done){
          // 這句話，沒有實際的作用，但是，如果不寫，出不來動畫效果；
          // 可以認為 el.offsetWidth 會強制動畫刷新
          el.offsetWidth
          // enter 表示動畫 開始之后的樣式，這里，可以設置小球完成動畫之后的，結束狀態
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = 'all 1s ease'

          // 這里的 done， 起始就是 afterEnter 這個函數，也就是說：done 是 afterEnter 函數的引用
          done()
        },
        afterEnter(el){
          // 動畫完成之后，會調用 afterEnter
          // console.log('ok')
          this.flag = !this.flag
        }
      }
    });
  </script>
</body>

</html>

13：組件化開發

1：全局組件 extend

<div id="app">
    <!-- 如果要使用組件，直接，把組件的名稱，以 HTML 標簽的形式，引入到頁面中，即可 -->
    <mycom1></mycom1>
  </div>

  <script>
    // 1.1 使用 Vue.extend 來創建全局的Vue組件
    // var com1 = Vue.extend({
    //   template: '<h3>這是使用 Vue.extend 創建的組件</h3>' // 通過 template 屬性，指定了組件要展示的HTML結構
    // })
    // 1.2 使用 Vue.component('組件的名稱', 創建出來的組件模板對象)
    // Vue.component('myCom1', com1)
    // 如果使用 Vue.component 定義全局組件的時候，組件名稱使用了 駝峰命名，則在引用組件的時候，需要把 大寫的駝峰改為小寫的字母，同時，兩個單詞之前，使用 - 鏈接；
    // 如果不使用駝峰,則直接拿名稱來使用即可;
    // Vue.component('mycom1', com1)

    // Vue.component 第一個參數:組件的名稱,將來在引用組件的時候,就是一個 標簽形式 來引入 它的
    // 第二個參數: Vue.extend 創建的組件  ,其中 template 就是組件將來要展示的HTML內容
    Vue.component('mycom1', Vue.extend({
      template: '<h3>這是使用 Vue.extend 創建的組件</h3>'
    }))


    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>

2: 對象模式

<div id="app">
    <!-- 還是使用 標簽形式,引入自己的組件 -->
    <mycom2></mycom2>
  </div>

  <script>
    // 注意:不論是哪種方式創建出來的組件,組件的 template 屬性指向的模板內容,必須有且只能有唯一的一個根元素
    Vue.component('mycom2', {
      template: '<div><h3>這是直接使用 Vue.component 創建出來的組件</h3><span>123</span></div>'
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });
  </script>



3: 模板創建組件

<div id="app">
        <my-custom-com3></my-custom-com3>
    </div>

    <template id="com3">
        <div>
            <h1>這是通過template標簽創建的組件</h1>
        </div>
    </template>
    <script>
　　　　　// 1：全局創建組件
        // Vue.component("my-custom-com3", {
        //     template : "#com3",
        // })
        var vm = new Vue({
            el : "#app",

            data : {

            },

            methods : {

            },

            filters : {

            },

            directives : {

            },
            components: { // 2：定義實例內部私有組件的
                myCustomCom3: {
                    template: '#com3'
        }
      },


        });
    
    </script>

14：組件中的數據和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <my-com></my-com>

    </div>

    <template id="tem">
        <h1>{{msg}}</h1>
    </template>

    <script>
        Vue.component("my-com", {
            template : "#tem",
            data : function () {  
                return {
                    msg : "組件中的數據",
                };
            },
        });
        var vm = new Vue({
            el : "#app",
        });
    </script>
</body>
</html>

15：組件之間的切換

1：flag切換

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="flag=true">登錄</a>
    <a href="" @click.prevent="flag=false">注冊</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>

  </div>

  <script>
    Vue.component('login', {
      template: '<h3>登錄組件</h3>'
    })

    Vue.component('register', {
      template: '<h3>注冊組件</h3>'
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: false
      },
      methods: {}
    });
  </script>
</body>

</html>

2：v-bind:is

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="comName='login'">登錄</a>
    <a href="" @click.prevent="comName='register'">注冊</a>

    <!-- Vue提供了 component ,來展示對應名稱的組件 -->
    <!-- component 是一個占位符, :is 屬性,可以用來指定要展示的組件的名稱 -->
    <component :is="comName"></component>

    <!-- 總結:當前學習了幾個 Vue 提供的標簽了??? -->
    <!-- component,  template,  transition,  transitionGroup  -->

  </div>

  <script>
    // 組件名稱是 字符串
    Vue.component('login', {
      template: '<h3>登錄組件</h3>'
    })

    Vue.component('register', {
      template: '<h3>注冊組件</h3>'
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
      },
      methods: {}
    });
  </script>
</body>

</html>

16：父組件向子組件傳值，通過屬性綁定的方式

1.1：父組件聲明數據

1.2：子組件聲明屬性

1.3：子組件引用的使用綁定屬性

<div id="app">
    <!-- 3：父組件，可以在引用子組件的時候， 通過 屬性綁定（v-bind:） 的形式, 把 需要傳遞給 子組件的數據，以屬性綁定的形式，傳遞到子組件內部，供子組件使用 -->
    <com1 v-bind:parentmsg="msg"></com1>
  </div>

  <script>
    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        // 1：父組件聲明屬性 msg
        msg: '123 啊-父組件中的數據'
      },
      methods: {},

      components: {
        // 結論：經過演示，發現，子組件中，默認無法訪問到 父組件中的 data 上的數據 和 methods 中的方法
        com1: {
          data() { // 注意： 子組件中的 data 數據，並不是通過 父組件傳遞過來的，而是子組件自身私有的，比如： 子組件通過 Ajax ，請求回來的數據，都可以放到 data 身上；
            // data 上的數據，都是可讀可寫的；
            return {
              title: '123',
              content: 'qqq'
            }
          },
          template: '<h1 @click="change">這是子組件 --- {{ parentmsg }}</h1>',

          // 2：子組件聲明傳過來的屬性  parentmsg
          // 注意： 組件中的 所有 props 中的數據，都是通過 父組件傳遞給子組件的
          // props 中的數據，都是只讀的，無法重新賦值
          props: ['parentmsg'], // 把父組件傳遞過來的 parentmsg 屬性，先在 props 數組中，定義一下，這樣，才能使用這個數據
          directives: {},
          filters: {},
          components: {},
          methods: {
            change() {
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });
  </script>

17：父組件向子組件傳遞事件--實現向父組件傳值

<body>
  <div id="app">
    <!-- 2：父組件向子組件 傳遞 方法，使用的是 事件綁定機制； v-on, 當我們自定義了 一個 事件屬性之后，那么，子組件就能夠，通過某些方式，來調用 傳遞進去的 這個 方法了 -->
    <com2 @func="show"></com2>
  </div>

  <template id="tmpl">
    <div>
      <h1>這是 子組件</h1>
      <input type="button" value="這是子組件中的按鈕 - 點擊它，觸發 父組件傳遞過來的 func 方法" @click="myclick">
    </div>
  </template>

  <script>

    // 定義了一個字面量類型的 組件模板對象
    var com2 = {
      template: '#tmpl', // 通過指定了一個 Id, 表示 說，要去加載 這個指定Id的 template 元素中的內容，當作 組件的HTML結構
      data() {
        return {
          sonmsg: { name: '小頭兒子', age: 6 }
        }
      },
      methods: {
        myclick() {
          //3： 當點擊子組件的按鈕的時候，如何 拿到 父組件傳遞過來的 func 方法，並調用這個方法？？？
          //  emit 英文原意： 是觸發，調用、發射的意思
          // this.$emit('func123', 123, 456)

          this.$emit('func', this.sonmsg)
        }
      }
    }


    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        // 1：聲明方法
        show(data) {
          // console.log('調用了父組件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data;
        }
      },

      components: {
        com2
        // com2: com2
      }
    });
  </script>
</body>

18: ref獲取dom元素和組件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="獲取元素" @click="getElement" ref="mybtn">

    <h3 id="myh3" ref="myh3">哈哈哈， 今天天氣太好了！！！</h3>

    <hr>

    <login ref="mylogin"></login>
  </div>

  <script>

    var login = {
      template: '<h1>登錄組件</h1>',
      data() {
        return {
          msg: 'son msg'
        }
      },
      methods: {
        show() {
          console.log('調用了子組件的方法')
        }
      }
    }

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          console.log(document.getElementById('myh3').innerText);

          //  ref  是 英文單詞 【reference】   值類型 和 引用類型  referenceError
          console.log(this.$refs.myh3.innerText);

          console.log(this.$refs.mylogin.msg);
          this.$refs.mylogin.show();
        }
      },
      components: {
        login
      }
    });
  </script>
</body>

</html>

19：路由6部曲

1. 安裝 vue-router 路由模塊
2. 創建一個路由對象
3:路由匹配規則 
4: 將路由規則對象，注冊到 vm 實例上，用來監聽 URL 地址的變化，然后展示對應的組件
5：router-link 默認渲染
6：展示組件位置：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 1. 安裝 vue-router 路由模塊 -->
  <script src="./lib/vue-router-3.0.1.js"></script>

</head>

<body>
  <div id="app">

      <!-- router-link 默認渲染為一個a 標簽 -->
    <!-- 5: 填寫a標簽 -->
    <router-link to="/login" tag="span">登錄</router-link>
    <router-link to="/register">注冊</router-link>


    <!-- 6：展示組件位置：
      這是 vue-router 提供的元素，專門用來 當作占位符的，將來，路由規則，匹配到的組件，就會展示到這個 router-view 中去 -->
    <!-- 所以： 我們可以把 router-view 認為是一個占位符 -->
      <router-view></router-view>

  </div>

  <script>
    // 組件的模板對象
    var login = {
      template: '<h1>登錄組件</h1>'
    }

    var register = {
      template: '<h1>注冊組件</h1>'
    }


    /*  Vue.component('login', {
       template: '<h1>登錄組件</h1>'
     }) */

    // 2. 創建一個路由對象， 當 導入 vue-router 包之后，在 window 全局對象中，就有了一個 路由的構造函數，叫做 VueRouter
    // 在 new 路由對象的時候，可以為 構造函數，傳遞一個配置對象
    var routerObj = new VueRouter({
      // route // 這個配置對象中的 route 表示 【路由匹配規則】 的意思
      routes: [ // 3:路由匹配規則 
        // 每個路由規則，都是一個對象，這個規則對象，身上，有兩個必須的屬性：
        //  屬性1 是 path， 表示監聽 哪個路由鏈接地址；
        //  屬性2 是 component， 表示，如果 路由是前面匹配到的 path ，則展示 component 屬性對應的那個組件
        // 注意： component 的屬性值，必須是一個 組件的模板對象， 不能是 組件的引用名稱；
        // { path: '/', component: login },
        { path: '/', redirect: '/login' }, // 這里的 redirect 和 Node 中的 redirect 完全是兩碼事
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive'
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: routerObj, // 4: 將路由規則對象，注冊到 vm 實例上，用來監聽 URL 地址的變化，然后展示對應的組件
    });
  </script>
</body>

</html>

20：路由傳遞參數

1：路徑傳遞參數

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">

    <!-- 如果在路由中，使用 查詢字符串，給路由傳遞參數，則 不需要修改 路由規則的 path 屬性 -->
    <router-link to="/login?id=10&name=zs">登錄</router-link>
    <router-link to="/register">注冊</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {
      template: '<h1>登錄 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>',
      data(){
        return {
          msg: '123'
        }
      },
      created(){ // 組件的生命周期鈎子函數
        console.log(this.$route)
        console.log(this.$route.query.id)
      }
    }

    var register = {
      template: '<h1>注冊</h1>'
    }

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>
</body>

</html>


2：配置傳參

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">

    <!-- 如果在路由中，使用 查詢字符串，給路由傳遞參數，則 不需要修改 路由規則的 path 屬性 -->
    <router-link to="/login/12/ls">登錄</router-link>
    <router-link to="/register">注冊</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {
      template: '<h1>登錄 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
      data(){
        return {
          msg: '123'
        }
      },
      created(){ // 組件的生命周期鈎子函數
        console.log(this.$route.params.id)
      }
    }

    var register = {
      template: '<h1>注冊</h1>'
    }

    var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },
        { path: '/register', component: register }
      ]
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>
</body>

</html>


21：路由嵌套

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">

    <router-link to="/account">Account</router-link>

    <router-view></router-view>

  </div>

  <template id="tmpl">
    <div>
      <h1>這是 Account 組件</h1>

      <router-link to="/account/login">登錄</router-link>
      <router-link to="/account/register">注冊</router-link>

      <router-view></router-view>
    </div>
  </template>

  <script>

    // 組件的模板對象
    var account = {
      template: '#tmpl'
    }

    var login = {
      template: '<h3>登錄</h3>'
    }

    var register = {
      template: '<h3>注冊</h3>'
    }

    var router = new VueRouter({
      routes: [
        {
          path: '/account',
          component: account,
          // 使用 children 屬性，實現子路由，同時，子路由的 path 前面，不要帶 / ，否則永遠以根路徑開始請求，這樣不方便我們用戶去理解URL地址
          children: [
            { path: 'login', component: login },
            { path: 'register', component: register }
          ]
        }
        // { path: '/account/login', component: login },
        // { path: '/account/register', component: register }
      ]
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router
    });
  </script>
</body>

</html>

22：watch

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <!-- 1. 導入包 -->
  <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
  <div id="app">
    <router-link to="/login">登錄</router-link>
    <router-link to="/register">注冊</router-link>

    <!-- 容器 -->
    <router-view></router-view>

  </div>

  <script>
    // 2. 創建子組件
    var login = {
      template: '<h3>這是登錄子組件，這個組件是 奔波霸 開發的。</h3>'
    }

    var register = {
      template: '<h3>這是注冊子組件，這個組件是 霸波奔 開發的。</h3>'
    }

    // 3. 創建一個路由對象
    var router = new VueRouter({
      routes: [ // 路由規則數組
        { path: '/', redirect: '/login' },
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive' // 和激活相關的類
    })

    // 創建 Vue 實例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router,
      watch: {
        //  this.$route.path
        '$route.path': function (newVal, oldVal) {
          // console.log(newVal + ' --- ' + oldVal)
          if (newVal === '/login') {
            console.log('歡迎進入登錄頁面')
          } else if (newVal === '/register') {
            console.log('歡迎進入注冊頁面')
          }
        }
      }
    });
  </script>
</body>

</html>



5：webpackage

1：在網頁中會引用哪些常見的靜態資源？

- .js .jsx .coffee .ts（TypeScript 類 C# 語言）

CSS

- .css .less .sass .scss

Images

- .jpg .png .gif .bmp .svg

字體文件（Fonts）

- .svg .ttf .eot .woff .woff2

模板文件

- .ejs .jade .vue【這是在webpack中定義組件的方式，推薦這么用】

2：什么是webpack?

webpack 是前端的一個項目構建工具，它是基於 Node.js 開發出來的一個前端工具；

經過剛才的演示，Webpack 可以做什么事情？？？

1. webpack 能夠處理 JS 文件的互相依賴關系；

2. webpack 能夠處理JS的兼容問題，把高級的、瀏覽器不是別的語法，轉為低級的，瀏覽器能正常識別的語法

剛才運行的命令格式： webpack 要打包的文件的路徑打包好的輸出文件的路徑

3：如何完美實現上述的2種解決方案

1. 使用Gulp，是基於 task 任務的；

2. 使用Webpack，是基於整個項目進行構建的；

+ 借助於webpack這個前端自動化構建工具，可以完美實現資源的合並、打包、壓縮、混淆等諸多功能。

+ 根據官網的圖片介紹webpack打包的過程

+ [webpack官網](http://webpack.github.io/)

4：webpack安裝的兩種方式

1. 運行`npm i webpack -g`全局安裝webpack，這樣就能在全局使用webpack的命令

2. 在項目根目錄中運行`npm i webpack --save-dev`安裝到項目依賴中

5：創建你一個webpack工程

1：用npm init -y 創建package.json 配置工程,拿到項目的第一步驟是用包管理工具管理起來。npm

2：創建src和dist目錄

3：在src文件夾下面。創建js文件夾、css文件夾、images文件夾、創建index.html、main.js、index.js

4：添加mode到script標簽中（package.json文件中）

"dev":"webpack --mode development",

"bulid":"webapck --mode production"

5：npm run dev 此時加載的bundle.js是在本地中

　　　可以使用 webpack ./src/main.js -o　./dist/bundle.js ，但是報黃色的警告，所以：用npm run dev來解決

npm run 其實執行了package.json中的script腳本

6: 配置入口和出口函數，

　　直接寫webpack就可以打包。

const path = require('path')

// 向外暴露一個配置對象

module.exports = {

// 1:入口，表示要使用webpack 打包哪個文件。

entry: path.join(__dirname, './src/main.js'),

output : {

// 2：輸出文件的相關配置

path: path.join(__dirname, './dist'), // 指定打包好的文件的目標

filename: 'bundle.js' // 指定文件的名字

}

7:使用webpack-dev-server這個工具來自動打包編譯的功能

//1.運行cnpm i webpack-dev-server -D 來自動打包編譯

//2: webpack-dev-server 依賴webpack包，所以需要一起安裝。

cnpm i webpack -D

cnpm i webpack-cli -D

cnpm i webpack-dev-server webpack webpack-cli -D

2: webpack-dev-server --open --port 3000 --contentBase src

修改完，package.json之后，需要重新運行

--open，自動打開游覽器

--port 修改端口號

--contentBase src 修改根路徑

此時：bundle.js是在內存中，html在物理磁盤中

8：html-webpack-plugin 把html放到內存中

可以自動創建一個script標簽，自動把打包好的 bundle.js 追加到頁面中去

cnpm i html-webpack-plugin -D

9: 處理樣式文件

cnpm i style-loader css-loader -D 處理css文件

cnpm i less-loader less -D 　　　　處理less文件

cnpm i sass-loader node-sass -D　　cnpm i sass fibers -D　　　　　　處理scss文件

cnpm i sass-loader node-sass sass fibers -D

10：處理url路徑、圖片、字體庫

cnpm i url-loader file-loader -D

11:安裝babel

// 通過 Babel ，可以幫我們將高級的語法轉換為低級的語法

// 1. 在 webpack 中，可以運行如下兩套命令，安裝兩套包，去安裝 Babel 相關的loader功能：

// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i @babel/core -D

// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D

// 2. 打開 webpack 的配置文件，在 module 節點下的 rules 數組中，添加一個新的匹配規則：

// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }

// 2.2 注意：在配置 babel 的 loader規則的時候，必須把 node_modules 目錄，通過 exclude 選項排除掉：原因有倆：

// 2.2.1 如果不排除 node_modules，則Babel 會把 node_modules 中所有的第三方 JS 文件，都打包編譯，這樣，會非常消耗CPU，同時，打包速度非常慢；

// 2.2.2 哪怕，最終，Babel 把所有 node_modules 中的JS轉換完畢了，但是，項目也無法正常運行！

// 3. 在項目的根目錄中，新建一個叫做 .babelrc 的Babel 配置文件，這個配置文件，屬於JSON格式，所以，在寫 .babelrc 配置的時候，必須符合JSON語法規范：不能寫注釋，字符串必須用雙引號

// 3.1 在 .babelrc 寫如下的配置：大家可以把 preset 翻譯成【語法】的意思

{

"presets": ["env", "stage-0"],

"plugins": ["transform-runtime"]

}

// 4. 了解：目前，我們安裝的 babel-preset-env, 是比較新的ES語法，之前，我們安裝的是 babel-preset-es2015, 現在，出了一個更新的語法插件，叫做 babel-preset-env ，它包含了所有的和 es***相關的語法

/********************/

上面的做法是 Babel^6x 版本的使用方法，babel在2018年9月份升級了一個大的版本 Babel 7.x，語法有了很大的變動，所以我上面運行的指令已經被out了，必須使用新語法，如下：
新命令如下適合 Babel 7.x和webpack 4 搭配：

安裝babel插件
- 　　運行 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D 轉換工具
- 　　運行 cnpm i @babel/preset-env @babel/preset-stage-0 -D　　語法
安裝能夠識別轉換jsx語法的包 babel-preset-react
- 　　運行 cnpm i @babel/preset-react -D
執行命令：cnpm i @babel/plugin-proposal-class-properties -D
執行命令：cnpm i @babel/runtime -D
添加 .babelrc 配置文件：

最后在 webpack.config.js 中配置上：

{ test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 轉化ES6 語法

/********************/

12：安裝vue

1: npm i vue -S

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解決辦法：

// 在webpack 中嘗試使用 Vue：

// 注意：在 webpack 中，使用 import Vue from 'vue' 導入的 Vue 構造函數，功能不完整，只提供了 runtime-only 的方式，並沒有提供像網頁中那樣的使用方式；

我們用script標簽導入的vue是全新的版本。

解決辦法：

1：修改引用規則。

import Vue from '../node_modules/vue/dist/vue.js'

// 回顧包的查找規則：

// 1. 找項目根目錄中有沒有 node_modules 的文件夾

// 2. 在 node_modules 中根據包名，找對應的 vue 文件夾

// 3. 在 vue 文件夾中，找一個叫做 package.json 的包配置文件

// 4. 在 package.json 文件中，查找一個 main 屬性【main屬性指定了這個包在被加載時候，的入口文件】

2：直接修改 main 屬性

3：導入vue，在webpack.config.js中修改引用指向

2：npm i vue-loader vue-template-compiler -D

3：vue-loader把vue文件中的template script stype文件統一成最終的模板。最后給組件用。

13：路由

npm i vue-router -S

1：導包：

import VueRouter from 'vue-router'

2：綁定路由對象

Vue.use(VueRouter);

3：創建路由對象

var router = new VueRouter({

routes: [

{path: '/account', component: account},

{path: '/goodslist', component:goodslist}

});

4：掛在路由實例中

5：顯示在界面中

<router-link to="/account">Account</router-link>

<router-link to="/goodslist">Goodslist</router-link>

<router-view></router-view>

6：常見的Vue命令

1：全局安裝

1：npm i webpack -g 　　　　　　　　全局安裝webpack。

2：保存到項目中 -S

2：npm i webpack --save-dev　　　　安裝到項目依賴中。

3：cnpm i jquery -S　　　　　　　　　　安裝jquery。

4: cnpm i bootstrap -S 　　　　　　　　安裝bootstrap

5: npm i vue -S　　　　　　　　　　　安裝 vue

開發是用到 -D

3: 安裝 webpack-dev-server

cnpm i webpack-dev-server -D 來自動打包編譯，把bundle.js 放到內存中

cnpm i webpack -D

cnpm i webpack-cli -D

cnpm i webpack-dev-server webpack webpack-cli -D

4: 安裝 html-webpack-plugin 把html放到內存中

cnpm i html-webpack-plugin -D 把html放到內存中

5: 處理樣式文件

cnpm i style-loader css-loader -D 加載less文件

cnpm i less-loader less -D 　　　　處理less文件

cnpm i sass-loader node-sass -D　　cnpm i sass fibers -D　　　　　　處理scss文件

cnpm i sass-loader node-sass sass fibers -D

6：處理url路徑、圖片、字體庫

cnpm i url-loader file-loader -D

7：babel 解決高級語法

安裝babel插件

1: 運行 cnpm i @babel/core babel-loader @babel/plugin-transform-runtime -D 轉換工具

2: 運行 cnpm i @babel/preset-env @babel/preset-stage-0 -D　　語法

3: 安裝能夠識別轉換jsx語法的包 babel-preset-react

　　　　運行 cnpm i @babel/preset-react -D

4: 執行命令：cnpm i @babel/plugin-proposal-class-properties -D

5: 執行命令：cnpm i @babel/runtime -D

8: Vue組件

npm i vue-loader vue-template-compiler -D

9: vue-router

npm i vue-router -S

10：其他命令

3：npm init -y　　　　　　　　　　　　創建package.json文件。

3：webpack ./src/main.js -o ./dist/bundle.js 把main.js處理成bundle.js文件

3：npm run dev　　運行項目

webpack-dev-server --open --port 3000 --contentBase src --hot





6：算法
1：冒泡排序

  <script>

    //冒泡排序:把所有的數據按照一定的順序進行排列(從小到大,從大到下)

    var arr = [10, 0, 100, 20, 60, 30];
    //循環控制比較的輪數
    for (var i = 0; i < arr.length - 1; i++) {
      //控制每一輪的比較的次數
      for (var j = 0; j < arr.length - 1 - i; j++) {
        if (arr[j] < arr[j + 1]) {
          var temp = arr[j];
          arr[j] = arr[j + 1];
          arr[j + 1] = temp;
        }
      }
    }
    console.log(arr);
  </script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 H5跳轉app代碼 h5移動端常見問題 H5常見的兼容問題及解決 H5常用代碼：頁面框架常用的H5代碼 H5常用代碼：適配方案4 H5常用代碼：適配方案1 vue H5微信支付代碼 H5中JavaScript常用代碼片段 H5拖動實現代碼

000 (H5*) 常見代碼

目錄：

5：webpackage

正文

1：HTML

2：行內元素(inline-level)

3：行內塊元素（inline-block）

4: img標簽

5：表單元素

6：自定義列表 dl

7：表格 Table

2：CSS

1：標簽選擇器：

3：id選擇器

#last {

color: pink;

}

8：並集選擇器

9：鏈接偽類選擇器 LV hao

10：font 風格 權重 大小 字體

11：裝飾 text-decoration

12：背景 background

13： 陰影 shadow

14：邊框 border

15：內邊距 padding

16：浮動 為了讓塊元素在一行展示

1：float 浮 漏 特

2： 清除浮動本質

3：清除浮動的方法

17：定位（完成飄起來、脫標）

1：靜態定位 static

2：相對定位relative(自戀型)：占有位置

1. 脫標、占有位置

3：絕對定位absolute (拼爹型)：浮動、不占位置（浮動之后，margin失效）

3：JS

1：js是一門什么語言，包含什么

2：js中的原始數據類型: number,string,boolean,undefined,null,object

3：類型轉換

4：變量

1：作用,存儲數據的或者是操作數據

2：獲取變量的類型 var num = 10;

6：數組:存儲一組有序的數據,數據類型可以不一樣

8：變量、作用域、作用域鏈

11: 預解析 和 函數預解析分段不沖突、變量不分段

12：對象

1：創建對象三種方式:

1.調用系統的構造函數創建對象

13：簡單數據類型和復雜數據類型

14：Math

16：字符串

17：Array 數組的方法

18：包裝類型

20：原型對象的簡單寫法--必須手動添加構造器

21：實例對象訪問屬性和方法

22：call和apply方法調用 修改原型指向，調用

23：bind方法復制

24：閉包

25：沙箱：虛擬測試和真實世界結果一樣，不影響真實世界。

26：原型和原型鏈

27：構造函數的原型指向可以改變

1: 原型的指向是可以改變的

2: 構造函數的原型對象（prototype）指向如果改變了，實例對象的原型（__proto__）指向也會發生改變

3: 實例對象和原型對象之間的關系是通過__proto__原型來聯系起來的，這個關系就是原型鏈

28: 原型的最終指向

29：先修改原型指向在添加方法。

30: 一個神奇的原型鏈

31：原型鏈

32：繼承（通過原型來修改原型執行實現繼承）

33：利用call，在構造函數中修改原型指向

34：組合繼承

35：拷貝繼承

36：函數聲明和函數表達式的區別

37：函數中this的指向

38：淺拷貝

39：深拷貝

40：遍歷DOM樹

41：正則表達式

42：正則表達式的創建方式

43：字符創中的正則表達式

44:真數組和偽數組

　　color: pink;

10：font 風格權重大小字體

13：陰影 shadow

16：浮動為了讓塊元素在一行展示

1：float 浮漏特

2：清除浮動本質

11: 預解析和函數預解析分段不沖突、變量不分段

　1.調用系統的構造函數創建對象

22：call和apply方法調用修改原型指向，調用

2: 構造函數的原型對象（prototype）指向如果改變了，實例對象的原型（proto）指向也會發生改變

3: 實例對象和原型對象之間的關系是通過proto原型來聯系起來的，這個關系就是原型鏈

2：什么是webpack?