重温js第三天：6月10+11日小结

Math是数学对象，可以直接点方法或者点属性，如Math.PI和Math.max（）
Arguments可变参数，当函数没有形参，这个就是默认形参，会接受所有实参
Math.abs()绝对值 Math.round（）四舍五入
Math.random()随机数
Data()是一个日期对象，必须使用new才能使用
时间戳：当前时间距离1970年一月一日的毫秒数
倒计时案例：用结束时间减去现在时间戳，然后把时间戳转为时分秒
Instanceof运算符，用于检测类型
Array.isArray()检测数组，h5新增方法
添加数组元素push（）里面传两个参数，在末尾添加
Unshift（）在前面添加
Pop（）里面不跟参数直接删除最后一个元素
Shift（）删除第一个元素
Sort（）排序
Reverse（）反转
Index0f（）查找给定元素的索引
数组去重：遍历旧数组每个元素，拿着旧数组元素和新数组进行对比，利用indexof（）的返回值，如果有返回的是大于0的索引，如果返回值小于0就是没有就可以存到新数组里面
数组转换为字符串toString（）
Join（）分隔，里面传参是写想要的分隔符号
基本包装类型：简单数据类型会被js给包装成复杂数据类型，比如str会有length属性
返回字符位置：先查找第一个需要找的元素，然后利用indexof的第二个参数可以传入查找的位置
查找字符串某个元素出现的次数，利用indexof和while循环
根据位置返回字符：charAt（index），遍历字符串可用这个函数
统计出现次数最多的字符：利用charAt遍历字符串，这个算法有难度，可以去找一下看看，后面还需要遍历对象，遍历对象用for in
Concat字符串拼接
Substr（）里面传参两个，第一个是截取起始位置（从哪儿开始），第二个参数是截取几个字符（截多少）
Replace替换字符，只会替换第一个字符
Join把数组转成字符串，split把字符串转成数组
简单数据类型比如值类型或者基本数据类型
复杂数据类型比如引用
Null返回的是空对象
API就是接口，一般是一些预定义的函数

dom文档对象模型，返回的都是对象
queryselector返回选择器的第一个元素，就不用getelementbyid或者bytagname或者byclassname这么麻烦，queryselectorAll返回指定选择器的所有元素对象
事件就是触发响应的机制:事件源（对象比如哪个盒子），事件类型（比如点击还是键盘按一下），事件处理程序（就是匿名函数）。
innerText和innerHtml（是普通盒子，表单不适用，表单是通过value来修改的）的区别:第一个不识别html标签且不能保留空格和换行，后面一种识别并且可以保留空格和换行
修改图片可以通过绑定事件的方式改变图片的url实现
Dom可以操作表单元素
Document.适用于操作标签的，获取了标签以后在通过新的对象更改里面的属性或者里面的内容
禁用按钮用法：btn.disabled=true
This指向的是事件函数的调用者
隐藏密码小案例：核心思路是点击眼睛按钮以后，把密码框类型修改为文本框类型
Input框一般是和label框共同使用
一般步骤都是：获取元素-注册实践-处理程序
Js修改元素颜色大小等样式属性
比如this.style.backgroundcolor=red,这种属于行内样式法
淘宝关闭二维码小案例：获取图片和那个小叉号，当点击叉号触发点击事件使得盒子的display=none，
循环精灵图小案例：核心思路是利用for循环修改精灵图的背景位置bp
显示隐藏文本框小案例：获取焦点事件onfocus，失去焦点onblur
element.style修改样式如果较少的话很方便，如果更改的样式比较多，可以通过添加(要用到多类名选择器的写法)或者替换class来做到，this.className
背景图片不一定是全覆盖，精灵图那种效果用背景图也能做到
密码框验证信息小案例：可以使用修改类名的方式实现
操作元素内容通过innerHtml和innerText
操作常见属性src之类的
操作表单属性type和value之类的
操作元素样式属性通过element.style和className
排他思想：先使所有元素清除想要的样式，再给自己的想要的元素设置样式
百度换肤小案例：核心思想就是把src取出来给body作为背景图，做法就是先写css，再写script交互，里面先获取元素，循环注册事件。
表格鼠标路过变色效果
涉及到改变样式一般都默认绑定事件添加css类名，
表单全选和取消全选：让下面复选框的选择状态跟随全选按钮，做法是获取元素，注册事件，把全选框的checked状态给下面的所有按钮；下面所有的按钮都选中，全选才会为true；可以用flag控制全选按钮是否选中
获取属性值;element.属性，这种主要是获取内置属性值；或者element.getAttribute（‘属性值’）这种主要获取自定义属性值
设置属性值;与上面差不多
移除属性：和上面差不多
Tab栏切换布局小案例：点击上面的选项卡，下面对应展示内容；首先是上面的点击模块，利用排他思想；下面的模块和上面的内容一一对应，所以要给上面的点击栏设置自定义属性，设置个index就行，属性从0开始编号。这个案例用到排他思想很重要
自定义属性就是为了保存数据并使用，利用getAttribute setAttribute
H5规定data-开头来设置自定义属性
Dom树把节点划分为不同的层级关系：父节点parentNode（只能得到最近的父节点）；子节点获取childNode；第一个子节点firstChild，第一个子元素节点firstElementChild（这些都有兼容性问题）；用的最多的是children（索引号）；层级关系主要是防止一直用document获取元素
新浪下拉菜单小案例：当鼠标经过第二个孩子ul时显示，当鼠标离开时隐藏，利用onmouseover
nextsibling拿到兄弟节点
创建节点document.createElement
在末尾添加节点node.appendChild
发布留言小案例：思路是点击创建按钮就添加一个li，把文本域的值通过innerHTML赋值给li，新留言在后面显示就用appendChild
删除节点removeChild
删除留言小案例：href=’javascript;;’ 删除的是当前a链接的父元素li，里面涉及到用爷爷节点删除孙子节点的父亲
复制节点：node.cloneNode（），一般和添加节点一起使用，类似复制粘贴
动态生成表格小案例： 数组里面也可以存放对象，列表的行根据数组里面的元素个数得到，用数组的length就行；
三种动态创建元素的区别：第一种document.write会导致页面的全部重绘制
第二种 innerHTML 有两种使用方式效率慢因为需要拼接，效率快的方式采用数组的方式速度特别快
document.createElement 效率快，总的来说第二种比第三种快
dom树包含文档，元素，节点
dom的增删改查主要都是针对元素的操作，还涉及对属性的操作和事件的操作
事件高级：注册事件和绑定事件
注册事件传统方法比如btn[0].οnclick=function(){},这里0指的是第一个btn按钮
方法监听注册方式比如addEventListener（）表示添加事件监听，可以接收三个参数分别是事件类型，处理函数（可以写在括号里面也可以写在括号外面封装）和一个布尔值类型的可选参数
事件流三个阶段分为：事件捕获阶段，目标阶段和事件冒泡阶段
onclick只能得到冒泡阶段
捕获阶段和冒泡阶段的顺序是反着的，就是父盒子和子盒子都绑定点击事件，当点子元素，父元素也会触发冒泡
Function函数中默认都会包含一个默认事件对象event
e.target返回的是触发事件的对象（元素），就是点谁谁触发事件，就算没有绑定事件监听
this返回的是绑定事件的对象
e.preventDefault()阻止默认行为