pink老师JavaScript视频教程笔记

数据存储单位

• bit<byte<kb<GB<TB<…
• 位（bit）:1bit可以保存一个0或者1（最小存储单位）
• 字节（Byte）: 1B=8b
• 千字节(KB): 1 KB =1024B
• 兆字节（MB）：1MB = 1024KB
• 吉字节（GB）：1GB = 1024MB
• 太字节(TB): 1TB = 1024GB

浏览器执行JS简介

浏览器分为两部分：渲染引擎和JS 引擎

• 渲染引擎：用来解析HTML\CSS，俗称内核，比如chrome的blink
• JS 引擎：也称JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8
  浏览器本身并不会执行JS 代码，二十通过内置JavaScript引擎（解释器）来执行JS 代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

JS的组成

• JavaScript = ECMAScript（JavaScript语法）+ DOM（页面文档对象模型）+ BOM（浏览器对象模型）

布尔类型的逻辑运算

• 用布尔值参与逻辑运算 true && false == false
• 123 && 456 是值 或者是 表达式 参与逻辑运算
• 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
• 如果有空的或者否定的为假 其余是真的 0 ‘’ null undefined NaN

console.log(123 && 456)  //456
console.log(0 && 456) //0
console.log(0 && 1+2 && 456*7887) //0

for循环的执行过程

for(var i =0;i<=100;i++){
  console.log('223')
}

• 1.首先执行里面的计数器变量 var i =0，但是这句话在for里面只执行一次 index

• 2.去i<=100来判断是否满足条件 如果满足条件，就去执行循环体 不满足条件退出循环

• 3.最后去执行 i++ i++是单独写的代码 递增，第一轮结束

• 4.接着去执行i<=100 如果条件满足 就去执行循环体，不满足条件退出循环 第二轮

• 双重for循环

• 可以把里面的循环看作是外层循环的语句

• 外层循环一次，里面的循环执行全部

while循环

• while当……的时候
• 当条件表达式结果为true则执行循环体 否则退出循环
• 里面也有计数器 初始化变量
• 里面也有操作表达式，完成计数器的更新，防止死循环

do while循环

• do while先执行一次循环体，再判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环

变量

函数

作用域

JS引擎

对象

构造函数

• 构造函数的首字母要大写
• 构造函数不需要return就可以返回结果
• 调用构造函数使用new
• 调用函数就创建了一个对象{}
  

构造函数和对象

• 构造函数 泛指某一大类
• 对象特指某一个具体的事物
• 利用构造函数创建对象的过程也称为对象的实例化
  
• 遍历对象
• for infor(变量 in 对象){ }
  

内置对象

• Math数学对象，不是一个内置对象，不需要用new来调用，二十直接使用里面的属性和方法
  
• 自己封装的Math对象

    let Math = {
      PI: 3.1415926,
      max: function () {
        let max = arguments[0]
        for (let i = 0; i < arguments.length; i++) {
          if (arguments[i] > max) {
            max = arguments[i]
          }
        }
        return max
      },
      min: function () {
        let min = arguments[0]
        for (let i = 0; i < arguments.length; i++) {
          if (arguments[i] < min) {
            min = arguments[i]
          }
        }
        return min
      }
    }

    console.log(Math.PI);//3.1415926
    console.log(Math.max(1, 9, 6, 88));//88
    console.log(Math.min(1, 9, 6, 88));//1

Date()日期对象，是一个构造函数，需要使用new来调用

 console.log(new Date());//系统当前时间

• 时间戳
  

检测数组

• intanceof 运算符 用来检测是否为数组intanceof Array
• Array.isArray(参数)

添加、删除数组元素

• push()在数组的末尾添加数组元素 添加一个或者多个数组元素
  
• unshift()在数组的开头添加数组元素 添加一个或者多个数组元素
  
• pop()删除数组的最后一个元素
  
• shift()删除数组开头的第一个元素
  

数组排序

数组索引方法

• indexOf(数组元素)从前面开始查找
  
• lastIndexOf(数组元素)从后面开始查找

数组转换为字符串

• toString()
• join(分隔符)

数组对象

基本包装类型

字符串对象

• 根据字符串对象 返回位置
• str.indexOf('要查找的字符',[起始位置])
• 根据位置返回字符
• charAt(index)
• charCodeAt(index)
• str[index]H5新增
  

字符串操作方法

• replace('被替换的字符','替换为的字符')他只会替换第一个字符
  
• split('分隔符')字符转换为数组
  
  

简单数据类型和复杂数据类型

• 简单数据类型存放到栈里面，里面直接开辟一个空间存放的是值
• 复杂数据类型存放到堆里面，里面存放的是地址 十六进制表示，地址指向的是堆里面的值，实际的实例化对象存放在堆里面

Web APIs

API

• 给程序员提供的一个工具，以便能更轻松的实现想要完成的功能
• Web API主要是针对于浏览器提供的接口，主要针对浏览器做交互效果
• Web API一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）

DOM

• 文档对象模型，可拓展标记语言（HTML,XML）的标准编程接口
• DOM树
  

获取元素

• 根据ID获取元素getElementById(),不存在特定ID 的元素返回null，正常返回的是一个元素对象
• console.dir()打印我们返回的元素对象，更好的查询里面的属性和方法
• 根据标签名获取getElementsByTagName()返回的是 获取过来元素对象的集合，以伪数组的形式存储的
  • 想要依次打印里面的元素采取遍历的方式，得到的元素是动态的
  • 如果页面中没有这个元素返回一个空的伪数组
  • element.getElementsByTagName()父元素必须是单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己
• 根据类名获取getElementByClassName()
• documnet.querySelector()返回指定选择器的第一个元素对象，里面的选择器需要加符号
• documnet.querySelectorAll()返回的是指定选择器的所有元素对象集合
• 获取body元素document.body()
• 获取HTML元素document.documenElement()

事件基础

• 触发……机制
• 事件三要素 事件源、 时间类型 、事件处理程序
• 事件源事件被触发的对象
• 事件类型如何触发 什么事件
• 事件处理程序通过一个函数负值的方式
• 执行事件的步骤:
  + 获取事件源
  + 注册事件
  + 添加事件处理程序

常见的鼠标处理事件

操作元素

1.改变元素的内容

• element.innerText()不识别html标签，去除空格和换行
• element.innerHTML()识别html标签，保留空格和换行， W3C标准

2.常用元素的属性操作

• 修改元素属性元素.src、href、id、title……

3.表单元素的属性操作

• 表单元素.value\disabled\type\……

4.样式属性操作(属性用驼峰命名法)

• element.style行内样式操作
• element.className类名样式操作
• 元素.style.width\height\backgroundColor\fontSize
• JS修改style样式操作，产生的是行内样式，css权重比较高
• 循环精灵图案例：
  
  
  

排他思想

获取元素的属性值

1.获取元素的属性值

• element.属性 获取元素属性值
• element.getAttribute('属性')
• 区别
  • element.属性获取内置属性值（元素本身自带的属性）
  • element.getAttribute('属性')主要获得自定义的属性（标准）我们自定义的属性

2.设置元素属性值

• element.属性 = '值'
• element.setAttribute('属性','值')主要针对自定义属性
  • 可以修改原有的属性
    

3.移除属性

• 元素.removeAttribute()
  

4.H5新增的获取自定义属性的方法

节点操作

1.父子节点

• 父节点 node.parentNode，得到的是距离元素最近的父级节点（亲爸爸），如果找不到父节点就返回null
• 子节点 node.childNodes,所有的子节点包含文本、元素节点
• 子节点node.children获取所有的子元素节点（不包含文本节点）
• 第一个子节点node.firstChild获取第一个子节点，不管是文本节点还是元素节点
• 最后一个子节点node.lastChild获取最后一个子节点，不管是文本节点还是元素节点
• 第一个子元素节点node.firstElementChild获取第一个元素子节点，找不到返回null 有兼容性
• 最后一个子元素节点node.lastElementChild获取最后一个元素子节点，找不到返回null 有兼容性
• 常用方法：

2.兄弟节点

• node.nextSibling获取当前元素的下一个兄弟节点，找不到返回null，同样会包含所有的节点
• node.previousSibling获取当前元素的上一个兄弟节点，找不到返回null，同样会包含所有的节点
• node.nextElementSibling得到下一个兄弟元素节点（兼容性不好）
• node.previousElementSibling得到上一个兄弟元素节点（兼容性不好）

3.创建节点

• document.createElement()

4.添加节点

• node.appendChild(child)node父级 child是子级，后面追加元素，类似数组中的push方法
• node.insertBefore(child,指定元素)

5.删除节点

• node.removeChild(child)从DOM中删除一盒子节点，返回删除的节点

6.克隆节点

• node.cloneNode()返回调用该方法的节点的一个副本。
  • 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
  • 如果括号里面参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点

7.三种创建元素的区别

• document.write() 是直接将内容写入页面的内容流，但是文档流执行完毕，则他会导致页面全部重绘
• innerHTML()是将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
• document.createElement()创建多个元素效率稍低一点，但是结构清晰
• 不同浏览器下，innerHTML效率要比createElement高

注册事件

• addEventListener
  

删除事件

• removeEventListner

DOM事件流

• 1.捕获阶段

• 2.当前目标阶段

• 3.冒泡阶段
  

• 事件发生时会在元素节点之间按照特定的传播顺序，这个传播过程即DOM事件流

• JS代码中只能实行捕获或者是冒泡中的一个阶段

• onclick和attachEvent只能到冒泡阶段

• addEventListner(type,listner[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序

• 常见事件对象的属性和方法：
  

  • e.target返回的是触发事件的对象（元素） this返回的是绑定事件的对象（元素）
  • 区别：.e.target点击了哪个元素，就返回哪个元素 this 哪个元素绑定了这个点击事件，那么就返回谁

事件委托

• 不是每一个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每一个子节点
  

常用鼠标事件对象

BOM

1.BOM概述

• BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window
• BOM比DOM更大，它包含DOM
  

2. BOM的组成

• window对象是浏览器的顶级对象
  • 他是JS访问浏览器窗口的一个接口
  • 他是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法，在调用的时候可以省略window

3.BOM与DOM的区别

4.window常见事件

• onload页面加载事件。当文档内容完全加载完成后会触发该事件
• DOMContentLoaded窗口加载事件，仅当DOM加载完成，不包含样式表、图片、flash等
• resize调整窗口大小事件
• innerWidth窗口宽度

5.定时器

• setTimeout(调用函数,[延时时间])延时时间单位是毫秒，省略即立即执行，调用函数可以直接写，也可以写函数名。
• 停止定时器clearTimeout(定时器名称)
• setInterval(回调函数,[间隔毫秒数])
• setTimeout()延时时间到了，就去调用这个回调函数，只调用一次，就结束了这个定时器
• setInterval()每隔这个延时时间，就去调用这个回调函数，会调用很多次，冲股份调用这个函数
• 停止定时器clearInterval(定时器名称)

this指向

• 全局作用域或者普通函数中this指向全局兑现window（定时器里面的this也指向window）
• 方法调用中谁调用指向谁
• 构造函数中this指向构造函数的实例

JS执行机制

• JavaScript语言的一大特点就是单线程，同一时间只能做一件事
  

location对象

• URL
  
• location对象的属性：
  
• location对象的方法：
  

history对象

元素偏移量offset（定位）

• 可以动态获取到元素的位置（偏移）、大小等
• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小（宽度高度）
• 返回的数值都不带单位
  
• offset与style的区别：
  

元素可视区client系列

• client最大的区别就是不包含边框

元素滚动scroll系列

• 可以动态获取元素的大小，滚动的距离
• scrollTop返回被卷去的头部距离，不带单位
• window.pageYOffset页面被卷去的头部

offset、client、scroll的主要用法

动画

• 动画原理
  
  
  

sessionStorage、localStorage

jQuery

• jQuery对象不能使用原生的DOM对象，原生的DOM对象也不能使用jQuery对象
• 需要把jQuery对象转换为DOM对象才能调用原生JS的属性和方法
  
  
  
• 获取元素$()
• 隐式迭代
  
• jQuery的类名操作不会影响原有的类名
• jQuery效果
  

显示隐藏

• 一般不写参数

事件切换hover([over,out])鼠标经过和切换的效果

• 如果只写一个函数，那么鼠标经过和鼠标离开都会出发这个函数

动画队列及其 停止排队方法

• 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行
• 停止排队：stop()用于停止动画效果，stop()写到动画或者效果的前面，相当于停止结束上一次的动画

淡入淡出

• fadeTo()修改透明度

自定义动画

属性操作

• 设置或获取固有的属性
• element.prop("属性名")
• prop("属性名","属性值")修改属性
• attr("属性值")获取自定义属性值
• ”attr("属性","属性值")设置自定义属性
• :checked可以选中所有的选中按钮

内容文本值

• html()获取元素内容
• html("内容")设置元素内容
• text()获取元素文本内容
• text(”内容“)设置元素文本内容
• val()获取表单元素的值
• val("内容")设置表单元素的值

返回指定祖先元素

+parent("选择器")

保留指定位小数

• toFixed(数字)

元素操作

• each()遍历元素
  
  
• 创建元素
  
• 添加元素
  
  
  
• 删除元素
  

jQuery尺寸

jQuery事件

• 单个事件处理
  
• 事件处理on
（1）on可以实现事件委托，事件绑定在父元素身上，但是触发的对象是里面的子元素；（2）on可以给动态创建的元素绑定事件
• off()解绑事件
  

• trigger()自动触发事件
  
  
  

jQuery对象拷贝

jQuery多库共存

ES6

类class

• 类的继承
  
  
  
  
  

构造函数和原型

• 构造函数方法很好用但是浪费内存空间

构造函数原型prototype

对象原型__proto__

• 对象身上系统自己添加一个__proto__指向我们构造函数的原型对象
• 一般情况下，我们的公共属性定义到构造函数里面，公共的方法放到原型对象上
  
• 方法查找规则：首先看ldh对象身上是否有 sing方法，如果有就执行这个对象上的sing
• 如果没有sing这个方法，因为有__proto__的存在，就去构造函数原型对象prototype身上去找
  

JavaScript的成员查找机制

• 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性
• 如果没有就查找他的原型（也就是__proto__指向的prototype原型对象）
• 如果还没有就查找原型对象的（Object的原型对象）
• 以此类推一直找到Object为止（null）
• __proto__对象原型的意义在于为对象成员查找机子提供一个方向，或者说一条路线

constructor

原型链

call()

• call()可以调用函数 ，可以改变函数的this指向，改变this指向的参数写在第一个参数

ES6之前的继承

数组方法

forEach()

filter

some()

字符串方法

trim()去除字符串两侧空格

对象方法

Object.keys(obj)获取对象自身所有的属性，返回一个由属性名组成的数组

Object.definePropety(obj,prop,descriptor)定义新属性或修改原有的属性

函数的定义方式

• 函数也是对象
  
• 函数中的this指向
• 可以改变this的指向
  

改变函数内this的指向

• call()调用函数、改变this指向、实现继承
• apply()调用函数、改变this指向。参数必须是数组（伪数组），打印出来的是字符串
  
• bind()不会调用函数、改变this指向。返回原函数改变this之后产生的新函数
• 如果有的函数不需要立即调用，但是又想改变this指向就用bind()方法
  

   let btns = document.querySelectorAll('button')
    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        this.disabled = true
        setTimeout(function () {
          this.disabled = false
        }.bind(this), 3000)
      })
    }

call、apply、bind的总结

严格模式

• ‘use strict’开启严格模式
• 变量必须先声明再使用
• 不能随意删除已经声明好的变量
• 全局作用域中this指向undefined
• 如果构造函数不加new调用，this指向的是undefined，给他负值会报错
• 定时器里面的this还是指向window
• 事件、对象还是指向调用者
• 函数里面的参数不能重名
• 非代码块内不允许定义函数

高阶函数

闭包

• 闭包是一个函数
• 闭包之有权访问另一个函数作用域中变量的函数（一个作用域可以访问另一个函数内部的局部变量）
• 闭包的主要作用：延伸了变量的作用范围
  

递归

• 一个函数在内部可以调用其本身，这个函数就是递归函数
• （一个函数内部自己调用自己）
• 递归里面必须加退出条件

浅拷贝和深拷贝

浅拷贝

深拷贝

# 正则表达式

• new RegExp()创建正则表达式

• 使用字面量创建
  
  
  

• *零次或者多次

• +一次以上

• ?相当于1||0次

• 或使用|
  

• 替换replace只替换第一个
  

• 正则表达式修饰符