js进阶-对象和BOM-day02
今日学习目标
对象进阶（***）
Date时间对象（了解）
BOM对象（location对象 history对象）
1、对象进阶Object内置方法
1、Object.assign（** ***）
作用：对一个对象或者多个对象进行拷贝（复制）
Object.assign(目标对象，源对象1，源对象2， 源对象3, ...) 注意： 1、Object.assign作用为对象属性和方法的拷贝 2、拷贝的源对象可以为一个或者多个，只会作用于目标对象，相会不影响 3、源对象和目标对象属性名冲突，源对象属性覆盖目标对象 4、Object.assign拷贝为深拷贝--单独创建一个新的对象把属性复制
let animal = {
type: '动物',
sex: '雌性'，
foods: ['猫条', '猫粮']
}
let cat = {
catType: '布偶猫',
color: 'white',
sex: '雄性'
};
// Object.assign对象拷贝 若出现相同的属性则后面的属性覆盖前面的属性
Object.assign(cat, animal)
console.log(cat);
//特殊： 拷贝的对象中还存在引用数据类型则只是复制房间号
animal.foods.push('猫草');
console.log(animal);
console.log(beidou);
2、Object.keys
作用：以数组的方式，返回对象中所有的属性
let res = Object.keys(obj) console.log(res);//['name', 'age', 'sex']
3、Object.values
作用：以数组的方式，返回对象中所有的属性值
let res2 = Object.values(obj) console.log(res2);//['龙建成', 20, '男']
4、Object.is
作用：判断两个值是否全等（弥补ES5中===出现的怪异行为）
console.log(NaN === NaN);//false let res3 = Object.is(NaN, NaN) console.log(res3);//true console.log(+0 === -0);//true let res4 = Object.is(+0, -0) console.log(res4);//false
2、时间对象
获取当前时间：new Date()
获取指定时间：new Date(时间)
格式化时间：toLocaleString()
getTime()获取时间戳
获取时间：
getFullYear()
getMonth()
getDate()
3、BOM进阶
BOM:brower object model 浏览器对象模型，用于操作浏览器
location url地址信息
history 历史记录
screen 屏幕信息
navigator 浏览器信息
location对象
-
重点
location.href 获取或者设置url地址----常用于js跳转页面
location.replace() 历史记录跳转
reload()刷新页面
-
了解location的属性
protocol 协议 (http https)
host 主机名和端口号
hostname 主机名
port端口号
pathname 路径名
search 获取?后面的内容
hash 获取#后面的内容
http和https的区别
history对象
go(n) n代表数字 跳转到指定的某个历史记录
back()回到上一个历史记录
forward()进入前一个历史记录
pushState()压入一个历史记录
事件
事件四要素
事件源：DOM元素
事件类型：鼠标事件、键盘事件、表单事件、浏览器事件
事件执行函数
事件对象：event (重点）
常见的事件类型
-
鼠标事件
click 点击 dblclick 双击 mouseover鼠标移入 mouseout鼠标移出 mousemove鼠标移动 mousedown鼠标按下 mouseup鼠标弹起 mouseenter鼠标进入 mouseleave鼠标离开 contextmenu 鼠标右键
-
键盘事件
keyup 按键弹起 keydown按键按下 keypress按键按下并弹起
-
表单事件
focus聚焦 blur失焦 change域的改变 submit提交 reset重置 input表单输入
-
浏览器事件
load 页面加载 unload页面卸载 scroll滚动条滚动
事件捕获、事件冒泡、事件委派
事件对象event
event记录整个事件的相关信息
-
事件对象内通用属性
type 事件类型
target事件源
ctrlKey 检测ctrl键是否被按下
shiftKey 检测shift是否被按下
altKey 检测alt键是否被按下
-
鼠标事件特有的对象属性
button 鼠标当前按下的为哪个按键 0 左键 1 滚轮 2右键 （了解）
重点：鼠标点击位置的获取
screenX screenY 获取当前点击的点距离屏幕的位置
clientX clientY 获取当前点击的点距离视窗（浏览器body的位置）的位置
offsetX offsetY 获取当前点击的点距离事件目标对象的位置
