前两周学习路线：
围绕JS组成部分：ES、BOM、DOM
ES：声明JS基本语法（变量、判断、循环、函数、数组、对象、内置对象方法）
BOM：使js有能力操作浏览器
DOM：使js有能力操作网页
名词复习：
什么是变量：用来临时网页数据
判断学了哪些：if、switch、?：
什么是循环：重复指定一段代码的表现
什么是函数：将一段公共的代码进行封装，一次定义 多次调用
什么是数组：一堆有序数据的集合
数据类型分类：
基本类型：数值型number、字符串型string、布尔型boolean、null、undefined
数值型（整数和小数）
后端：没有数值型 整型和浮点型
复杂类型：function、array、object
Day01
1.对象：对象一堆无序数据的集合
① 创建对象
语法：// 字面量创建（简单语法 推荐）
var 变量名obj = { 值1 , …, 值n} // 值势必按照下述格式
键:值, …, 键n:值n //注：键引号可加可不加，推荐统一不加
// 内置构造函数语法
var 变量名obj = new Object（） // 空对象
var 变量名obj = new Object（{ 值1 , …, 值n}）
② 操作对象
获取：对象.键
增加：对象.键 = 值 （键不存在就是新增）
修改：对象.键 = 值 （键存在就是修改）
删除：delete 对象.键
注意：当键是变量名时就不能用点了. 而是 对象[变量名]
2.数组: 数组一堆有序数据的集合
①创建数据
// 字面量创建 （顾名思义看到[]代表数组 或者 简单的语法 推荐）
var 变量名arr = [值1, …, 值n]
// 内置构造函数创建空数组（脚下留心：Array首字母必须写）
var 变量名arr = new Array()
var 变量名arr = new Array(值1,…,值n)
②操作数组
获取：变量名arr[编号/下标/索引]
修改：变量名arr[编号/下标/索引] = 值 // 索引必须已存在
新增：变量名arr[编号/下标/索引] = 值 // 索引必须不存在
删除：需要接续内置方法 splice
数组长度：语法：变量名arr.length 强调：数组的最大下标/索引 变量名arr.length - 1
③ 数组索引
数组中每个值都有一个唯一的编号
-
编号从0开始
-
依次递增
-
语法：变量名arr[索引] 获取数据
3，数组和对象的区别
明确：数组和对象都是用来存放多个数据
区别：主要区别就是语法
1.声明数组用 [] 中括号， 声明对象用 {} 大括号
2.声明数组 里面 直接写 值，声明对象里面也是直接写值，但是只必须是键:值格式
3.调用数组 变量名arr[下标]， 调用对象 变量名obj.键
脚下留心：调用对象，如果键是变量的话，得用其他语法 变量名obj[键]
脚下留心：调用对象的方法切记 变量名obj.键()
4，二维数组
语法：
var 变量名arr = [
值,
[值1,…,值n],
[值1,…,值n],
…
]
操作
获取：变量名arr[下标][下标]
修改：变量名arr[下标]…[下标] = 值
5.传值方式
内存：栈 堆
栈：基本类型数据
堆：复杂/复合类型数据
基本类型：传值 修改其中一个变量数据，另一个变量【不】受影响
复杂类型：传地址 修改其中一个变量数据，另一个变量受影响
6.数组对象：
属性
长度 .length
方法/函数 -
常用
划分成字符 join
前入 unshift 后入 push
前弹 shift 后弹 pop -
学习
删除 splice
翻转 reverse -
其他
找数组内容 indexOf
合并 concat
7.for 和 for in 循环
语法：
for (key in 对象/数组) {
// 会将对象中的键 挨个赋值给key这个变量 没有更多key就会退出循环
}
Day02
1,数组对象
①forEach 语法：
变量名arr.forEach(有一个实参) 实参是函数列席
↓
变量名arr.forEach(function(item, index, arr){ //三个 官方传递的 你直接用就可以
item 就是数组的值
index 就是数组的下标
arr 数组本身
})
②map语法：
var newArr = 变量名arr.map(function(item, index, arr){ //规则同上
// 数组里面有个3个值
// map遍历3次
// 数组里面有5个值
// map遍历5次注：每次return的值会后压入到newArr新数组中
return 值
})
注：语法和forEach一样 唯一的区别就是map有返回值 是一个新数组
作用：修改数组数据，得到一个新数组（注：新数组长度和原来数组一样）
③ filter语法：
var newArr = arr.filter(function(item, index, arr){
return 条件 成立就把当前值后入到新数组中，不成立跳过下一个
})
2，字符串对象
截取substr（起始位置，长度）含前
substring(起始位置，结束为止) 含前不含后
划分为数组：split
替换字符串：replace(旧数据，新数据)
找字符串内容：
str.indexOf（内容） 找到返回下标，找不到返回-1
str.lastIndexOf（内容） 找到返回下标，找不到返回-1
Day03
3.数学对象
Math
常用（Math.）
ceil()、floor()、
向上取整 向下取整
round()、pow(x，y)、sqrt()、random() ***
四舍五入 x的y次幂 求平方根 随机数（0~1 最小0.01 最大0.99）
了解
PI
圆周率
max()、min()、abs()、
求最大 求最小 绝对值
数字转换进制（周边）
内容.toString（你要转换的进制）
parseInt（内容，当作几进制来转换）
随机数公式：Math.floor(Math.random() * (max-min+1)+min)
4,时间对象：
Date
语法：var time = new Date() // 当前=
var time = new Date(2019, 11, 05, 22, 33, 55) // 指定（注：00是12月）=
var time = new Date(‘2019-12-05 22:33:55’) // 指定
getFullYear()、
getMonth()、 // 0-11 0代表1月
getDate()、
getHours()、
getMinutes()、
getSeconds()、
getDay()、 // 星期几 0-6 0星期天
getTime() 返回1970年1月1号至今毫秒数
Day04
1， BOM浏览器对象模型
是什么： BOM是英文Browser Object Model的首字母缩写（浏览器对象模型 -> 规范）
能干嘛： 使javascript有和浏览器对话的能力，如：获取浏览器信息，操作浏览器
分类：
■ window（浏览器窗口对象，js中最大的对象）
● location*（地址栏对象 - 提供了对地址栏操作的方法和属性）
● history*（浏览历史对象，提供了对浏览器历史记录操作的方法和属性）
● screen（屏幕对象，获取屏幕的信息）
● navigator（浏览器对象，提供了获取浏览器信息的方法和属性）
● document*（文档对象， - 代表整个网页，DOM的根节点）
①■window对象*
语法：属性
innerWidth
document.documentElement.clientWidth ie兼容
innerHeight
document.documentElement.clientHeight ie兼容
方法
alert()、prompt()、confirm()、open(待打开的网页,窗口名,打开窗口的外观)、close()、print()
i 倒计时定时器setTimeout
作用：打开网页等待指定时间后指定js代码（仅仅执行一次）
语法：var 标识 = setTimeout（代码，毫秒）
说明：
毫秒1s = 1000ms
代码 直接写函数
代码 “函数名()” 脚下留心：引号必须写 不写则直接出发，写了之后底层在指定时间后出发
每一个定时器都会返回一个唯一的标识，用于后期清除
作用：清除倒计时定时器
语法：clearTimeout(标识)
ii 间隔定时器setInterval
作用：指定时间不断重复执行js代码（一直执行）
语法：var 标识 = setInterval（代码，毫秒）
说明：
毫秒1s = 1000ms
代码 直接写函数
代码 “函数名()” 脚下留心：引号必须写 不写则直接出发，写了之后底层在指定时间后出发
每一个定时器都会返回一个唯一的标识，用于后期清除
作用：清除倒计时定时器
语法：clearInterval(标识)
iii 两种定时器区别
倒计时定时器：只执行一次（setTimeout clearTimeout）
间隔定时器：重复执行
② navigator对象 ： 是专门用来获取浏览器信息的
语法：
内部代码
appName 浏览器名称
appVersion 返回浏览器的平台和版本信息。
platform 浏览器的操作系统平台。
userAgent 用户代理信息（UA 作用：获取用户什么浏览器） *
cookieEnabled 是否支持cookie
③ location对象： 就是来存储浏览器的地址栏内的信息的
属性和方法 描述
href* 1-获取地址栏网址2-修改地址栏网址（跳转网页），注：给href属性赋值相当于跳转指定网址
reload() 刷新当前网页 location.href = location.href 或 location.reload()
④ history对象 ：是专门用来存储历史记录信息的
属性和方法 描述
length 获取历史记录个数
go(参数)* 跳转指定的历史记录页参数：1 前几一个、-1 后退一个、2 前进2个、 -2 后退2个
forward() 打开下一个网页（前进 ->）
back() *** 打开上一个网页（后退 <-）
⑤ DOM文档对象模型
i HTML DOM
语法：
方法1：a.先给标签增加ID属性，b.然后直接id属性值获取标签对象（不推荐，代码多了可读性不强）
方法2：使用JS官方提供的语法
var 变量名 = document.getElementById(‘ID属性值’) // *
var 变量名 = document.getElementsByClassName(‘class属性值’)
var 变量名 = document.getElementsByTagName(‘标签名’)
var 变量名 = document.querySelector(‘选择器’) // 仅一个标签对象*
var 变量名 = document.querySelectorAll(‘选择器’) // 多个*
注意：
内容
上述代码：在HTML中，叫：标签/标记
在JS中， 叫：标签/标记对象（默认标签有哪些属性，这个对象就可以用哪些属性。）
在DOM中， 叫：节点/元素
常用的属性和方法：
标签对象.innerHTML 获取指定节点的内容（包括html标签）
标签对象.innertText 获取指定节点的内容（只获取文本内容）
标签对象.getAttribute(属性名) 获取指定的属性
标签对象.setAttribute(属性名,属性值) 设置属性
标签对象.removeAttribute(属性名) 移除属性
Day05
1， 事件 DOM
i 事件种类
鼠标
单击 click
双击 dblclick
移入 mouseover
移出 mouseout
按下 mousedown
松开 mouseup
右击 contextmenu
等
键盘
按下 keydown
松开 keyup
表单
表单提交 submit
表单重置 reset
失去焦点 blur
获取焦点 focus
下拉改变 change
等
页面
页面加载完毕执行 load （思考：js代码写在head好还是body结束前面好？ body结束前面）
网页尺寸改变 resize （window.innerWidth || document.documentElement.clientWidth）
网页滚动条 scroll （发现页面快到底部了 显示返回顶部标签）
2，this
普通函数中的this window对象
对象方法中的this 就是对象本身
事件中的this 事件源（标签对象）
3 ，核心DOM （1 获取页面标签对象）
i DOM的分层结构 / 树形结构 / 节点树
节点操作（语法）
1）取子节点
节点.firstChild 获取第一个子节点
节点.lastChild 获取最后一个子节点
节点.children 获取所有子节点（不计算空白节点）
节点.childNodes 获取所有子节点（计算空白节点）
2）获取兄弟节点
节点.nextSibling 获取下一个兄弟节点
节点.previousSibling 获取上一个兄弟节点
3）获取父节点
节点.parentNode 获取父节点
4）获取文本节点的值
节点.nodeName 获取节点名称（获取当前是p节点，还是b节点等等）
节点.nodeValue 获取节点值（限文本节点）
获取表单内容统一同 对象.value
5）节点属性
-
nodeType nodeName nodeValue
元素节点 1 大写标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本内容
ii 核心DOM（2 增删改节点）
节点创建
节点创建：document.createElement(节点名称)；
创建文本节点：document.createTextNode(文本内容)；
创建节点属性：节点.setAttribute（属性名，属性值）;
节点追加
给指定父节点追加最后一个子节点： 父节点.appendChild（待追加的节点）
在指定节点前追加新节点： 父节点.insertBefore（新节点，旧节点）
节点删除
父节点.removeChild（子节点）
iii 获取元素的非行间样式（了解）
行内：标签对象.style.要获取的属性
行内&内嵌&外嵌&
window.getComputedStyle(标签对象).要获取的属性
标签对象.currentStyle.要获取的属性
iv 获取元素的偏移量
offsetLeft 获取左偏移量
offsetTop 获取上偏移量
offsetWidth 获取元素布局宽度（内容宽度 + padding宽度 + border宽度）
offsetHeight 获取元素布局高度（内容高度 + padding高度 + border高度）
v 严格模式
来源：CSDN
作者：weixin_46214581
链接：https://blog.csdn.net/weixin_46214581/article/details/104056949