js模块
JS基础数据类型js函数获取节点classList 类列表定时器js循环Math常用方法对象与json转化字符串方法（13个）es6新增字符串方法（6个）数组方法（9个）es5数组新增方法（6个）es6新增数组方法（7个）es特性时间日期
DOMDOM节点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");
var msg
= document
.getElementById("box4_msg");
console
.log(msg
.style
.width
)
console
.log(msg
.style
[width
])
console
.log(msg
.tageName
)
console
.log(msg
.innnerHTML
)
console
.log(msg
.cssText
)
classList 类列表
classList：类的列表
add 添加类名
remove 删除类名
contains 判断是否包含类名
toggle
切换类名(控制此类名有、无
)
<div
class="box a b c"></div
>
var box
= document
.querySelector(".box");
box
.classList
.add("d")
box
.classList
.remove("b")
box
.classList
.contains("wa")
box
.onclick=function(){
box
.classList
.toggle("bbq");
}
定时器
setTimeout(函数,时间) ：延迟定时器—设置函数延迟时间setInterval（函数，时间） ：间隔定时器—间隔一定时间调用一次函数clearTimeOut(定时器名称) :清除延迟定时器clearInterval(定时器名称) ：清除间隔定时器
定时器可以互相嵌套 延时定时器最小时间为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
) 数字保留几位小数
es6新增字符串方法（6个）
includes() 判断字符串是否 包含指定字符串
startsWith() 判断字符串是否 以指定字符串开始
endsWith() 判断字符串是否 以指定字符串结束
repeat(n
) 复制前面的字符串n次
padStart() 头部补全字符串
padEnd() 尾部不全字符串
'1'.padStart(10, '0')
数组方法（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。一真为真，全假为假
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;
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
);
console
.log(box
.offsetHeight
);
console
.log(box
.offsetLeft
);
console
.log(box
.offsetTop
);
console
.log(box
.clientWidth
);
console
.log(box
.clientHeight
);
console
.log(box
.clientTop
);
console
.log(box
.clientLeft
);
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
);
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 "<h2>关于我们</h2>"
}
function joinHtml() {
return "<h2>加入我们<h2>"
}
window
.onhashchange = function () {
var finalhash
= location
.hash
.substring(1);
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
>
