目录
1、BOM
1.1 JavaScript 组成
ECMAScript(ES3 ES5 ES6 ES7 ES8 ):
核心语法: 条件判断 | 循环 | 函数 | 变量 | 运算符DOM: 操作HTML标签和 CSS 的方法(API)
BOM: 浏览器对象模型
1.2 BOM 能做什么?
- 操作浏览器窗口
- 提供导航对象
- 屏幕相关信息
- 浏览器信息
- cookie
2、window 对象
2.1 认识
window 作为浏览器端 最顶层 对象
注意: 调用这个对象下的方法和属性可以不用写 window.window.open(); 打开一个新窗口 window.close(); 关闭一个窗口 window.innerWidth 获取浏览器可用宽高 window.innerHeight 获取当前浏览器可用高度
浏览器的可用宽度测量方法还可以使用:
document.documentElement.clientWidth document.body.clientWidth
3、location 对象
3.1 理解
用于获取当前页面的地址,也可以操作当前页面定向到其他页面.
3.2 location 的属性
location.href
当前页面完整的 url;// JS 跳转页面 location.href = 'http://www.baidu.com';
location.protocal
url 的协议部分;
location.host
主机名和端口;
location.hostname
;
url 的主机名.
location.port
url 中的端口号
location.hash
锚点部分, url 中以 '# '开头的部分
location.pathname
url 的路径部分, 以 / 开头部分
location.search
url 中的参数, 以 ? 开头 的键值对字符串, 格式: ?键 = 值 & 键 = 值.3.3 location 方法
location.assign()
载入新文档。
location.replace()
用新文档替换当前历史记录。
location.reload()
重新载入。
//可以做页面刷新
4、navigator 对象
包含浏览器所有的详细信息;
onLine: ture 当前有网;
onLine: false 当前没有网;
userAgent: 用户浏览器信息;
5、screen 对象
获取当前显示器信息;
6、history 对象
提供对浏览器历史记录的访问功能
history.length
访问了多少个页面
history.back()
后退
history.forward()
前进.
history.go(n)
获取 前进/后退 步数, n 是一个数值, 正数代表前进多少页, 负数代表后退多少页.
路由部分:
history.state
得到history 的一个堆栈;
初始为 null
history.pushState(state,title, url);
- state: 一个与添加的记录相关联的状态对象;
- title: 新页面的标题,一般浏览器会忽略, 所以可以直接填空的;
- url: 要打开的新网址;
7、计时器
7.1 setInterval
setInterval(code, delay)
按照指定的周期,重复调用函数。
调用 setInterval 时会返回一个数值;
- delay: 指定的周期,单位是毫秒.
- code: 要运行的函数或执行体;
clearInterval(id)
取消 对应 setInterval 返回的 id 的计时器var timer = setInterval(code, delay) clearInterval(timer)
7.2 setTimeout(延时调用)
setTimeout(code, delay);
在指定的时间后调用函数.调用 setTimeout 会返回一个 数值;
- code: 要调用的函数 或者 表达式.
- delay: 延迟多少时间.
clearTimeout(id)
取消 对应 setTimeout 返回的 id 的计时器var timer = setTimeout(code, delay) clearTimeout(timer)
7.3 同步异步
同步:
简单理解就是按照代码编写的先后顺序执行
异步:
简单理解就是,异步代码全部丢到一边去排队, 等到所有代码执行结束后再执行。
setInterval 和 setTimeout 是异步。
8、前端的持久性存储
8.1、Storage – 本地存储
sessionStorage
临时性存储,关闭当前浏览器后就会清除。
sessionStorage.getItem(key)
// 获取存储,key 是键名sessionStorage.setItem(key, value)
// 设置存储,key 是键名,value 是键值sessionStorage.removeItem(key)
// 移除存储,key 是键名
注意: value 只能是字符串;
如果需要存储其他数据,则需要通过一个方法将其他类型的数据转为字符串:JSON.stringify(数据) // 取出来的时候通过以下方法转为 Number() JSON.parse() 字符串转对象
8.2 localStorage – 永久存储
永久性存储,除非是手动删除。
- localStorage.getItem()
- localStorage.setItem()
- localStorage.removeItem
相关文章