合肥千峰前端培训---js知识点梳理（略）

javascript知识点回顾

一、前端JS

1.ES(ECMAScript)

1）语法：

• 变量

• 数据类型：
  基本数据类型：number,string,boolean,undefined,null
  复杂数据类型：object
  +NaN：not a number数据类型的一类值，表示非数字

• number数据方法：num.toFixed(n) 保留小数点后n位数；num.toString()进制转换

• 数据类型转换

• 运算符

• 输出：console.log()

• 条件分支

• 循环 :while, do while,for break 和 continue

• 伪数组：可以使用下标,length,但不可以使用数组方法

• 函数：
  ​ ES5：具名函数，匿名函数(lamda函数)
  ​ ES6：箭头函数

• 面向对象：

  • 类：
    ​ ES5：JSON, 构造函数
    ​ ES6：class
  • 继承：
    ES5：原型链，call和apply，组合继承
    ES6：extends(和super()搭配使用)

2）官方的类：

ps: 官方定义好的类，官方使用构造函数或JSON，或class定义好的类。ES5中没有类和对象的叫法。ES5的对象就是ES6中的类;ES5中的实例就是ES6中的对象

• ES5：
  ​ Array
  ​ String
  ​ Data
  ​ Math
  ​ RegExp
  ​ XMLHttpRequest
• ES6：
  ​ Promise
  ​ Set
  ​ Map

3）官方的内置对象：

​ this，argument，event

4）事件：

在bom和dom里使用，没有dom也可以使用

2.BOM

使用ES操作浏览器的对象模型； window对象：所有对象的根对象

• window对象的方法：
  弹出层：alert,prompt,confirm
  新窗口打开页面：window.open('http://www.baidu.com/')
  关闭当前页面：window.close()
  定时器：setInterval，setTimeout
• ​ window对象的属性：
  localStorage
sessionStorage
location对象（地址信息）
  navigator对象（浏览器的版本信息）
  history对象（浏览器的历史纪录）
  innerWidth,innerHeight（包含滚动条宽高的窗口大小）
  事件属性:onload，onresize，onScroll
• document对象：
  document.documentElement.clientWidth，document.documentElement.clientWidth（不包含滚动条宽高的窗口大小）
  document.documentElement.scorrllTop(浏览器滚动条滚动距离)
  document.write() 页面打印
• 全局变量：
  window.a

​

3.DOM

使用ES操作页面元素的对象模型

​ dom节点 元素，属性，文本，注释

​ （一）、dom元素的增删改查

1. 获取dom元素
   1）选择器获取
   2）根据dom树中的节点层次关系
2. 创建dom元素
3. 删除dom元素
4. 替换dom元素

​ （二）、dom元素属性的操作
​ oDiv.innerHTML
​ oDiv.innerText
​ oDiv.id
​ oDiv.className
oDiv.classList.add("active");
​ oDiv.style
​ (三)、获取dom元素信息

• 元素尺寸：
  oDiv.offsetWidth/oDiv.offsetHeight，oDiv.clientWidth/oDiv.clientHeight，oDiv.scrollWidth/oDiv.scrollHeight

​ 元素样式：

​ 行间样式 oDiv.style

​ 非行间样式

​ window.getComputedStyle(元素,false).要获取的属性名

​ oDiv.currentStyle.要获取的属性名

​ 元素位置：

​ oDiv.offsetLeft / oDiv.offsetTop 父元素不加定位的时候，默认盒模型的左/上到body间的距离；加过定位的时，盒模型左/上到最近有定位的父元素的边框间的距离（不包含边框）

​

​ oDiv.getBoundingClientRect().left / right / top / bottom 不管父元素有没有定位，计算从盒模型左/右/上/下到页面左/上间的距离

二、后端php

作用：和前端交互，和数据库交互

三、数据库

作用：保存数据