DOM树
-
document
- html根元素
- head 标签
- body
- a
- p
- h1 ...
- html根元素
-
文档: document 一个页面就是一个文档,DOM中使用document标识
-
元素:页面中所有的标签都是元素,DOM中使用element标识
-
节点:网页中所有的内容,都是节点。
-
因为我们文档页面是从上往下加载,所以script写到标签下面(先有标签再使用)
-
console.dir() 查看元素对象属性及方法
-
this关键字的使用(当前对象的调用者)
-
全局作用域或者普通函数的this 指向全局对象window
-
方法调用中,谁调用this指向谁
-
构造函数中 this指向构造函数的实例
function fun(){ // 执行方法 } var f = new fun(); // 开辟了一个新的方法空间
-
BOM 浏览器对象模型
-
DOM属于BOM的一部分
-
BOM的顶级对象是window
window对象的常见事件
window.onload = function(){
// 页面加载完执行的方法
}
window.addEventListener('load',function(){
// 页面加载完执行
})
window.addEventListener('DOMContentLoaded',function(){
// DOM树加载完执行
})
window.addEventListener('resize',function(){
// 页面变化时执行
window.innerWidth() // 屏幕宽度
})
定时器
// 1.setTimeOut 延时调用,只调用一次
setTimeOut(fun,2000) = window.setTime(fun,2000)
// 1.直接调用
var f = setTimeOut(function(){},2000);
// 关闭定时器
chearTimeOut(f);
// 2.调用方法
function fun(){
//方法调用
}
setTimeOut(fun,2000);
// 2.间隔调用 setInterval()
var f = setInterval(fun,2000); // 2000毫秒执行一次,一直执行
// 关闭interval
clearInterval(f)
JS执行队列
当主线程任务执行完后,会去异步任务列表轮训是否有任务,如果有则执行,前提是主线程任务执行完毕后。
- JS是单线程
- js分为两个线程
- 主线程 同步任务 从上到下执行
- 任务队列 异步任务 (点击事件,资源加载,方法回调)
- 先执行同步任务(主线程),后执行异步任务(任务队列)
location对象
获取URL对象数据,其实可以直接console.dir(location) 去查看location对象属性
-
location.href 可以获取域名地址,也可以赋值 跳转新的页面
-
location.host 域名
-
location.port 端口号
-
location.path 路径
-
location.search 参数
-
location.hash 锚点
-
location.assign('url') // 记录历史,具有后退功能
-
location.replace('url') // 不记录历史,不具有后退功能
-
location.reload('url') / 重新加载页面 也可以强制刷新 比较常用
**navigator对象 **
- 包含浏览器的信息,常用的是userAgent,该属性可以返回由客户端发送至服务端的user-agent头部的值 了解就好
history对象
与浏览器历史记录进行交互,该对象包含用户访问过的URL
- back 后退功能
- forward 前进功能
- go 前进后退功能 go(1)前进一步 go(-1)后退一步
界面使用 用的不多
- 元素偏移量offset系列
- 元素可视区client系列
- 元素滚动 scroll系列
本地存储
-
window.sessionStorage
-
容量大小 5M
-
生命周期 为关闭浏览器窗口
-
在同一个窗口下数据可以共享
-
以键值对存储
// 存储数据 sessionStorage.setItem('key','value') // 获取数据 sessionStorage.getItem('key') // 移除数据 sessionStorage.remove('key') // 清除所有 sessionStorage.clear()
-
-
window.localStorage
-
容量大小20M
-
生命周期,永久生效,除非手动删除,否则一直存在
-
可以多个窗口共享 同一浏览器使用
-
也是以键值对存在
// 存储数据 localStorage.setItem('key','value') // 获取数据 localStorage.getItem('key') // 移除数据 localStorage.remove('key') // 清除所有 localStorage.clear()
-
网友评论