1.window对象自带属性/方法
2.定时器
3.本地存储
4.与获取CSS样式及修改
window对象自带属性,方法
属性
0.获取/修改当前屏幕宽度:window.innerWidth
1.获取/设置,整个url:window.location.href
2.返回参数:window.location.search
3.返回域名:window.location.host
4.返回端口号:window.location.port
5.返回路径:window.location.pathname
6.返回片段(一般用于锚点链接):window.location.hash
7.判断使用设备,及根据设备跳转页面(有封装代码):window.navigator.userAgent
8.页面被滚动后隐藏的头部距离:window.pageYOffset(ie9以上)
9.页面被滚动后隐藏的左侧距离:window.pageXOffset(ie9以上)
方法:和submit提交另一页面功能配合
0.让窗口滚动到x轴位置和y轴位置:window.scroll( x,y)
1.跳转页面:window.location.assign( "地址" );(和href一致,浏览器有后退功能)
2.跳转页面:window.location.replace( "地址" );(和href一致,浏览器没有后退功能)
3.刷新浏览器:window.location.reload( 空/true );空:刷新当前浏览器/true:强制刷新浏览器
4.浏览器前进:window.history.go( 1,2 ); / history.forward( );
5.浏览器后退:window.history.go( -1,-2 ); / history.back( );
定时器
一次性定时器
1.设置定时器:var lzy = window.setTimeout
( 函数,延迟的毫秒数 )
2.停止定时器:window.clearTimout
( 定时器标识符/名字 )
(1)当倒计时结束后执行函数
(2)定时器里面的函数就是回调函数
(3)注意标识符作用域
多次定时器
1.设置定时器:var lzy = window.setInterval
( 函数,延迟的毫秒数 )
2.停止定时器:window.setInterval
( 定时器标识符/名字 )
(1)每隔一段时间,重复调用函数
(2)定时器里面的函数就是回调函数
(3)注意标识符作用域
本地存储
1.不经过服务器,将数据存储在用户的浏览器中
?2.存储只能存储字符串,将对象Json.stringify( )编码后存储
window.sessionStorage:生命周期为关闭浏览器窗口
- 同一页面下数据可共享
- 容量5M
- 以键值对形式存储
操作 | 代码 |
---|---|
存储 | window.sessionStorage.setltem(key(自己设置),value(input输入的值)) |
获取 | window.sessionStorage.getltem(key) |
删除 | window.sessionStorage.removeltem(key) |
删除所有数据 | window.sessionStorage.clear(key)(尽量少用) |
window.localStorage:生命周期永久有效,除非手动删除
- 多窗口共享(同一浏览器就行)
- 容量20M
- 以键值对形式存储
操作 | 代码 |
---|---|
存储 | window.localStorage.setltem(key(自己设置),value(input输入的值)) |
获取 | window.localStorage.getltem(key) |
删除 | window.localStorage.removeltem(key) |
删除所有数据 | window.localStorage.clear(key)(尽量少用) |
与获取CSS样式及修改
1.DOM元素自身的宽度/高度
1.返回值没有单位
2.只可读,不可写
宽度(边框/内边距/content):DOM元素.offsetWidth(如果文字超出盒子,取盒子宽度/高度)
宽度(内边距/content):DOM元素.clientWidth(如果文字超出盒子,取盒子宽度/高度)
宽度(左边框):DOM元素.clientLeft(如果文字超出盒子,取盒子宽度/高度)
宽度(内边距/content):DOM元素.scrollWidth(如果文字超出盒子,取盒子+文字)
高度(边框/内边距/content):DOM元素.offsetHeight(如果文字超出盒子,取盒子宽度/高度)
高度(内边距/content):DOM元素.clientHeight(如果文字超出盒子,取盒子宽度/高度)
高度(上边框):DOM元素.clientTop(如果文字超出盒子,取盒子宽度/高度)
高度(内边距/content):DOM元素.scrollHeight(如果文字超出盒子,取盒子+文字)
1.父元素有定位
2.返回值没有单位
3.只可读,不可写
2.DOM元素到父元素之间的距离
(1)DOM元素到父元素上方距离:DOM元素.offsetTop
(2)DOM元素到父元素左侧距离:DOM元素.offsetLeft
3.DOM元素如有滚动条,移动滚动条隐藏内容的高度/宽度*
(1)左拉动时文字被盒子隐藏的宽度:DOM元素.scrollLeft
(2)下拉动时文字被盒子隐藏的高度:DOM元素.scrollTop
总结:
1.返回父级元素:DOM元素.offsetParent(跟节点的parentNode的区别就是看是否有定位)
2.以上获取的元素内容只可读,如果要写的话,还需style