js模块（es+dom+bom）
js模块
-
- JS基础
-
- 数据类型
- js函数
- 获取节点
- classList 类列表
- 定时器
- js循环
- Math常用方法
- 对象与json转化
- 字符串方法（13个）
- es6新增字符串方法（6个）
- 数组方法（9个）
- es5数组新增方法（6个）
- es6新增数组方法（7个）
- es特性
- 时间日期
- DOM
-
- DOM节点
- DOM元素尺寸
- BOM
JS基础
数据类型
typeof：判断变量的类型
（输入框内容获取到都是string类型）
数据类型： 基础类型：number string boolean null undefined symbol
复合类型：object
NaN ：not a number 不是数字，（不是数字的数字类型）
但是typeof验证，其数据类型确实是number类型。
isNaN() ：判断是否是NaN类型。 true false
infinity ：正无穷大。number类型
-infinity ：负无穷大。number类型
undefined ：未初始化或未定义
symbol ：es6新增基本数据类型，用于表示独一无二的值
object : 除了基础类型，都可以看做object。包括对象，数组等
数据类型转换： parseInt() 字符串转int(会抹去零头)
parseFloat() 字符串转浮点数(只保留数字内容。比如字母等等会被抹去)
Number() 数据转为数字
String() 转为字符串
Boolean() 转为布尔值
数字类型：非零数字转为true，0转为false，NaN转为false
字符串类型： 空字符串转为false，非空字符串转为true
null：转为false
object：转为true
运算符： == 判断值是否相同
=== 不仅判断值，也判断数据类型是否相同
+ 有一边是字符串，字符串连接。左右都是数字，正常运算
js函数
函数声明：1、function fn(){
} -----使用时候需要调用，fn()
2、var fn =function(){
} ---使用时候需要调用，fn()
匿名函数：(function(){
})() --------- 函数自执行，不用调用
数据传递：基本数据类型传值，复杂数据类型传地址
三元表达式：判断条件？true的情况：false的情况
获取节点
document.getElementById() 通过id获取节点（只能通过document获取）
document.getElementsByTagName() 通过标签名来获取一组节点
document.getElementsByClassName(); 通过类名获取一组元素 elements
document.querySelector() 通过选择器来获取节点（通过document获取之后，还能获取后代元素）
document.querySelectorAll() 获取一组节点
window.getComputedStyle(document获取的节点)["属性"] chrome内核浏览器获取标签css内部属性
比如：var chromew=window.getComputedStyle(document.querySelector("div"))["width"];
获取节点属性：用. 或[]
.后面跟具体的属性，[]后面跟动态属性。两个方式可以一起使用
获取标签属性的信息： id ------- 获取id
className --- 获取class
value ------ 获取value值
style ------- 获取标签行内样式（就是标签上的style样式）
background
color
width
height
...等等
cssText ----获取所有标签内的style样式，包括宽高颜色等等
innerText --- 获取标签中的文字（内容为标签等都当做文字处理）
href ------- 获取链接 （绝对路径）
src ------- 获取文件绝对路径（绝对路径）
tagName ----- 获取标签名 （大写的）
innerHTML --- 获取标签内部的所有的内容(内容为标签等都可以识别)
简单示范一下：
<div class="box4" id="box4_msg" style="width: 100px;margin: 0;">123</div>
var msg = document.querySelector(".box4"); //#box4_msg 也行，div也行
var msg = document.getElementById("box4_msg");
console.log(msg.style.width) //100px
console.log(msg.style[width]) //100px 这种[]获取属性是可以动态的属性
console.log(msg.tageName) //DIV 大写的
console.log(msg.innnerHTML) //123 标签内部所有内容
console.log(msg.cssText) //width: 100px; margin: 0px; 标签行内样式
classList 类列表
classList：类的列表
add 添加类名
remove 删除类名
contains 判断是否包含类名
toggle 切换类名(控制此类名有、无)
<div class="box a b c"></div>
var box = document.querySelector(".box");
box.classList.add("d") //此时类名 box a b c d
box.classList.remove("b") //此时类名 box a c d
box.classList.contains("wa") //false 判断，返回布尔类型true false
box.onclick=function(){
box.classList.toggle("bbq"); //切换bbq，有与没有。点一下box添加bbq，再点一下没有bbq，循环
}
定时器
- setTimeout(函数,时间) ：延迟定时器—设置函数延迟时间
- setInterval（函数，时间） ：间隔定时器—间隔一定时间调用一次函数
- clearTimeOut(定时器名称) :清除延迟定时器
- clearInterval(定时器名称) ：清除间隔定时器
- 动画帧：requestAnimationFrame
取消动画帧：cancelAnimationFrame
大幅提高性能，尽量选择这个
使用方方法一样，不用填写时间
时间设置速度换成，函数中设置每次移动量来控制速度
在vue中这个注意这个this指向，可以用let that=this
var globalID;
function animate() {
// done(); 一直运行
globalID=requestAnimationFrame(animate);
// Do something animate
}
globalID=requestAnimationFrame(animate);//开始
cancelAnimationFrame(globalID);//结束
定时器可以互相嵌套
延时定时器最小时间为4ms，间隔定时器最小时间为16.7ms
间隔定时器：使用时，记得清除上一次定时器。因为会叠加
动画帧与定时器的区别：动画帧不用设置间隔时间，频率为60HZ，即每秒调用60次（约等于16.66…7），比间隔定时器更精确
js循环
switch case循环：用 break 终止循环，不然后续都会执行
任何switch case都可以用 if 实现
switch(表达式或变量){
case:
}
for循环： var k in obj ：声明一个变量用于代表obj对象中的key。
for循环遍历获取所有值，或者所有键
循环对象都用for in方法
for循环：for (var i = 0; i < 10; i++)
js中没有增强for循环
while循环
do while循环 至少执行一次
continue 终止此次循环，跳出，继续后面的循环
break 终止循环
Math常用方法
取整： Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入
随机数：Math.random() 0-1随机数
最大值：Math.max()
最小值：Math.min()
π值 ：Math.PI
绝对值：Math.abs()
对象与json转化
- json格式----键要加双引号
- 对象--------键没有双引号
- 将字符串转对象 JSON.parse()
- 将对象转json JSON.stringify()
字符串方法（13个）
charAt() 通过下标获取字符
charCodeAt() 获取字符的 Unicode 编码----前端设置字体可用
String.fromCharCode(Unicode编码) 通过 Unicode 编码获取字符----前段设置字体可用
indexOf() 通过字符获取从左到右第一次出现的下标
lastindexOf() 通过字符获取从左到右最后出现的下标
slice(start) 截取字符串：起始位置，直到结束
slice(start,end) 截取字符串：起始和终点位置，包头不包尾
substr(start,n) 截取字符串：起始位置开始，共n位
substring(start) 截取字符串：起始位置，直到结束
substring(start,end) 截取字符串：没有顺序，小的数就是起始位置，大的数就是结束位置。包头不包尾
split("字符") 以某个字符切割字符串（踩坑：可以不要字符直接切割）
concat() 拼接字符串
toLowerCase() 转小写
toUpperCase () 转大写
toFixed(n) 数字转字符串。保留n位小数
es6新增字符串方法（6个）
includes() 判断字符串是否 包含指定字符串
startsWith() 判断字符串是否 以指定字符串开始
endsWith() 判断字符串是否 以指定字符串结束
repeat(n) 复制前面的字符串n次
padStart() 头部补全字符串
padEnd() 尾部不全字符串
'1'.padStart(10, '0') // "0000000001" 解释：1添加0直到10位字符
数组方法（9个）
push() 向后添加 会返回长度
unshift() 向前添加 会返回长度
pop() 从后面删除 会返回删除的值。
shift() 从前面删除 会返回删除的值。
splice(start,n) 删除下标start位置开始，共n位---splice修改的是原数组----会返回删除元素的数组
splice(start,n,....) 删除下标start位置开始，共n位，然后添加上....（即修改）----会返回删除元素的数组
reverse() 数组翻转
join('字符') 数组转字符串并拼接上字符 --不写默认拼接，号
concat(数组) 数组之间的拼接，形成新数组
sort() 数组按照字典序排序，直接用会乱排
sort(function(n1,n2){
return n1-n2; 数组从小到大排（这么分辨：1在前面2在后面，小到大）
})
sort(function(n1,n2){
return n2-n1; 数组从大到小排（这么分辨：2在前面，1在后面，大到小）
})
sort(function(n1,n2){
return Math.random() - 0.5; 随机排序（数组排序可以用于淘宝等销量排序等....）
})
es5数组新增方法（6个）
统一解释：item为数组元素，index为对应下标
统一理解：有 return 的就会生成新数组
统一理解：伪数组只可以用forEach
forEach(function (item, index) {
}) 循环数组（唯一不生成新数组的）
filter(function (item, index) {
}) 循环数组，过滤掉false的项，返回为true的项生成的新数组
map(function (item, index) {
}) 循环数组，返回处理后的每一项生成的新数组
every(function(item,index){
}) 判断，返回true、false。一假为假，全真为真
some(function(item,index){
}) 判断，返回true、false。一真为真，全假为假
// pre 初始值计算后的结果（没有初始值 那数组的第一个数字就是初始值）
// now 当前遍历的值
// index 当前值的下标
// arr 源数组
// 100 初始值（不是必传） 不传的话,数组的第一个数字是初始值
reduce(function (pre,now,index,arr){
},100) 数组各项的计算
es6新增数组方法（7个）
Array.from(数组) 将伪数组转为数组/ 复制数组为新数组
Array.of() 声明一个新数组----没什么用，花里胡哨
.find(function(item){
}) 遍历数组，返回找到的第一个符合条件的值
.findIndex(function(item){
}) 遍历数组，返回找到的第一个符合条件的值的下标
.includes() 判断数组是否含有某个值
.flat(n) 数组扁平化管理。不写扒一层皮（多维数组变一维数组。Infinity：有多少层扒多少层）
.flatMap() 遍历二维数组。返回值为新数组的值
es特性
- 预解析：提前解码。变量声明前置、函数声明前置
- 作用域：以函数为作用域（全局变量：都能用、局部变量：函数内部用）
- 闭包：函数内部还有函数 ---- 多人开发时。自己那块用匿名函数包起来。合并的时候自己的就是局部变量。避免引起冲突
- this改变指向：
.call()
.bind()
.applay()
时间日期
new Date() ：获取日期
getFullYear() 年
getMonth() 月 ------需要+1 ，因为是从0开始的
getDate() 日
getHours() 时
getMinutes() 分
getSeconds() 秒
getMilliseconds()毫秒
getDay() :获取星期几
getTime() ：获取时间戳
获取时间戳方法： new Date().getTime()
Date.now()
数字等转字符串：直接在前面添加一个空字符 "" js会自动进行字符串拼接
日期补零： function add(num){
return num < 10 ? ("0" + num) : num;}
举例：
var date = new Date();
var year = date.getFullYear();
var mon = date.getMonth() + 1; //记得加1，因为月份0开始的
var day = date.getDate();
DOM
DOM节点
DOM ：document object model 文档对象模型
dom比innerHTML的好处：innerHTML加入样式后不能对其进行操作。但是dom加入东西可以操作，功能更全面
空格和提行都属于 文本节点
window五大部分：location、history、navigator、screen、document。前四个属于BOM。document属于DOM。原本是window.document、window.location等，但是我们把window省略了。
childNodes 获取子节点，包含文本
children 获取子节点，只有标签
firstChild 获取第一个子节点，包含文本
firstElementChild 获取第一个子节点，只有标签
lastChild 获取最后一个子节点，包含文本
lastElementChild 获取最后一个子节点，只有标签
nextSibling 获取下一个兄弟节点，包含文本
nextElementSibling 获取下一个兄弟节点，只有标签
previousSibling 获取上一个兄弟节点，包括文本
previousElementSibling 获取上一个兄弟节点，只有标签
parentNode 获取父节点，只有标签
offsetParent 获取定位父节点，只有标签
getAttributeNode 获取属性节点（不重要）
创建节点： document.createElement();
插入节点： el.append(); 元素内部插入子节点
el.appendChild(); 元素内部插入子节点（插入的是已经存在的节点，会把此节点剪切插入进去）
父元素.insertBefore(新节点，老节点); 元素之前插入节点（插入的是已经存在的节点，会把此节点剪切插入进去。如果老节点不存在，则新节点插入到最后）
替换节点： 父级.replaceChild(新节点，老节点); 替换子节点
删除节点： 父级.removeChild(); 删除子节点
el.remove(); 直接删除此节点
克隆节点： el.cloneNode(boolean); 克隆节点。但是没有添加进页面，需要手动添加。
boolean 默认false，不写：浅克隆：只会克隆此元素，不会克隆子元素
boolean 为true：深度克隆：全部克隆，包括子元素
节点类型： .nodeType 元素节点 1 (每个HTML元素)
属性节点 2 (HTML元素的属性)
文本节点 3 (HTML元素内的文本)
注释节点 8 (一段注释)
文档节点 9 (整个文档 document)
节点名称： .nodeName 元素节点：与标签名相同
属性节点：与属性名相同
文本节点：为 #text ---------空格和提行，都属于文本节点
注释节点：为 #comment
文档节点：为 #document
DOM元素尺寸
以下内容：行内样式跟css样式都能获取到
可视距离：content+padding+border
可视区：整个屏大小，不包括滚动下面的
内容高度/宽度：内容宽度在滚动条范围内都能获取，比可视区还全面
offset:
offsetWidth 可视宽度
offsetHeight 可视高度
offsetLeft 距离定位父级的left值
offsetTop 距离定位父级的top值
client：
clientWidth 可视宽度-border
clientHeight 可视高度-border
clientTop 上边框宽度
clientLeft 左边框宽度
scroll：
scrollWidth 内容宽度
scrollHeight 内容高度
scrollLeft 滚动条左右滚动距离
scrollTop 滚动条上下滚动距离
getBoundingClientRect()：
left 元素左侧距离可视区左侧距离
top 元素顶部距离可视区顶部距离
right 元素右侧距离可视区左侧距离
bottom 元素顶部距离可视区顶部距离
width 元素可视宽度
height 元素可视高度
body {
width: 2000px; height: 3000px;}
div {
width: 200px;height: 200px;border: 1px solid red;padding: 10px;}
<div></div>
var box = document.querySelector("div");
console.log(box.offsetWidth); //可视宽度(content+padding+border)
console.log(box.offsetHeight); //可视高度
console.log(box.offsetLeft); //距离定位父级的left
console.log(box.offsetTop); //距离定位父级的top
//结果：222 222 8 8 为8是因为body有距离document有margin值
console.log(box.clientWidth); //可视宽度-border
console.log(box.clientHeight); //可视高度-border
console.log(box.clientTop); //上边框宽度
console.log(box.clientLeft); //左边框宽度
//结果：220 220 1 1
console.log(document.documentElement.clientWidth); //当前可视区总宽度（随窗口大小改变）
console.log(document.documentElement.clientHeight); //当前可视区总高度（随窗口大小改变）
console.log(document.documentElement.scrollWidth); //内容宽度（整个页面，包括滚动条下的）
console.log(document.documentElement.scrollHeight); //内容高度（整个页面，包括滚动条下的）
console.log(document.documentElement.scrollLeft); //滚动条左右滚动距离
console.log(document.documentElement.scrollTop); //滚动条上下滚动距离
//结果：看窗口 看窗口 2008 3016 看滚动条 看滚动条
window.onscroll = function () {
//滚动条滚动事件
console.log(box.getBoundingClientRect().top); //元素顶部离可视区顶部的距离
console.log(box.getBoundingClientRect().width); //元素可视宽度
}
BOM
window五大部分：location、history、navigator、screen、document
BOM：location、history、navigator、screen
DOM：document ---------（browers boject model 浏览器对象模型）
所以原本是window.location、window.history、window.navigator、window.screen、window.document，但是window我们一般省略掉了
- bom的使用方法
window：
innerWidth/innerHeight 浏览器窗口大小
close() 关闭页面
open() 打开某某页面
.onscroll 滚动条滚动事件
.onresize 浏览器窗口大小改变触发事件
.onhashchange hash改变事件（地址栏 #号内容改变）
scrollX 滚动条左右滚动距离（只能获取值，不能设置）
scrollY 滚动条上下滚动距离（只能获取值，不能设置）
window.scrollTo(x,y) 设置滚动条左右、上下滚动距离
location：
href 地址栏地址
hash 地址栏hash值（#开头的）
search 地址栏？后面的键值对（get请求）
reload() 刷新页面（与浏览器自带的效果一样）
history：
back() 历史记录后退（与浏览器自带的效果一样）
forward() 历史记录前进（与浏览器自带的效果一样）
go(n) n为正数：历史记录前进n次
n为负数：历史记录后退n次
navigator:
userAgent 获取用户浏览器信息
appName 获取浏览器类型
appVersion 获取浏览器版本号
screen:
width 电脑屏幕总宽度
height 电脑屏幕总高度
- 案例：hash视图切换
<a href="#about">关于我们</a>
<a href="#join">加入我们</a>
<div id="view"></div>
<script>
var abtns = document.querySelectorAll("a");
var view = document.querySelector("#view");
function aboutHtml() {
return "关于我们
"
}
function joinHtml() {
return "加入我们"
}
//.onhashchange 页面hash值变化触发事件
window.onhashchange = function () {
var finalhash = location.hash.substring(1); //地址中取#about或#join，再把#分割掉
console.log(finalhash)
if (finalhash === "about") {
view.innerHTML = aboutHtml();
} else {
view.innerHTML = joinHtml();
}
}
</script>
- 案例：页面前进后退
<a href="reload刷新.html">新页面</a>
<a href="hash视图切换.html">前进</a>
<a href="javascript:;">底层</a>
<script>
var btn = document.querySelectorAll('a')[1];
var btn2 = document.querySelectorAll('a')[2];
btn.onclick = function(){
// 历史记录前进
history.forward();
}
btn2.onclick = function(){
// 跳转到指定历史记录
// 正值是往前 负值往后
history.go(2)
}
console.log(history)
</script>