js歷史

是基于事件和對(duì)象驅(qū)動(dòng)的解釋性，松散型的語言

解釋性：由瀏覽器解釋執(zhí)行

松散型：變量可以用來保存任何類型的數(shù)據(jù)

• 布蘭登艾奇
• 引入方式
  • 外鏈js
  • 內(nèi)嵌js
  • 重定向
• 測(cè)試方式
  • alert()
  • console.log()
  • document.write()
• 組成部分
  • ECMAscript ,基礎(chǔ)語法
  • BOM 瀏覽器對(duì)象模型
  • DOM 文檔對(duì)象模型
• 作用
  • 寫網(wǎng)頁的動(dòng)態(tài)效果
  • 寫網(wǎng)頁的游戲
  • 使用cookie、sessicon
  • 實(shí)現(xiàn)交互
  • 發(fā)送表單form
  • 發(fā)送ajax
  • ......

ECMAscript

變量 值和址

就是計(jì)算機(jī)內(nèi)存里的一塊地址單元，為了存儲(chǔ)數(shù)據(jù)

• 變量的定義
  • var let const

 var nub,nub1;
 nub=200;

 var nub=200,nub1='123';
 
 const PI=3.14;
 const arr = [1]
 arr.push('1')

• 命名方式
  • 可以用數(shù)字、字母、下劃線、$ 構(gòu)成 ,不能以數(shù)字開頭
  • 不能是關(guān)鍵字或保留字
  • 可以用首字母大寫，或駝峰命名法來命名
  • 嚴(yán)格區(qū)分大小寫
  • 命名要有意義
• 存儲(chǔ)
  • 存儲(chǔ)在棧區(qū)
  • 可以存儲(chǔ)任何的數(shù)據(jù)類型

數(shù)據(jù)類型

根據(jù)存儲(chǔ)位置不同來劃分

基礎(chǔ)數(shù)據(jù)類型的值一般存儲(chǔ)在棧區(qū) 傳值

引用數(shù)據(jù)類型的值一般存儲(chǔ)在堆區(qū)，地址（引用） 存儲(chǔ)在棧區(qū) 傳址

基礎(chǔ)數(shù)據(jù)類型：

Number    string    boolean      null     undefind     symbol

undefined

undefined == null //true

• 一個(gè)變量，只聲明，不賦值，默認(rèn)值就是undefined
• 一個(gè)對(duì)象，沒有某個(gè)屬性，這個(gè)屬性就是undefined
• 數(shù)組某個(gè)位置沒有值，也是undefined
• 函數(shù)的參數(shù)不傳值，默認(rèn)傳undefined
• 函數(shù)返回值，默認(rèn)返回undefined

• 引用類型
  • 數(shù)組 array
  • 函數(shù) function
  • 對(duì)象 object

typeof      //number   string     boolean     object    function

instanceof    檢測(cè)某一個(gè)對(duì)象是否是某一個(gè)構(gòu)造函數(shù)的實(shí)例   一般用于檢測(cè)引用類型    例如：//Array

`` 模板字符串

var nub1 = 5
var nub2 = 40
console.log(`我們班${nub1 + nub2} 人,男生${nub2}人`)
console.log('我們班'+ (nub1 + nub2) + "人，男生" + nub2 + '人')

運(yùn)算符

• 算術(shù)運(yùn)算符
  • + 字符串相加表示連接，相加后變成字符串
  • % 不對(duì)小數(shù)取余數(shù)
  • ++ -- 分先后，+在前和在后不同，如果存在賦值的情況，+在前，先+，后賦值，反之相反。但是不論是在前還是在后，這個(gè)運(yùn)算的變量結(jié)果都會(huì)+1

  // Number()  不能轉(zhuǎn)換undefined   // NaN
  // 調(diào)用 Number()頂層函數(shù)進(jìn)行隱式轉(zhuǎn)換   
  console.log(true + false)   // 1
  console.log(null + 1)  // 1
  console.log(undefined + 1) // NaN

• 邏輯運(yùn)算符 結(jié)果不一定是boolean類型值，只要運(yùn)算停留在什么位置，結(jié)果就是什么。 但是&& ,要求運(yùn)算兩邊都得滿足，|| 兩邊只要滿足一個(gè)就行。只要這個(gè)運(yùn)算能夠計(jì)算出結(jié)果，立即停止運(yùn)行。

* &&
* ||
* !    非(!)運(yùn)算結(jié)果一定是boolean類型值

  true && 1   // 1
  true || 1   // true
  null && false // null
  1 && 2    // 2
  
  !!1   //  boolean() 函數(shù)
  

• 比較運(yùn)算符
  • 字符串進(jìn)行比較的時(shí)候，比較ascii碼值大小
  • undefined==null 為真
  • == === 全等需要比較類型

console.log('abc' == 'acb')    // false
console.log(true > 1)   // false
console.log(true == 1)   // true
console.log(true === 1)    // false   ===  檢測(cè)類型

• 特殊運(yùn)算符 三元

  • 特殊運(yùn)算符

    • new 用來創(chuàng)建對(duì)象
    • delete 用來刪除對(duì)象的屬性
    • typeof 用來檢測(cè)基礎(chǔ)數(shù)據(jù)類型

  • 三元 （賦值——有條件的賦值）

    • var a=表達(dá)式? a:b 主要用來賦值

      var nub = 3 ? new Array() : new Object()
      console.log(nub)     // []
      
      var nub = document.body.scrollTop ? document.body : document.documentElement
      

  • instanceof 用來檢測(cè)某個(gè)對(duì)象是否是某個(gè)構(gòu)造函數(shù)的實(shí)例 比如用來檢測(cè)Array

ASCII 美國標(biāo)準(zhǔn)信息交換碼 EASCII 歐洲標(biāo)準(zhǔn) gb2312 國標(biāo) =>> gbk（微軟）（擴(kuò)展【繁體字、少數(shù)民族字】）

uncode(通用) 傳輸方式（utf-8）

0 48 a 97 A 65 上 回車

流程控制

當(dāng)滿足某個(gè)條件的時(shí)候，按照一定順序執(zhí)行的代碼

• 順序結(jié)構(gòu)
• 條件結(jié)構(gòu)

  • if

  • switch 通常用來判斷單個(gè)值 枚舉

    var nub = 1
    switch (nub) {
          case 1: 
              console.log(1)
              console.log(1)
              console.log(1)
              console.log(1)
           break;
          case 2:
              console.log(2)
              console.log(2)
              console.log(2)
           break;
          default : ;
    }              // 1 1 1 1
    

    ?

• 循環(huán)結(jié)構(gòu)

  • for

  • while

    var arr = []
    while(arr.length < 20) {
      arr.push(1)       //隱式的步徑值
    }
    

  • do while

   ```js
  var arr = []
  do() {
    arr.push(1)       //隱式的步徑值
  } while(arr.length < 0)   // arr = [1]
   ```

?

數(shù)組

數(shù)組就是一系列有直接或者間接聯(lián)系的數(shù)據(jù)的集合

• 聲明方式

  • var arr=[];
  • var arr=new Array();

• 訪問方式和設(shè)置方式

  • arr[1]
  • arr[1]=123;
  • arr['1']
  • arr['length']
  • arr.length

• 數(shù)組遍歷

  • for
  • foreach
  • for in

• 二維數(shù)組

  一維數(shù)組的值都是數(shù)組的時(shí)候

  循環(huán)遍歷 for for

var arr = ['a']
console.log(arr['length'])
console.log(arr.length)

// 數(shù)據(jù)的length屬性很有特點(diǎn)——它不是只讀的。可以通過設(shè)置這個(gè)屬性，從數(shù)組的末尾移除項(xiàng)或向數(shù)組中添加新項(xiàng)

//js可以使用方括號(hào)表示法來訪問對(duì)象的屬性。
//在使用方括號(hào)語法時(shí)，應(yīng)該將要訪問的屬性以 【字符串的形式】 放在方括號(hào)中

//使用方括號(hào)語法的主要優(yōu)點(diǎn)是可以通過變量來訪問屬性                  

兩個(gè)數(shù)組鏈接
return [...arr1,...arr2]

函數(shù)

將實(shí)現(xiàn)某一特定功能的代碼塊，封裝起來，以便重復(fù)使用

• 函數(shù)的定義

  • function // 關(guān)鍵字定義function的方式
  • var fun=function(){} 字面量(匿名函數(shù)賦給變量)
  • var fun=new Function(){} 不常用

• 函數(shù)的調(diào)用 （一個(gè)函數(shù)如果不調(diào)用，那么永遠(yuǎn)也不會(huì)執(zhí)行）

  • 函數(shù)名字或者是變量名字() fun()
  • 匿名函數(shù)的自運(yùn)行 (function(){})()

• 函數(shù)的參數(shù)

  函數(shù)的參數(shù)相當(dāng)于一個(gè)局部變量，可以接受任何類型的值，不論是引用數(shù)據(jù)類型還是基礎(chǔ)數(shù)據(jù)類型

  • 形式參數(shù)和實(shí)際參數(shù) 函數(shù)在定義時(shí)候的參數(shù)，函數(shù)在運(yùn)行時(shí)的參數(shù)
  • 形式參數(shù)和實(shí)際參數(shù)的個(gè)數(shù)可以不相同，如果一個(gè)形式參數(shù)沒有被傳參，默認(rèn)傳遞undefined,如果一個(gè)實(shí)際參數(shù)，沒有相應(yīng)的形式參數(shù)接收 ，我們可以使用arguments ,會(huì)默認(rèn)的接受所有傳遞的實(shí)際參數(shù)。
  • 函數(shù)的形式參數(shù)可以接受任何類型的數(shù)據(jù)，不論是引用類型還是基礎(chǔ)數(shù)據(jù)類型
  • 函數(shù)的形式參數(shù)其實(shí)相當(dāng)于定義的局部變量
  • 函數(shù)的參數(shù)就是封裝的接口

function fun() {
  consloe.log(arguments[0])  //
}
var nub1 = 200
var nub2 = 300
fun(nub1, nub2)

    function fun(nub1, nub2 = '123') {
      console.log(nub2)  //null
    }
    var nub1 = 200
    var nub2 = 300
    fun(nub1, null)

    function fun(nub1, nub2 = '123') {
      console.log(nub2)  //'123'
    }
    var nub1 = 200
    var nub2 = 300
    fun(nub1, undifined)

• 函數(shù)的返回值
  • 任何一個(gè)函數(shù)，在運(yùn)行結(jié)束后，都會(huì)返回一個(gè)值，默認(rèn)是undefined
  • 函數(shù)只能有一個(gè)返回值，但是可以有多條返回語句
  • 函數(shù)一旦返回，立即停止運(yùn)行
  • fun() 這是一個(gè)表達(dá)式，表達(dá)式的值是函數(shù)的返回值
  • 函數(shù)什么時(shí)候需要返回？當(dāng)我們需要用到內(nèi)部的局部變量的時(shí)候，我們可以將這個(gè)變量的值返回、或者終止函數(shù)運(yùn)行。

var sum=function(a,b){
    var he=a+b;
    return he;
}
var num=sum(1,2); 
console.log(num)   //3

• 函數(shù)的作用域和作用域鏈

作用域指的是變量或者是函數(shù)在某個(gè)范圍內(nèi)有意義。

當(dāng)一個(gè)函數(shù)嵌套另外一個(gè)函數(shù)，作用域發(fā)生嵌套，就會(huì)形成作用域鏈 。
在一個(gè)函數(shù)運(yùn)行時(shí)候，會(huì)自動(dòng)的創(chuàng)建一個(gè)集合，用來保存可見范圍內(nèi)所有的變量或者是對(duì)象。這個(gè)集合就是作用域鏈。

• 環(huán)境
  • 宿主環(huán)境 （瀏覽器）
  • 運(yùn)行環(huán)境
    • 全局環(huán)境 window 全局變量
    • 局部環(huán)境 函數(shù)環(huán)境 局部變量
    • 塊級(jí)作用域
• 全局變量 擁有全局的作用域 在任何位置都可以訪問到 在window里面都有意義
• 局部變量 擁有局部的作用域，只能在當(dāng)前環(huán)境中訪問 只在當(dāng)前的函數(shù)環(huán)境中有意義

var nub=200;
function fun(){
    var nub=300;
    console.log();
}
fun();
console.log(nub);

• 預(yù)解析

在程序開始運(yùn)行之前，js會(huì)將以var 聲明的變量和以function關(guān)鍵字聲明的函數(shù)，提前解析到相應(yīng)的環(huán)境中。

預(yù)解析是分塊解析的，但是所有的script標(biāo)簽對(duì)又是一個(gè)整體，已經(jīng)加載的script里面的內(nèi)容，可以在后面的script里面訪問

console.log(nub);
var nub=200;
console.log(nub);

• javascript 垃圾處理

  找出那些不再使用的變量，然后釋放其占用的內(nèi)存。為此，垃圾收集器會(huì)按照固定的時(shí)間間隔（或代碼執(zhí)行中預(yù)定的收集時(shí)間），周期性地執(zhí)行這一操作。

  • 當(dāng)函數(shù)運(yùn)行完畢之后，內(nèi)部的局部變量會(huì)立即被清除
  • 當(dāng)一個(gè)對(duì)象，不再被引用的時(shí)候，會(huì)在某一個(gè)時(shí)刻被刪除
  • 垃圾的收集方式：

  標(biāo)記清除：（常見）

  垃圾收集器在運(yùn)行的時(shí)候會(huì)給存儲(chǔ)在內(nèi)存中的所有變量都加上標(biāo)記（當(dāng)然，可以使用任何標(biāo)記方式）。然后，它會(huì)去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量的標(biāo)記。而在此之后再被加上標(biāo)記的變量將被視為準(zhǔn)備刪除的變量，原因是環(huán)境中的變量已經(jīng)無法訪問到這些變量了。最后，垃圾收集器完成內(nèi)存清除工作，銷毀那些帶標(biāo)記的值并回收它們所占用的空間

  引用計(jì)數(shù)：（不常見）

  跟蹤記錄每個(gè)值被引用的次數(shù)。當(dāng)聲明一個(gè)變量并將一個(gè)引用類型值賦給該變量時(shí)，則這個(gè)值的引用次數(shù)就是1。如果同一個(gè)值又被賦給另一個(gè)變量，則該值的引用次數(shù)加1。相反，如果包含這個(gè)值引用的變量又取得另外一個(gè)值，則這個(gè)值的引用次數(shù)減1。當(dāng)這個(gè)值的引用次數(shù)變成0時(shí)，則說明沒有辦法再訪問這個(gè)值了，因而就可以將其占用的內(nèi)存空間回收回來。這樣，當(dāng)垃圾收集器下次再運(yùn)行時(shí)，他就會(huì)釋放那些引用次數(shù)為0的值所占用的內(nèi)存

• 閉包

當(dāng)一個(gè)函數(shù)嵌套另外一個(gè)函數(shù)，在內(nèi)部函數(shù)中用到了外部函數(shù)的局部變量，在函數(shù)外部去訪問內(nèi)部函數(shù)的時(shí)候，就形成了閉包

function aa(){
    var nub=200;
    function bb(){
         console.log(nub);
    }
    return bb;
}
var fun=aa();
  fun()  //  200 

// 按照垃圾處理，aa運(yùn)行結(jié)束的時(shí)候，內(nèi)部的200應(yīng)該是被清除。但是這是時(shí)候，將bb函數(shù)返回，在外部調(diào)用的時(shí)候，會(huì)用到nub這個(gè)局部變量，js會(huì)將這個(gè)變量保留下來。
  

• 匿名函數(shù)自運(yùn)行

(function () {
    alert(1);
})()

• 回調(diào)函數(shù)

當(dāng)函數(shù)的參數(shù)傳遞是函數(shù)的時(shí)候，這個(gè)函數(shù)就是回調(diào)函數(shù) //當(dāng)一個(gè)函數(shù)作為另一個(gè)函數(shù)參數(shù)的時(shí)候

function fun(a, b, fn) {
    fn(a, b)
}
fun(1, 3, function () {
    console.log(a * b)
})      // 3

• 遞歸函數(shù)

當(dāng)一個(gè)函數(shù)自己調(diào)用自己的時(shí)候，就形成了遞歸

// 階乘  5！  n!
function jie(n) {
  if (n == 0) {
    return = 1
  }
  return n * jie(n - 1)
}

// 費(fèi)波那契  1 2 3 5 8 13 ... n
function fei() {
  if (n == 1) {
    return 1
  }
  if (n == 2){
    return 2
  }
  return fei(n - 1) + fei(n - 2)
}
// 深拷貝和淺拷貝
// var arr=[[1,[]],[1,2],["a","b"]]

• 箭頭函數(shù)

  var arr = []
  var result = arr.map (value => value + 'new')
  

• 內(nèi)置頂層函數(shù)

Nubmer() String() Boolean() parseInt() parsefloat()

// 做算術(shù)運(yùn)算隱式調(diào)用Number函數(shù)
console.log(1 - true)  //0
console.log(1 - undefined)  //NaN
console.log(1 - null)   //1


// 做比較運(yùn)算隱式調(diào)用Number函數(shù)
console.log(1 > true)  //false
console.log(null == undefined) //true     特殊情況
console.log(null == false) //false      特殊情況

// 做布爾運(yùn)算隱式調(diào)用Boolean函數(shù)

對(duì)象

人們研究的一切事物都可以稱之為對(duì)象

類和對(duì)象

將一些具有某些特性的對(duì)象的特征抽象起來就形成類
類也可以作為對(duì)象 的判別，也可以用來創(chuàng)建對(duì)象

類是對(duì)象的抽象 對(duì)象是類的實(shí)例化

• 對(duì)象的創(chuàng)建

  • var obj={}

    //以json格式去創(chuàng)建對(duì)象
    var obj = {
        name: 'lisi',
        age: 23,
        fun: function () {
            alert(1)
        }
    }
    obj.weight = '70kg'
    var str = 'name'
    console.log(obj)
    

  • var obj=new 構(gòu)造函數(shù)()

    //構(gòu)造函數(shù)提供對(duì)象的初始化
    function Person(name, age) {
        this.name = name;
        this.age = age
    }
    

  • var obj= new Object()

• new 發(fā)生了三件事情

1.創(chuàng)建一個(gè)空對(duì)象  obj
2.讓obj._proto_ == Person.prototype
3.Person.call(obj)

• 對(duì)象的屬性和方法
  • 對(duì)象的一些特征，抽象之后，我們叫做屬性
  • 如果這個(gè)屬性的值是一個(gè)函數(shù)，我們叫做方法

var obj={
    name:'lisi',
    age:123,
    fun:function(){
        
    }
}
console.log(obj.name)
console.log(obj['name'])
obj.index=1;
obj['index']=1;
obj.fun();

• 構(gòu)造函數(shù)和普通函數(shù)區(qū)別
  • 構(gòu)造函數(shù)是為了提供對(duì)象的初始化
  • 構(gòu)造函數(shù)一般不用定義返回值
  • 構(gòu)造函數(shù)內(nèi)部會(huì)使用this
  • 都是new 構(gòu)造函數(shù)
• 繼承
  主要是在實(shí)例化也是new 的時(shí)候
  obj.proto=構(gòu)造函數(shù).prototype

 var obj=new person();
 person.prototype={
     aa:function(){
     }
 }
 每個(gè)對(duì)象都有__prototype__ 屬性    每個(gè)函數(shù)都有prototype屬性   

• 對(duì)象的分類

  • 宿主對(duì)象
  • 內(nèi)置對(duì)象

• call()和apply()

  每個(gè)函數(shù)都有call()和apply()方法

• this

  誰調(diào)用this就指向誰

數(shù)組方法

pop,push,reverse,shift,sort,splice,unshift 會(huì)改變?cè)瓟?shù)組

join,concat,indexOf,lastIndexOf,slice,toString 不會(huì)改變?cè)瓟?shù)組

map,filter,some,every,reduce,forEach這些迭代方法不會(huì)改變?cè)瓟?shù)組

字符串

Math

BOM

window屬性和方法

• window.screen.width // 屏幕寬度
• window.screen.height // 屏幕高度
• alert()
• prompt()
• top
• 時(shí)間函數(shù)
  • setInterval
  • clearInterval()
  • setTimeout
  • clearTimeout()

location

• protocol
• hostname
• port
• search
• hash
• pathname

http: / https:(http加強(qiáng)版，比較安全)
//超文本傳輸協(xié)議

// 協(xié)議    主機(jī)名+端口號(hào)/主機(jī)名   端口號(hào)   路徑 查詢字符串  錨地址
location.protocol     location.host/location.hostname      location.port       location.pathname location.search   location.hash

• location.href

  location.href = ("http://baidu.com") //跳轉(zhuǎn)到某個(gè)頁面
  

• location.reload(true)

  location.reload(true)  //重新加載 所有數(shù)據(jù)
  

• location.assign()

  location.assign('http://baidu.com') //跳轉(zhuǎn)到某個(gè)頁面
  

• location.replace()

  location.replace('http://baidu.com')  //不會(huì)留下歷史記錄
  

history

• length
• back() // 上一個(gè)頁面
• forword() //下一個(gè)頁面
• go(n) // go(0) 刷新

http: 
https：(http加強(qiáng)版，比較安全)
超文本傳輸協(xié)議
網(wǎng)絡(luò)傳輸協(xié)議

TCP/IP     7層協(xié)議      網(wǎng)絡(luò)層    
www.aebabs.com：80（端口號(hào)）(path) index.html?查詢     域名   主機(jī)地址

DOM

文檔操作

獲取設(shè)置文檔信息

• document.url
• document.title

獲取寬高

如果一個(gè)塊元素如果不設(shè)置寬度，默認(rèn)寬度是它父元素的寬度，默認(rèn)高度是它內(nèi)容的高度

• window.screen.width //屏幕寬度

• window.screen.height //屏幕高度

• document.documentElement.clientWidth //獲取瀏覽器窗口寬度

• document.documentElement.clientHeight //獲取瀏覽器窗口高度

• ele.offsetWidth // 實(shí)際寬高 不包括margin

• offsetHeight

• offsetLeft

• offsetTop

  計(jì)算的是距離有定位屬性的上級(jí)元素的距離，如果沒有定位屬性的父元素，計(jì)算的是距離body的值

獲取元素

• document.getElementById()
• obj.getElementsByClassName()
• obj.getElementsByTagName()
• document.getElementsByName()
• obj.querySelector()
• obj.querySelectorAll()

對(duì)于元素內(nèi)容的操作

• innerHTML
• inenrText

對(duì)于元素屬性的操作

獲取屬性

• 標(biāo)準(zhǔn)屬性 obj.src
• getAttribute()

設(shè)置屬性

• setAttribute(key, value)

• 非標(biāo)準(zhǔn) get set
• class obj.className
• class obj.classList.add .remove .toggle

對(duì)于元素的樣式操作

• 獲取

  • getComputedStyle(obj,null).屬性 / obj.currentStyle.樣式 IE
  • 行內(nèi)樣式 obj.style.屬性

• 添加

  • obj.style.css屬性
  • obj.style.cssText

• 通過類名或者是id名，屬性名字進(jìn)行設(shè)置

  ?

事件

事件冒泡

事件流

定義： 當(dāng)一個(gè)事件觸發(fā)的時(shí)候，當(dāng)前元素的父元素乃至整個(gè)頁面都會(huì)以一定的順序來響應(yīng)事件，響應(yīng)的順序叫做事件流

• 冒泡型事件流

  從當(dāng)前元素開始向上級(jí)進(jìn)行冒泡觸發(fā)

• 捕獲型事件流 (IE低版本沒有)

  從根元素開始向當(dāng)前元素進(jìn)行觸發(fā)

• mouseenter mouseleave 事件沒有事件冒泡4

• 阻止事件流

  • e.stopPropagation() || e.returnValue = false [萬惡的IE]

var par = document.querySelector('.par')
    var son = document.querySelector('.son')
    var body = document.querySelector('body')
    var html = document.querySelector('html')
    par.onclick = function () {
        console.log(1)
    }

    html.addEventListener('click', function () {
        console.log('html捕獲')
    }, true)
    body.addEventListener('click', function () {
        console.log('body捕獲')
    }, true)
    par.addEventListener('click', function () {
        console.log('par捕獲')
    }, true)
    son.addEventListener('click', function () {
        console.log('son捕獲')
    }, true)
    html.onclick = function () {
        console.log('html冒泡')
    }
    body.onclick = function () {
        console.log('body冒泡')
    }
    par.onclick = function () {
        console.log('par冒泡')
    }
    son.onclick = function (e) {
        // 阻止事件流
        if (e.stopPropagation) {
            e.stopPropagation()
            e.preventDefault()
        } else {
            e.cancelBubble = true;
            e.returnValue = false
        }
        console.log('son冒泡')
}
    //html捕獲  body捕獲   par捕獲   son捕獲  son冒泡

事件委托

利用事件冒泡，對(duì)以下幾種情況進(jìn)行處理

1. 新添加進(jìn)來的元素，需要事件的時(shí)候
2. 做事件優(yōu)化的時(shí)候
3. 使用ajax的時(shí)候

<body>
    <button>按鈕</button>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</body>

var btn = document.querySelector('button')
btn.onclick = function () {
    var div = document.createElement('div')
    div.innerHTML = "new"
    document.body.appendChild(div)
}
// document.body.onclick = function () {
//  alert(1)
// }

// 目標(biāo)事件源： 真正觸發(fā)事件的元素
document.body.onclick = function (e) {
    var obj = e.target
    // console.log(obj)
    //判斷
    if (obj.tagName == 'DIV') {
        obj.style.background = "blue"
    }
    // if (obj.nodeName == "DIV") {
    //  obj.style.background = "blue"
    // }
}

事件

文檔節(jié)點(diǎn)

html文檔中，所有的構(gòu)成部分都是節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)和節(jié)點(diǎn)之間的關(guān)系構(gòu)成了整個(gè)html文檔樹模型

節(jié)點(diǎn)的操作

節(jié)點(diǎn)的創(chuàng)建

• obj.createElement()

節(jié)點(diǎn)的增加

• par.appendChild()
• sib.insertBefore(newEle, oldEle)

節(jié)點(diǎn)的刪除

• par.removeChild(son)

節(jié)點(diǎn)的復(fù)制

• obj.cloneNode(true) //true決定子元素是否被克隆

節(jié)點(diǎn)的替代

• par.replaceChild(newEle, oldEle)

獲取節(jié)點(diǎn)

獲取父元素

• son.parentNode //獲取父節(jié)點(diǎn)
• son.parentElement //獲取父節(jié)點(diǎn)

獲取父輩的子元素

• childNodes; //獲取所有的節(jié)點(diǎn)
• div.children； //獲取所有元素節(jié)點(diǎn)
• par.firstChild; //獲取第一個(gè)節(jié)點(diǎn)
• par.lastChild; //獲取最后一個(gè)節(jié)點(diǎn)
• par.firstElementChild; //獲取第一個(gè)元素節(jié)點(diǎn)
• par.lastElementChild; //獲取最后一個(gè)元素節(jié)點(diǎn)

獲取同輩的相近元素

• sib.previousSibling; //前一個(gè)節(jié)點(diǎn)
• sib.previousElementSibling; //前一個(gè)元素節(jié)點(diǎn)
• sib.nextSibling; //下一個(gè)節(jié)點(diǎn)
• sib.nextElementSibling; //下一個(gè)元素節(jié)點(diǎn)
• insertAfter(newobj,oldobj)

    function insertAfter(newobj,oldobj){
        var next=oldobj.nextSibling;
        if(next){
            oldobj.parentNode.insertBefore(newobj,next)
        }else{
            oldobj.parentNode.appendChild(newobj);
        }
    }

Ajax

html: 超文本標(biāo)記語言

xhtml: 過渡 版本

xml: 可擴(kuò)展標(biāo)記語言

<clothes>
  <color>red</color>
</clothes>

版本控制工具

svn：集中式管理工具

git：分布式管理工具

git clone

git pull (多人協(xié)作)

將修改提交到暫存區(qū)

git add/*

將暫存區(qū)的文件更新到本地的倉庫

git commit -m '更新說明'

將本地倉庫和網(wǎng)絡(luò)倉庫進(jìn)行合并同步

git push

語義化

img email url number 表單的屬性

viedio

canvas 用js作圖的技術(shù)，幫助我們快速渲染頁面，降低

websokit

拖拽

formdata

filereader

變量 let

塊級(jí)作用域

函數(shù)

賦值 結(jié)構(gòu)賦值

運(yùn)算符 擴(kuò)展運(yùn)算符

類

導(dǎo)入導(dǎo)出

獲取元素的方式

方法