前端菜鸟的javascript总结

WEB API

一、DOM：Document Object Model

1.相关

• 1.文档：一个页面可以称为文档
• 2.节点：页面中的所有内容
  ​ 节点：1.标签–2.属性–3.文本–8.注释
• 3.元素：网页中的标签
• 4.文档元素（根元素）：文档的第一个元素
  ​ 属性：标签的属性

2.级别

​ DOM(0-3) 我们正处于DOM1阶段

3.API

1.方法

​ 1.查找

方法	注释	其他
docunment.getElementById()	获取单个元素
document.getElementsByTagName()	获取所有相同标签的元素
document.getElementsByClassName()	获取同个类型的元素	有兼容性问题
document.getElementsByName()	获取相同类的元素	有兼容性的问题
document.querySelector()	通过选择器来获取一个元素
document.querySelectorAll()	通过选择器来获取多个元素
子元素.parentElement=’’	通过子元素查找父元素
.children	子元素
.nextElementSibling	下一个兄弟元素
.previousElementSibling	上一个兄弟元素

​ 2.添加

方法	注释
docunment.write()	局限性，只能写到body中
innerHTML+=’’	动态添加多个元素，它是一个属性
1.document.createElement()	创建单个元素
2.1.父元素.appendChild(子元素)	在父元素后面添加子元素
2.2.父元素.insertBefore(子元素，位置)	在父元素前面添加子元素

​ 3.其他

方法	注释
父元素.removeChild(子元素)	删除元素
innerHTML=‘’	修改元素
1-1.cloneNode()	复制节点
1-2.cloneNode(true)	复制节点包括内容
2-父元素.appendChild(子元素	将复制的文档输出到网页

2.事件

​ 1.概念：浏览器或者页面中瞬间发生的行为
​ 2.三要素：
​ 1.事件源：触发（被）事件的元素
​ 2.事件类型：事件触发的方式
​ 3.事件处理程序：事件被触发后要执行的代码
​ 3.书写事件的位置
​ 行内式：""
​ 内嵌式：.function(){}
​ 外联式
​ 4.方式
​ 1.触发事件的方式
​ 1.on
​ 1.方式：赋值的方式
​ 2.语法：事件源.on+事件类型=function（参数e/even）{}
​ 2.addEventListener
​ 1.方式：调用函数绑定
​ 2.语法：事件源.addEventListener（‘事件类型’，function（）{}）
​ 3.优点：函数可以多次调用，不会覆盖
​ 4.缺点：低版本浏览器不支持
​ 3.attchEvent
​ 1.方式：调用函数绑定
​ 2.语法：事件源.attchEvent（‘on+事件类型’，function（）{}）
​ 3.优点：低版本浏览器可以多次调用
​ 4.缺点：不支持主流浏览器
​ 封装示例：

function myEvent(element,type,fn){
  if(element,addEventListener){
    element.addEventListener(type,fn)
  }else if(element.attachEvent){
    element.attachEvent('on'+type,fn);
  }
}
myEvent(document,'click',function(){
  alert('所有浏览器都可以兼容1')
})

​ 2.解绑事件
​ 1.事件源.on+事件类型=null
​ 2.事件源.removeEventListener(‘事件类型’,fn)
​ 示例：

var btn = document.querySelector('#btn')
function fn() {
  alert('这是一个警示框');
  btn.removeEventListener('click',fn);
}
btn.addEventListener('click',fn)

​ 3.事件源.detachEvent(‘on+事件类型’,fn)

3.事件类型

​ 1.点击
​ click:单击
​ dblclick:双击
​ 2.鼠标
​ mouseover:鼠标移入
​ mouseout:鼠标移出
​ mousedown:鼠标按下
​ mouseup:鼠标弹起
​ mousemove:鼠标移动
​ 3.表单
​ focus:获取焦点
​ blur:失去焦点
​ 4.键盘
​ keydown:键盘按下
​ keyup:键盘弹起

4.事件对象

​ 1.可视区坐标(配合固定定位使用)
​ clientX
​ clientY
​ 2.页面坐标(配合绝对定位使用)
​ pageX
​ pageY
​ 3.键盘坐标
​ keyCode
​ which
​ 5.事件目标
​ 1.将事件委派给父级元素
​ 2.在父级事件处理函数内部用e.target判断标签名称
​ 3.在判断语句内部写效果，当前点击的e.target
​ e.target.nodeName
​ e.target.className
​ 6.事件冒泡： 时间目标出发后，会有向上传播的过程，
​ 浏览器会依次询问父级有没有事件，如果有依次触发
​ 7.事件捕获：在addEventListener添加参数
​ 事件源.addEventListener(事件类型，事件处理程序，是否捕获传播)

5.相关

​ 1.this：始终指代当前对象，正在执行的事件源
​ 2.return false：阻止a标签的跳转执行
​ 3.innerText/textContent与innerHTML
​ 1.可以设置标签之间的纯文本内容
​ 2.区别

innerHTML的特点	innerText/innerContent的特点
可以用来获取设置标签间的内容	可以用来获取或设置标签间的纯内容
可以用来获取标签间的内容,如果标签间只有纯文本内容的话，则会直接获取;如果标签内部还有嵌套子标签的话,则会将嵌套子标签一并获取到	在获取标签间内容的时候，如果标签间只有纯文本内容则可以直接可以,如果标签内部有嵌套子标签的话,则会忽略掉子标签直接获取文本内容
可以用来设置标签间的内容,如果设置的内容是纯文本内容的话,则是直接设置;如果要设置的内容里面有嵌套子标签的话,则会将标签的样式渲染出来,不会进行转义	在设置标签间的内容的时候,如果是纯文本内容,则是直接设置,如果设置的内容里面有标签的话，则会将标签进行转义
没有兼容性的问题，各浏览器都支持	有兼容性的问题 innerText是 谷歌和IE浏览器支持 textContent:谷歌和火狐浏览器支持,比如IE8不支持

​ 3.封装：解决兼容性的问题
​ 示例：

  function getText(ele){
    if(ele.innerText){
      return ele.innerText;
    }else {
     return  ele.textContent
    }
  }
  function setText(ele,value){
    if(ele.innerText){
      ele.innerText = value;
    }else {
      ele.textContent = value
    }
  }

​ 4.自定义属性
​ 1.方法
​ .getAttribute()通过标签获取该属性
​ .setAttribute(属性名，属性值)通过标签设置属性值
​ .removeAttribute()删除属性
​ 2.对于自定义添加的属性
​ 不能通过点的方式直接获取
​ 可以通过JS数值之后获取

二、BOM:Brown Object Model

1.浏览器

1.阻止浏览器默认行为

​ 1.return false;——跳出函数
​ 2.e.preventDefault();——阻止默认行为，依赖于事件对象
​ 3.e.stopPropagation();——函数阻止事件冒泡，依赖于事件对象
​ 4.e.cancelBubble=true;——属性阻止事件冒泡，低版本浏览器可以实现

2.定时器

​ 1.单次定时器
​ 1.设置：setTimeout()
​ 2.清除clearTimeout()
​ 2.多次定时器
​ 1.语法
​ 1.设置：setInterval()
​ 2.清除clearInterval()
​ 2.动画
​ 1.缺陷：多次触发定时器
​ 1.动画越来越快
​ 2.动画闪动
​ 2.解决：只启动一个定时器
​ 1.把定时器添加到动画元素上
​ 2.在启动之前清除

3.浏览器自动触发

​ 1.window.function(){}
​ 2.window.getComputedStyle()
​ 1.获取元素的所有样式
​ 2.返回值是一个对象
​ 3.window.function(){}——浏览器滚动事件
​ 4.window.function(){}
​ 1.调整浏览器尺寸
​ 2.window.function(){
​ document.documentElement.width（获取浏览器宽度）
​ document.documentElement.height（获取浏览器高度）
​ }

2.对象

​ 1.location对象
​ 1.href属性
​ 1.获取浏览器地址栏
​ 2.修改浏览器地址会直接跳转
​ 2.assign/replace方法：跳转到新的页面
​ 3.reload方法：重新加载页面
​ 2.history历史对象
​ 1.back()后退
​ 2.forward()前进
​ 3.go()
​ 1.负值表示后退
​ 2.正值表示前进
​ 3.0表示刷新
​ 3.screen浏览器屏幕
​ 1.width屏幕宽度
​ 2.height屏幕高度
​ 4.navigator导航对象：nserAgent浏览器信息
​ 应用场景：移动端软件的下载，IOS和安卓的操作系统软件是不一样的
​ 可利用navigator.userAgent信息判断是什么操作系统

3.动画

​ 1.获取数值(返回数值：只读属性)
​ 1.offsetLeft：获取水平偏移值
​ 2.offsetTop：获取垂直偏移值
​ 3.offsetWidth：获取盒子宽度
​ 4.offsetHeight：获取盒子的高度
​ 5.offsetParent：获取定位的父级元素
​ 2.参数
​ 1.element
​ 2.object
​ 3.回调函数
​ 3.开关思想：立flag
​ 4.类型
​ 1.匀速动画
​ 2.变速动画
​ 1.步长可变
​ 2.减速动画公式：（目标值-当前值）/系数

JS高级

一、自定义对象

1.对象字面量

​ 公式：function fn () {}
​ 特点：不调用不会输出

2.对象构造函数

​ 公式：var obj = new Object ()
​ 工厂函数：function fn () {
​ var obj = new Object ();
​ return obj;
​ }

3.自定义构造函数

​ 定义：1.首字母大写
​ 2.通过this添加属性
​ 3.new构造函数()，创建对象
​ 示例：

function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.sayHi = function () {
  console.log(this)
}
var person = new Person('小白',18);
person.sayHi();

4.面向过程编程思维

​ 1.步骤
​ 2.分析效果有哪些
​ 3.分析效果需要做什么，一步步按顺序书写
​ 2.优点：简单好理解，速度快
​ 3.缺点：如果JS需要操作的元素较多的时候就比较难维护
​ 4.总结：小项目，需求比较简单的时候适合使用

5.面向对象编程思维

​ 1.步骤
​ 1.分析有哪些对象需要创建
​ 2.分析对象的属性
​ 3.分析对象的方法
​ 4.定义创建对象的构造函数
​ 5.调用构造函数实例对象，初始化属性
​ 6.调用方法，实现某个功能
​ 2.优点：后期有新属性、新功能，直接给创建对象的构造函数添加即可
​ 3.缺点：步骤会繁琐一些，性能比面向过程慢
​ 4.总结：大型项目、游戏项目，对象较多的时候适合

二、对象继承

1.组合继承

​ 1.属性继承
​ 1.借用构造函数
​ 1.call：
​ 1.语法：函数.call(对象,参数1,参数2,…)
​ 2.特征： 1.能改变this的指向
​ 2.能调用函数，后面可传入多个参数，用逗号隔开
​ 2.apply：
​ 1.语法：函数.apply(对象,[参数1,参数2,…])
​ 2.特征： 1.能改变this的指向
​ 2.也能调用函数，后面可以传入对象和数组
​ 3.bind：
​ 1.语法：函数.bind(对象,参数1,参数2,…)
​ 2.特征： 1.能改变this的指向
​ 2.复制一份，只是保存起来，但是没有调用
​ 3.使用的时候可以多次调用
​ 2.构造函数属性：函数.constructor
​ 2.方法继承
​ 原型对象

//继承原型函数的方法
函数.prototype=new 构造函数()；
//修正函数原型构造函数的属性指向问题
函数.prototype.construstor=函数；

2.原型链

​ 1.定义：浏览器控制台，展开的每个原型对象，就相当于是链条的每个节点
​ 2.查找步骤：
​ 先从自身身上找
​ 一直找原型对象
​ 没有，返回underfined

三、this

1.口诀

​ 1指向调用该函数的那个对象
​ 2.只有调用的时候才知道指向

2.常见的场景

​ 1.普通函数：指向window
​ 2.事件处理函数：指向事件源
​ 3.定时器调用函数：指向window
​ 4.对象字面量：指向调用的对象
​ 5.构造函数：构造函数的对象
​ 6.构造函数的原型添加方：构造函数的对象

四、函数

1.函数作用域

​ 1.定义：函数就是一个独立的作用域，函数内的变量和参数，都是局部变量
​ 2.优点：
​ 1.有独立的作用域，不容易出现冲突
​ 2.使用完毕，JS会自动检测并回收释放内存
​ 3.数据更安全
​ 3.缺点：
​ 数据需要在外部修改的时候不方便

2.函数类型

​ 1.沙箱函数
​ 1.价值：
​ 1.内部一个独立作用域，不会和外界冲突
​ 2.需要使用全局变量，可以赋值给window对象
​ 2.闭包函数
​ 1.价值：
​ 1.把重要的数据包装起来
​ 2.可修改局部变量的值
​ 2.特征：
​ 1.外函数嵌套里函数
​ 2.外层函数常见局部变量
​ 3.里层函数使用外层函数的变量
​ 4.里层函数能在最外层触发
​ 3.递归函数
​ 1.特点
​ 1.层层递进，逐次回归
​ 2.如果只有递进没有回归就是陷入死循环
​ 2.结构
​ 1.函数自己调用自己（递进）
​ 2.return跳出当前函数（回归）
​ 3.应用场景
​ 1.遍历文件目录树
​ 2.对象或者数组的深拷贝
​ 3.阶乘运算
​ 4.函数的构造函数
​ 示例：

var fn = new Function ('n','m','return 66');
console.dir(fn);
console.log(typeof fn);
fn();

五、正则表达式

1.功能：

​ 按照一定的规则匹配字符串

2.创建方式

​ 1./规则1|规则2…/——推荐使用
​ 2.new PegExp(‘规则’,‘匹配模式’)

3.匹配模式

​ g(global) 全局匹配
​ i(ignore) 忽略大小写

4.方法

​ 1.字符串替换：字符串.replace(规则，新的字符串)
​ 2.检验规则：规则.test(字符串)
​ 返回值：true or false
​ 3.提取数据：字符串.match(正则对象)
​ 返回结果是数组

5.语法

​ 1.字符类型
​ \d和\D 数字字符和非数字
​ \w和\W 匹配所有数字字母包括下划线
​ \s和\S 匹配所有空格
​ 2.字符个数(次数)
​ {n} n个
​ {n,m} n~m个
​ {n,} n~∞
​ 便捷写法：? {0,1}
​ * {0,}
​ + {1,}
​ 3.功能符号
​ () 编组
​ [] 集合
​ [^] 非集合
​ ^ 开始
​ $ 结束
​ | 或
​