回顾第五天学习的
- e.target:鼠标点击的元素
- this:事件源
window对象三个特点 window是浏览器窗口
- window是js中顶级对象,一切默认全局函数和全局变量都是window的成员(属性+方法)
- window中的成员,在使用时候一律可以省略window
- window对象的top属性不能作为变量名
//声明变量尽量要规范,不要用标准属性作为变量名
window对象两个方法
打开窗口:window.open()
关闭窗口:window.colse()
window对象三个事件
window.onload 界面上所有的内容加载完毕之后才会触发这个事件
window.onbeforeunload:界面在关闭之前会触发这个事件
window.onunload:界面在关闭的那一瞬间会触发这个事件
location对象
/*1.location对象：包含当前页面的URL信息
* url：全球统一资源定位符
* url = 协议名（http） + ip地址（域名） + 端口号 + 资源路径
* 暂时只需要知道location对象包含一个网页的网络url信息即可，具体的含义将在后面阶段学习网络的时候详细讲解
2.location对象有三个常用的方法
* （1）打开新网页：location.assign('你要打开的新网页的url')
* （2）替换当前网页：location.replace('要替换的网页url')
* (3) 刷新当前网页: location.reload()
*/
//1.location对象信息查看
console.log ( window.location );//location对象
console.log(location.hash);//资源定位符（锚点定位）
console.log(location.host);//主机 host = hostname + port
console.log(location.hostname);//主机名（ip地址）
console.log(location.port);//端口号
console.log(location.href);//完整的url路径
console.log(location.pathname);//资源路径
console.log(location.protocol);//url的协议
console.log(location.search);//url请求的参数
//2.assign：打开新网页
document.getElementById('assign').onclick = function ( ) {
//会留下历史记录（可以回退）
window.location.assign('http://www.itheima.com');
//上面这行代码等价于下面这行代码
//window.location.href = 'http://www.itheima.com';
}
//3.replace:替换当前网页
document.getElementById('replace').onclick = function ( ) {
//不会留下历史记录（不能回退）
window.location.replace('http://www.itcast.com');
}
//4.刷新当前网页
document.getElementById('reload').onclick = function ( ) {
//相当于按了F5刷新当前网页
window.location.reload();
}
history对象
/*history对象主要用于记录你当前窗口的历史记录
* 主要作用就是前进和后退网页（相当于浏览器的左上角前进后退按钮功能）
* history.forward():前进
* history.back():后退
*/
document.getElementById('forword').onclick = function ( ) {
//跳转到当前网页历史记录的下一页，如果没有下一页的历史记录，则不跳转
history.forward();
}
localstorage与sessionstorage
1.localStorage:本地存储
将数据存储到浏览器
2.语法
存： localStorage.setItem('属性名','属性值')
取： localStorage.getItem('属性名')
删： localStorage.removeItem('属性名')
清空： localStorage.clear()
3.注意点
a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串
b.永久存储。除非自己删，否则一直存在于浏览器
*/
1.sessionStorage相当于短命版的localStorage，其他用法完全一致
2.两者区别：HP值不同
localStorage：永久存储（存在硬盘，HP值无限）
sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）
三大家族
1.offset家族 ： 获取 “元素自身” 的真实宽高与位置
offsetWidth/offsetHeight : 获取自身真实宽高 = width + padding*2 + border*2
offsetLeft/top : 元素自身 左/上 外边框 到 定位父级 左/下 内边框距离
2.scroll家族 ： 获取 “元素内容” 的真实宽高与位置
scrollWidth/scrollHeight : 获取元素‘内容’的宽高
scrollLeft/scrollTop : 元素内容 左/上 滚动出去的距离
3.client家族 ： 获取元素‘可视区域’的宽高与位置
clientWidth/clientHeight : 获取元素‘可视区域’的宽高
clientLeft/clientTop : 获取元素‘可视区域’的位置（左边框与右边框）
三大家族特点
(1)获取的是number类型
(2)只能获取，不能设置
获取网页滚动距离
/* 学习目标：获取网页滚动距离
1.给网页注册滚动事件 : window.onscroll
2.获取网页滚动距离 ： document.documentElement.scrollLeft
*/
//1.给页面注册滚动条事件
window.onscroll = function(){
//2.获取页面滚动距离 : html标签
console.log( document.documentElement.scrollLeft,document.documentElement.scrollTop );
};
轻易得到的不想要,想要的轻易得不到
