學(xué)習(xí)筆記

• 查詢文檔 https://developer.mozilla.org/zh-CN/
• 博客 http://www.cnblogs.com/pandawind/p/9829898.html
• js筆記 https://duyiedu.github.io/
  1腻扇、js是解釋性語言也是單線程债热，其實(shí)js引擎是單線程，同步(只做一件事)
  2幼苛、link和script標(biāo)簽是異步加載(同時進(jìn)行)
  3窒篱、js分為ECMAscript(基礎(chǔ)語法)、DOM(文檔對象模型)、BOM(瀏覽器)
  4墙杯、js執(zhí)行隊(duì)列配并，輪轉(zhuǎn)時間片：類似吃飯，吃一口這個高镐，再吃一口那個
  5溉旋、變量var a = 1；----> var a; a=1
  6嫉髓、if低滩、function、for后面不用加分號
  7岩喷、錯誤
• 低級錯誤（語法解析錯誤）
  js語法錯誤會引發(fā)后續(xù)代碼終止恕沫，但不會影響其他js代碼塊
• 邏輯錯誤（標(biāo)準(zhǔn)錯誤，情有可原）

8纱意、任何數(shù)據(jù)類型加字符串都是字符串婶溯，加number會將其隱式轉(zhuǎn)換成數(shù)字相加
9、var a = 1;var b = a-- + --a; ++在后先運(yùn)算在++偷霉，++在前先++在運(yùn)算

image.png

   var a = 0;
   console.log(a++);  // 0  ++在后運(yùn)行完在
   console.log(a); // 1

//-----------
var a = 2;
var b = a-- + --a + ++a ;
// a--   2   1
// --a   1-1 0
// ++a   0+1 1
console.log(b); //3
console.log(a);//1

10迄委、但凡運(yùn)算就要求出結(jié)果

var a = 1 > 2;  console.log(a)  false
var b = 1 && 2; console.log(b) 2

11、undefined类少、null菠发、NaN、""健田、0泽西、false,都為假
12、type undefined 為字符串 undefined
13残吩、2 > 1 && document.write('如果2大于1财忽，就打印出write')
14、for循環(huán)泣侮，控制循環(huán)圈數(shù)和i的變化

image.png

15即彪、編程就是找規(guī)律
16、break必須放在循環(huán)里面
17活尊、js即面向過程也面向?qū)ο?br> 18隶校、typeof 返回6個值

string、number蛹锰、boolean深胳、undefined、function宁仔、object

19稠屠、parsetInt(參數(shù)峦睡，以目標(biāo)進(jìn)制(2-36)為基地轉(zhuǎn)為10進(jìn)制)轉(zhuǎn)整形

parseInt(3,8) //把3當(dāng)做8進(jìn)制的數(shù)轉(zhuǎn)換為10進(jìn)制

20、想把誰轉(zhuǎn)換為字符串权埠，就 點(diǎn)toString()榨了，undefined和null不可以使用，tostring里面有個參數(shù)是以10進(jìn)制為基地轉(zhuǎn)換為目標(biāo)進(jìn)制

image.png

21攘蔽、類型轉(zhuǎn)換前龙屉，先進(jìn)行隱式類型轉(zhuǎn)換

var a = "123";-----a ++ -----Number(123) ----123  

22、當(dāng)+號兩側(cè)有一個是字符串的話满俗，就會轉(zhuǎn)換字符串
23转捕、隱式類型中undefined和null不能和其他值比較
24、未定義的變量放在typeof里面不會報錯唆垃，還會返回字符串的undefined五芝，除此之外都會報錯XX not is undefinde
25、函數(shù)的作用——避免重復(fù)定義辕万，相同功能放一起（高內(nèi)聚枢步、低耦合）

函數(shù)定義（函數(shù)里面也分為堆內(nèi)存和棧內(nèi)存）
1、函數(shù)聲明 function name(){}
2渐尿、命名函數(shù)表達(dá)式(忽略name1的名字) var name = function name1(){}充當(dāng)表達(dá)式之后醉途，就變成匿名的了 name.name = name1
3、匿名函數(shù)表達(dá)式(函數(shù)表達(dá)式) var demo = function() {} demo.name = demo
4砖茸、每個函數(shù)里面都有放參數(shù)的地方argument內(nèi)數(shù)組(實(shí)參列表)隘擎，它和形參有套隱射規(guī)則(只有參數(shù)相等的時候)，你變我也變凉夯，注意一點(diǎn)實(shí)參有幾個實(shí)參列表就有幾個货葬，不會和形參行程關(guān)聯(lián)
5、函數(shù)必須有個return才結(jié)束(終止函數(shù))恍涂，我們沒有寫的時候宝惰，系統(tǒng)會自己加return,所以有時打印的函數(shù)是undefined
6、函數(shù)調(diào)用等他執(zhí)行完返回結(jié)果再沧，才算完事

image.png

遞歸

1、找規(guī)律（return公式 n = n * (n-1) ,才會循環(huán)計(jì)算）
2尊残、找出口
階乘就是利用自身的功能炒瘸，求出結(jié)果，函數(shù)調(diào)用等他執(zhí)行完返回結(jié)果寝衫，才算完事

image.png

image.png

3顷扩、遞歸唯一一點(diǎn)讓代碼變得更加簡潔，但是遞歸的運(yùn)算很慢需要等最底層1的結(jié)果出來慰毅，慢慢往上返隘截，最后才能算出5的階乘
4、斐波那列數(shù)列的公式就是n-1 + n-2 的和

image.png

image.png

image.png

閉包婶芭、作用域

預(yù)編譯

1东臀、預(yù)編譯之前語法分析、預(yù)編譯犀农、解釋執(zhí)行
2惰赋、函數(shù)聲明整體提升，變量 聲明提升
3呵哨、預(yù)編譯過程（發(fā)生在函數(shù)執(zhí)行的前一刻）

• 創(chuàng)建AO對象

• 找形參和變量聲明赁濒，將變量和形參作為AO屬性名，值為undefinde

  
  
  image.png

• 將實(shí)參值和形參統(tǒng)一

  
  
  image.png

• 在函數(shù)體里面找函數(shù)聲明孟害，值賦予函數(shù)體拒炎，如有遇到相同屬相名，忽略不計(jì)挨务，將函數(shù)體賦值即可

  
  
  image.png
  
  

  4枝冀、預(yù)編譯結(jié)束后，函數(shù)開始執(zhí)行耘子，在預(yù)編譯過程中果漾，函數(shù)聲明已被提前，所以不用再看绒障，變量也忽略
  5、任何全局變量就是window上的屬性糙臼，未經(jīng)聲明的變量也歸window所有
  6庐镐、函數(shù)在預(yù)編譯時，不管(走)if变逃，if里面有啥都會拿出來

  
  
  image.png
  
  7必逆、if里面不能聲明function

作用域

image.png

image.png

1、作用域?qū)儆诤瘮?shù)揽乱，每個函數(shù)產(chǎn)生獨(dú)有的作用域
2名眉、函數(shù)每執(zhí)行一次，便產(chǎn)生一個AO凰棉，執(zhí)行完函數(shù)銷毀损拢，進(jìn)入等待隊(duì)列
3、a被定義時撒犀，產(chǎn)生一個GO

image.png

image.png

4福压、a執(zhí)行時掏秩，產(chǎn)生自己的aAO,將它放在作用域的最頂端

image.png

image.png

image.png

image.png

7、a的執(zhí)行產(chǎn)生b的定義腐泻，相關(guān)數(shù)據(jù)在doing里决乎，a重新執(zhí)行時，將產(chǎn)生新的b定義派桩，

image.png

image.png

image.png

閉包

過多的占用系統(tǒng)資源叫做內(nèi)存泄露

image.png

1范嘱、閉包，但凡是內(nèi)部的函數(shù)被保存到外部员魏，一定生成閉包（a執(zhí)行產(chǎn)生b定義）

image.png

2丑蛤、b執(zhí)行完改變num，自身銷毀撕阎，但是b會在定義時的數(shù)據(jù)不會銷毀受裹，num是在b身上aAo里，再次執(zhí)行時虏束，還是建立aAo上

image.png

image.png

image.png

4照藻、閉包缺點(diǎn)，造成內(nèi)存泄露(泄露的多了汗侵，就剩的少了幸缕，和沙子一樣)

image.png

image.png

image.png

image.png

image.png

7-2滑蚯、命名空間浪蹂，防止變量污染
8抵栈、函數(shù)定義時不用管，執(zhí)行時才看如何操作的

image.png

image.png

image.png

立即執(zhí)行函數(shù)（函數(shù)執(zhí)行完立即銷毀估盘，在執(zhí)行隊(duì)列任務(wù)里也查不到它）

image.png

1躲庄、初始化函數(shù)哎垦，只執(zhí)行一次切心，返回其結(jié)果

image.png

2统屈、能被執(zhí)行的表達(dá)式驱证，函數(shù)名稱會被忽略躏仇，能被執(zhí)行符號執(zhí)行的表達(dá)式恋脚，就是立即執(zhí)行函數(shù)

var test = function(){
console.log('this is test')
}
console.log(test)  // undefined  執(zhí)行完后被銷毀
//這樣也是表達(dá)式，而且可以忽略函數(shù)的名字
+ function(){
console.log("a")
}()

image.png

3焰手、坑

// 這樣會報錯
function(){
console.log()
}()
// 有參數(shù)就不會報錯糟描，系統(tǒng)會默認(rèn)換行
function(a,b){
console.log(a+b)
}(1,2)

4、只有表達(dá)式才能被執(zhí)行书妻，一旦表達(dá)式執(zhí)行船响，便失去對原來函數(shù)的索引(一次性的)
5、立即執(zhí)行函數(shù)也有作用域
6躲履、利用閉包解決閉包

image.png

image.png

27见间、只要if里面不為那6個假值，都為真

image.png

28工猜、this是第一人稱我米诉，誰調(diào)方法用this，this就指向誰
29篷帅、增刪改查

delete obj.name  // 刪除

對象

1史侣、對象的創(chuàng)建方法

• 字面量 var obj = { }
• 構(gòu)造函數(shù)

1拴泌、系統(tǒng)自帶構(gòu)造函數(shù) var obj = new Object()；new Object()可以產(chǎn)生一個對象
2惊橱、自定義(工廠模式)蚪腐，命名方式為首字母大寫，加個new 就可以返回對象了

• 構(gòu)造函數(shù)內(nèi)部原理

1税朴、在函數(shù)體最前面隱式的加上this = {}
2回季、執(zhí)行this.xxx = xxx
3、隱式的返回this

image.png

4正林、模擬構(gòu)造函數(shù)

image.png

5泡一、有new 返回對象，不可以返回原始值

包裝類

1卓囚、原始值沒有屬性和方法
2瘾杭、構(gòu)造函數(shù)的原始值具有屬性和方法

// 這樣通過new的原始值具有屬性和方法，但是num經(jīng)過運(yùn)算后哪亿，又變成了最初的原始值
var num = new Number(123)   
var str = new String("abcd")

3粥烁、原始值是沒有屬性和方法的，之所以可以用 點(diǎn)length蝇棉，是因?yàn)橛邪b類（執(zhí)行的過程中讨阻，產(chǎn)生隱式的轉(zhuǎn)換就是包裝類）

var num = 123；
// 新建new Number(123).len 來彌補(bǔ)操作的不足
num.len = 3     // 這一步發(fā)生了隱式的轉(zhuǎn)化new Number(123).len = 3 執(zhí)行完這個后系統(tǒng)會delete（因?yàn)樵贾禌]有屬性）
console.log(num.len)  //會在此新建new Number(123).len,此時打印是undefined

4篡殷、number沒有l(wèi)ength钝吮，string調(diào)用length，要經(jīng)過包裝類的
5板辽、坑

image.png

原型

image.png

1奇瘦、原型描述的就是繼承關(guān)系

image.png

2、constructor返回他的構(gòu)造函數(shù)劲弦，構(gòu)造函數(shù)自身帶有constructor耳标，可以進(jìn)行手動更改，指向其他的構(gòu)造函數(shù)
3邑跪、__ proto__里面放的是原型prototype次坡，雖然是系統(tǒng)內(nèi)部屬性，但可以進(jìn)行更改画畅，和constructor一樣

• person不是構(gòu)造函數(shù)砸琅，所以沒有prototype,但他有__ proto__,指向Person.prototype

    Person.prototype = {
            thgf:11.2,
            bldc:13.2
        };
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        var person  = new Person();
        // person不是構(gòu)造函數(shù)，所以沒有prototype,但他有__ proto__,指向Person.prototype
        console.log(person1.__proto__)

4轴踱、剖析__ proto__症脂，在new 構(gòu)造函數(shù)時，系統(tǒng)自動創(chuàng)建一個this對象，每個對象都有proto指向構(gòu)造函數(shù)的原型prototype

image.png

5摊腋、 改變了person的原型

    Person.prototype = {
            thgf:11.2,
            bldc:13.2
        };
        function Person(name,age){
            this.name = name;
            this.age = age;
        }

        var obj = {
            one:'1'
        }
        var person  = new Person();
    // 改變了person的原型
        person.__proto__ = obj;
        console.log(person)

6沸版、原型賦值的坑嘁傀，點(diǎn)的寫法是在原有的基礎(chǔ)上更改或賦值兴蒸， = 的寫法相當(dāng)于開辟另一個空間

image.png

image.png

image.png

7、原型prototype也有隱式原型__proto __细办，原型上有原型形成的鏈就是原型鏈橙凳，原型鏈的連接點(diǎn)就是proto，原型鏈的最終原型是Object.prototype笑撞，它沒有proto岛啸，和作用域鏈一樣，自己有就使用自己的茴肥，自己沒有就向上一直找
8坚踩、this指向問題

    function Person(){
        // var this =  {
        //  __proto__: Person.prototype
        // }
        this.eat = function(){
            // this.height = this.height +1
            this.height ++
        }
    }
    Person.prototype.height = 100;
    var person = new Person();
    person.eat()
    console.log(person.__proto__) // 100  --->Person.prototype.height = 100
    console.log(person.height)  // 101 -->person調(diào)用了eat方法 this.height = 100 +1

9、字面量方法和new Object相等

image.png

10瓤狐、構(gòu)造函數(shù)的prototype指向Object.prototype瞬铸，絕大多數(shù)對象最終都會繼承Object.prototype，還有小部分是受Object.create影響,如果create(null)础锐，就是去了系統(tǒng)內(nèi)部屬性

image.png

        var obj = {name:"jialin",age:25}
        // 這里就改變了obj1的__proto__（原型）指向obj
        var obj1 = Object.create(obj);

          function Person(){
            
            }
        Person.prototype.name = "jialin"
        // 改變obj的proto
        var obj = Object.create(Person.prototype)
        console.log(obj)

12、undefined信姓、null鸵隧、Object.create(null)，三者沒有包裝類意推，沒有toString方法
13豆瘫、toString()

var obj = {}
obj.toString()   //  [Object Object]

14、同一名字不同功能的方法toString左痢，叫重寫

image.png

image.png

15靡羡、document.write就利用了toString方法

image.png

image.png

call俊性、apple改變this指向略步，傳參列表不同

image.png

1、讓Person里面所有的this都指向obj

  function Person(){
    this.name = "jialin";
    this.age = 20
  }
  var obj = {}
  // 讓Person里面的this指向obj
  Person.call(obj)
  console.log(obj.name)

2定页、借用Person的方法實(shí)現(xiàn)obj的功能

image.png

3趟薄、誰調(diào)用this指向誰

image.png

image.png

繼承

原型是實(shí)現(xiàn)繼承的一種方法

image.png

1典徊、公有原型杭煎，一個原型恩够，兩個構(gòu)造函數(shù)使用

image.png

image.png

3蜂桶、有自己的繼承，又不影響你也切，找一個中間層（圣杯模式）

image.png

image.png

image.png

image.png

image.png

7、閉包變量私有化倒槐，不會污染全局變量

image.png

對象枚舉

1旬痹、變量拼接屬性名
會轉(zhuǎn)換為obj['name']

image.png

image.png

2、hasOwnProerty 驗(yàn)證是否是自己的方法

image.png

image.png

• instanceof
• constructor

• toString()

  
  
  image.png
  
  
  image.png

this

image.png

1、預(yù)編譯函數(shù)聲明谎痢、變量提升

image.png

2磕昼、預(yù)編譯this指向window

image.png

image.png

image.png

5滨嘱、new的時候this發(fā)生改變

image.png

image.png

argument

1峰鄙、arguments.callee 指向當(dāng)前函數(shù)的引用，引用就是函數(shù)自己

image.png

2太雨、fun.caller 不是arguments的屬性吟榴，它是函數(shù)自己的屬性，demo在那個環(huán)境被調(diào)用的環(huán)境

image.png

深度克隆

image.png

image.png

image.png

• 封裝typeof

數(shù)組常用方法

1囊扳、數(shù)組所有的方法來自Array.prototype
2吩翻、長度為10的空數(shù)組，new Array(10)
3锥咸、改變原數(shù)組push狭瞎、pop、shift搏予、unshift熊锭、sort、reverse、splice

• push 給數(shù)組最后一位添加

  
  
  image.png

• unshift 給數(shù)組前一位添加

• splice(從第幾位開始碗殷，截取多少的長度精绎，在切口處添加新的數(shù)據(jù)隨便添加)，負(fù)數(shù)就是倒數(shù)锌妻，返回值就是截取的代乃，沒有返回值原數(shù)組發(fā)生改變

  
  
  image.png

• sort 排序，是按照asic碼算的从祝，想要實(shí)現(xiàn)我們自己的效果襟己，它內(nèi)部提供一個借口讓我們自己寫方法實(shí)現(xiàn)
  sort排序的原理是冒泡排序

// 記著，位置和位置比較牍陌，不是數(shù)和數(shù)比較
    var arr = [1,22,4,5,6,9,7,8,36,7]
        // 1.必須寫兩形參
        // 2.看返回值：當(dāng)返回值為負(fù)數(shù)時，那么前面的數(shù)放在前面
                   // 當(dāng)返回值為整數(shù)時员咽，后面的數(shù)在前
                   // 為0則不動

            // 步驟：1.第一次將 第一位和第二位傳進(jìn)來毒涧，進(jìn)行比較1,22；1,4贝室；1,5
    var b  = arr.sort(function(a,b){
                return a - b;
        })
    console.log(b)

記著契讲，位置和位置比較呕寝，不是數(shù)和數(shù)比較鹃共，位置和位置比較后，會將最小的數(shù)放在前面

image.png

a > b 可以理解為 a - b > 0

image.png

將有序數(shù)組打亂帅容，利用Math.random()隨機(jī)數(shù)峡迷，0—1開區(qū)間(不包括0和1)

image.png

image.png

image.png

按照字節(jié)長度來排

image.png

編程就是將想法抽象银伟，一步一步試錯，程序化思維

4彤避、不改變原數(shù)組concat、join———split夯辖、toString琉预、slice

• slice(從該位開始截取，截取到該位)

• join(參數(shù)是字符串蒿褂，將數(shù)組以參數(shù)分割返回字符串圆米，不傳是，)

  
  
  image.png

類數(shù)組

image.png

1啄栓、在對象上增加數(shù)組push方法娄帖，形成類似組，具有數(shù)組的形式谴供，類似數(shù)組

image.png

image.png

2块茁、是對象可以當(dāng)做數(shù)組使用

image.png

image.png

image.png

DOM操作全是類數(shù)組的形式

復(fù)習(xí)

1数焊、包裝類

// 原始值沒有屬性和方法永淌，之所以具有屬性的原因是經(jīng)過了包裝類new
var str = "abc";
console.log(str.length)   // 3
// 在這個過程中會new String("abc") 這個構(gòu)造函數(shù)上有 點(diǎn)length的屬性
// 這個隱式的過程就是包裝類，new String(str) 將str隱式的包裹起來

image.png

2佩耳、原型

• 任何一個函數(shù)都有prototype,這個prototype是這個函數(shù)構(gòu)造出對象的公有祖先遂蛀，祖先上的方法和屬性，由這個構(gòu)造函數(shù)構(gòu)造出的對象都可以使用

  
  
  image.png
  
  

  3干厚、Object.create(prototupe,特性)創(chuàng)建對象
  沒有l(wèi)astName李滴，就去它的父級上尋找

  
  
  image.png
  
  
  image.png
  
  4、this call

• call可以改變函數(shù)里this的指向

  
  
  image.png

• call里面寫值的話蛮瞄，就是函數(shù)運(yùn)行時this指向的環(huán)境

  
  
  image.png
  
  
  image.png
  
  
  image.png

• new的時候所坯，this指向是構(gòu)造函數(shù)原型

  
  
  image.png
  
  
  image.png
• 閉包的表現(xiàn)就是函數(shù)套函數(shù)，將被套的函數(shù)弄到外面執(zhí)行挂捅，必然形成閉包

• 通過構(gòu)造函數(shù)生產(chǎn)對象芹助，每次都new一下，執(zhí)行函數(shù)就不用new

  
  
  image.png
  
  

  5闲先、閉包生成的私有變量状土，不想讓別人進(jìn)行訪問

  
  
  image.png

• 空數(shù)組不等于空數(shù)組，每個引用值都有獨(dú)立的地址伺糠，雖然長的一樣蒙谓，但是地址不同

  
  
  image.png
  
  

  6、深度克隆

• 淺層克隆是將obj遍歷一遍训桶，將其屬性放到obj1上累驮，obj的引用值改變obj1也會改變(因?yàn)槭峭坏刂坊蛘咭?，這不是想要的渊迁，由此得深度克隆

  
  
  image.png

1慰照、深度克隆主要處理引用值，首先分析是不是引用值
2琉朽、如果是對象毒租，就新建一個，再去處理原有對象里面是什么值箱叁，原始值直接使用(相當(dāng)于備份)墅垮，引用值在進(jìn)行判斷，因?yàn)椴僮饕粯泳托纬闪诉f歸

image.png

3耕漱、這樣之間的對象是相互獨(dú)立的

image.png

7算色、系統(tǒng)規(guī)定的undefined和null不能進(jìn)行隱式類型轉(zhuǎn)換，不能和數(shù)字比較螟够，但他兩都是false
8灾梦、預(yù)編譯 峡钓，發(fā)生在函數(shù)執(zhí)行前

1、生成Ao
2若河、找函數(shù)里面的形參(相當(dāng)于變量聲明能岩，和變量重名時，取一個即可萧福，對象里面不可能有相同屬性名)和變量聲明拉鹃，把他們當(dāng)做AO的屬性名并賦值undefined
3、實(shí)參形參相統(tǒng)一鲫忍，將實(shí)參值賦給形參
4膏燕、找函數(shù)聲明，將函數(shù)聲明的名字悟民，作為AO對象的屬性名坝辫，如果有相同的直接進(jìn)行覆蓋，值為函數(shù)體
5逾雄、函數(shù)執(zhí)行所訪問的變量阀溶、修改都是用AO對象里的值
6、接著開始看參數(shù)都具有什么值鸦泳，遇到var 聲明和函數(shù)聲明直接跳過，他們在預(yù)編譯時已執(zhí)行

9永品、凡是var 變量做鹰，都刪除不了

image.png

10、最經(jīng)典的繼承就是圣杯模式

11鼎姐、優(yōu)化代碼

image.png

類和構(gòu)造函數(shù)相似

try catch 捕獲異常

1钾麸、在try里面發(fā)生的錯誤，不會執(zhí)行錯誤后的try里面的代碼

image.png

image.png

2炕桨、錯誤類型

image.png

嚴(yán)格模式

• "use strict"

  
  
  image.png

• while 可以改變作用域鏈饭尝，使程序執(zhí)行效率降低，在es5中不支持

  
  
  image.png
• 嚴(yán)格模式下的局部this直接打印為undefined献宫，也就是預(yù)編譯的過程中this不指向window

• eval('這里面能將字符傳當(dāng)做代碼執(zhí)行')可以改變作用域

  
  
  image.png

DOM

image.png

1钥平、DOM不能直接操作css，可以同過間接樣式姊途，行內(nèi)樣式
2涉瘾、反轉(zhuǎn)

image.png

3、選項(xiàng)卡

image.png

image.png

image.png

6、滑動變色

image.png

DOM基本操作（一系列方法的集合）

1贡茅、方法操作

image.png

image.png

• getElementsByTagName 選擇標(biāo)簽名秘蛇，是個類數(shù)組其做，既能當(dāng)對象使用，又能到數(shù)組使用
• getElementsByClassName 選擇class名赁还，兼容性不好妖泄，ie9以下不支持
• querySelectAll 唯一缺點(diǎn)選擇的元素不是實(shí)時的，動態(tài)添加的數(shù)據(jù)獲取不了

2秽浇、節(jié)點(diǎn)操作
節(jié)點(diǎn)操作沒有節(jié)操浮庐，什么都可操作，無兼容問題柬焕，元素節(jié)點(diǎn)會有兼容問題

image.png

3审残、節(jié)點(diǎn)屬性

image.png

4、節(jié)點(diǎn)類型nodeType

image.png

讓他更像數(shù)組斑举，加個splice

image.png

DOM結(jié)構(gòu)樹

image.png

image.png

1搅轿、document的構(gòu)造函數(shù)HTMLDocument

image.png

image.png

2、封裝函數(shù)富玷，返回元素e的第n層祖先元素節(jié)點(diǎn)

image.png

3璧坟、封裝chileren方法

image.png

• 為正一種循環(huán)赎懦，為負(fù)一種循環(huán)

• 還有一種先循環(huán)雀鹃，在判斷

  
  
  image.png

image.png

• 思維開拓

  
  
  image.png

DOM增刪改查

image.png

1、document.createElement

image.png

2励两、給每個標(biāo)簽設(shè)置屬性

image.png

image.png

image.png

日期對象

1、求程序運(yùn)行的時間 getTime時間戳

image.png

2当悔、倒計(jì)時可以使用setTime

image.png

• 高性能js
• 你不知道的js

• DOM操作藝術(shù)
  4、setInterval 會返回數(shù)字唯一標(biāo)識盲憎，clear清除的就是所記錄的數(shù)字
  5嗅骄、清除

  
  
  image.png

操作滾動條

image.png

1、橫向滾動條距離

image.png

• ie9以下 document.body.scorllLeft/document.documentElement.scorllLeft 這兩個比較混亂饼疙，處理時用+

• ie9以上 window.pageXOffset
  2溺森、封裝的方法

  
  
  image.png

3、滾動條滾了400像素宏多，求瀏覽器頂端到滾動條滾動的位置400px+首屏像素儿惫，滾動條滾動的距離就是多摞出來的 或者是 滾動條滾動了400px，此時屏幕的底端距離網(wǎng)頁的最頂端的距離 就是400px+首屏

可視區(qū)域

image.png

• 怪異模式向后兼容伸但，一旦啟動(去掉!document html)就不是最新的語法

  
  
  image.png
  
  

  1肾请、方法的封裝

  
  
  image.png

查看幾何尺寸

image.png

優(yōu)先（距離有定位的父級）

image.png

1、求文檔相對相對于定位的坐標(biāo)

滾動條滾動

image.png

• scrollBy 累加滾動距離
• 自動閱讀器

這樣寫有個bug 就是多次點(diǎn)擊start時更胖，會不斷觸發(fā)點(diǎn)擊事件

image.png

• 解決方案

加個開關(guān)解決

image.png

腳本化css

image.png

image.png

這里的null獲取的是偽元素的值

image.png

image.png

封裝方法getStyle()

image.png

image.png

事件(交互體驗(yàn)的核心功能)

1铛铁、事件處理函數(shù)

image.png

image.png

2隔显、運(yùn)行環(huán)境

image.png

image.png

image.png

3、解除事件處理函數(shù)

image.png

image.png

image.png

image.png

image.png

image.png

image.png

7倍权、事件委托

image.png

image.png

image.png

• mousedown + mouseup =click
  區(qū)分click 和 mousedown

  
  
  image.png
  
  

  10薄声、鍵盤事件

  
  
  image.png
  
  
  image.png
• keydown 可以監(jiān)聽到所有鍵盤事件当船，監(jiān)聽字符按鍵不準(zhǔn)，操作類按鍵

• keypress 只能監(jiān)聽到字符（就是aisc碼里面對應(yīng)的）按鍵

  
  
  image.png
  
  

  11默辨、文本類

  
  
  image.png

• input事件相當(dāng)于v-model

  
  
  image.png
  
  

  12德频、窗口

  
  
  image.png
• domTree(先解析img標(biāo)簽，之后異步下載圖片) + cssTree = renderTree缩幸，先看完domTree壹置，在看cssTree，深度（縱向表谊，看一條枝干）優(yōu)先
• domTree數(shù)的完成代表著解析完成钞护，比不是加載完成

• domTree一旦改變，renderTree需要重新構(gòu)建（效率比較低）

  
  
  image.png

• 重繪影響比較小爆办，改變的是css

  
  
  image.png

• 等到所有圖片患亿、資源下載完成onload才執(zhí)行

拖拽

1、left不給值的話是auto押逼，默認(rèn)給個0
2、e.pageX和e.pageY是鼠標(biāo)位置
3惦界、鼠標(biāo)按下在執(zhí)行鼠標(biāo)移動事件

image.png

4挑格、鼠標(biāo)抬起取消事件

image.png

image.png

image.png

image.png

image.png

json 是對象

image.png

1挫望、轉(zhuǎn)換

image.png

2、字符串json

image.png

異步加載

image.png

image.png

• 發(fā)生在頁面解析完時

  
  
  image.png

• 加載完執(zhí)行

  
  
  image.png

• 創(chuàng)建script

  
  
  image.png
  
  
  image.png

• 狀態(tài)碼已經(jīng)完成

  
  
  image.png
  
  
  image.png

• 回調(diào)函數(shù)執(zhí)行后才執(zhí)行test

  
  
  image.png
  
  
  image.png

時間線

• document.write() 具有消除文檔流的操作

  
  
  image.png
  
  

  1狂窑、創(chuàng)建docuement對象(1)
  2媳板、文檔解析完成(2,3,4,5)
  3、文檔解析完并且加載完畢(6-10)

• 觸發(fā)三個狀態(tài)

  
  
  image.png
  
  
  image.png

正則表達(dá)式

1泉哈、\轉(zhuǎn)義成文本
2蛉幸、\n回車
3破讨、\t table

image.png

4、正則處理字符串

image.png

image.png

8花嘶、[]方括號是表達(dá)式涨岁，代表一位(或者是一個范圍)餐塘，一個表示式就是一位桅锄，里面是區(qū)間乐疆，比如cd洋只，就是c到d辆沦，^放在中括號里面代表非，其他地方代表以什么什么開頭
9识虚、解析

• 第一位不是a的匹配2位
• 第二位不是b的匹配2位

image.png

10肢扯、元字符

• w

  
  
  image.png

• d

  
  
  image.png

• s

  
  
  image.png
  
  
  image.png
  
  
  image.png

• b

  
  
  image.png

• t

  
  
  image.png

• 量詞 n*量詞

  
  
  image.png

• 貪婪原則（能匹配多就不匹配少）

  
  
  image.png

• 光標(biāo)也可以匹配

  
  
  image.png

• 區(qū)間匹配

  
  
  image.png
  
  
  image.png

• 實(shí)際結(jié)果必須是abc才行

  
  
  image.png

• 寫一個正則，首尾是否含有數(shù)字

  
  
  image.png
  
  
  image.png

• reg.exec()

  
  
  image.png

• lastindex就是游標(biāo)

• (會記錄括號里面的內(nèi)容)子表達(dá)式担锤，\1反向引用蔚晨，引用第一個子表達(dá)式里面的內(nèi)容

  
  
  image.png
  
  

  匹配第一個子表達(dá)式里面匹配的內(nèi)容，

  
  
  image.png

• \2反向引用第二個子表達(dá)式

  
  
  image.png

• 支持正則的string方法

  
  
  image.png

search 但凡不返回的-1都是匹配成功肛循，返回匹配到的位置
split 里面可以寫正則铭腕，以什么什么分割
replace(老參數(shù)，新參數(shù)) 多糠，沒有匹配全局的能力累舷，replace(正則，“新參數(shù)”)

image.png

可以放方法夹孔，第一個參數(shù)值正則匹配的結(jié)果被盈，第二個是第一個子表達(dá)式內(nèi)容，第三個是第二個子表達(dá)式內(nèi)容

image.png

字符串大小寫轉(zhuǎn)換toUpperCase()搭伤、toLowerCase()

image.png

• 正向預(yù)查或者正向斷言

  
  
  image.png

• 非貪婪匹配 能有1個絕不多個只怎，在后面加？

  
  
  image.png

• 字符串去重

  
  
  image.png

• 給數(shù)字加怜俐。
  從后往前查身堡，查3的位數(shù)個替換的是空，還不能是單詞邊界

  
  
  image.png