-
// BOM概述
-
// window对象的常见事件
// onload事件加载对象 ,
window.onload=function(){}传统注册方式只能写一次,如果有多个,会以最后一个window.onload为准
window.addEventListener('load',fn) 则没有限制
document.addEventListener('DOMContentLoaded',function(){})
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片 flash等 ie9以上才支持
window.onresize 是调整窗口大小加载事件,当触发时就调用处理函数
window.innerWidth 是获取当前屏幕宽度
- // 定时器
window 提供了2个定时器
// setTimeout() -----> 停止定时器 window.clearTimeout(timeoutID); window可以省略
// setInterval() -----> 停止定时器 window.clearInterval(intervalID) window可以省略
// setInterval() 每间隔这个时间就调用函数 反复调用 不停除非清楚定时器
// setTimeout() 执行一次 就结束这个定时器
// setTimeout()语法 window.setTimeout(调用函数,延时时间);
// window在调用的时候可以省略
// 延时单位是毫秒 不写默认为0
// 这个调用函数可以直接写函数,还可以写 函数名 还有一些 '函数名()'不推荐第三种写法
// 页面中有很多定时器,我们经常给定时器加标识符
- // JS执行机制
// js是单线程语言
// html5提出web worker标准 允许js脚本创建多个线程 于是js出现了同步和异步
// 同步 前一个任务结束后再执行后一个任务
// 异步 做一件事时还可以处理其他事
// 同步任务在主线程执行栈,异步任务在任务队列(消息队列) 先执行主线程执行栈, 之后再把任务队列里的放到主线程栈执行
// 执行机制 主线程栈--->异步进程处理--->任务队列
// 异步进程处理 就是主线程里面的回调函数达到要求才会放到任务队列 比如点击按钮之后才能放到任务队列 比如定时器几秒到了才能执行放到任务队列 之后主线程栈执行完才能从任务队列再放到主线程栈执行
// 主线程一直查看任务队列有无异步任务 有就执行 这个操作叫做event loop 事件循环 一直查询任务队列有无输出对象
// 执行完同步任务之后才会执行异步任务
// js的异步任务是通过回调函数实现的
// 常见的异步任务
// 普通事件click resize等
// 资源加载 load error等
// 定时器包括setInterval setTimeout 等
// this指向问题,一般情况下this最终指向的是那个调用它的对象
// 1全局作用域或者普通函数中的this指向全局对象window (注意定时器里面的this指向window)
// 2方法调用中谁调用this指向谁
// 3构造函数中this指向构造函数的实例 实例化的时候会new一块空间
- // location对象
// location对象
// location对象的属性
// location.href 获取或设置整个URL
// location.host 返回主机或者域名
// location.port 返回端口号 如未写返回空字符串
// location.pathname 返回路劲
// location.search 返回参数
// location.hash 返回 片段 #后面内容常见于链接 锚点
// url组成
// protocol://host[:post]/path/[?query]#fragment
// http:www.baidu.com/index.html?name=andy&age=10#link
// protocol 通信协议 常用的http,ftp,maito等
// host 主机域名 www.baidu.com
// post 端口号 可选 省略时使用方案的默认端口 http默认80
// path 路劲
// query 参数 以键值对形式通过&分割
// fragment 片段 #后面的内容 常见于链接锚点
location对象常见方法
// location.assign(); 和href一样可以跳转页面(也称为重定向页面)
// location.replace(); 替代当前页面,因为不记录历史数据 所以不能后退
// location.reload(); 重新加载页面 相当于刷新或者f5 如果参数为true为强制刷新 ctrl+f5 强制刷新就把浏览器缓存都清空了
- // navigator对象
// navigator对象包含浏览器的信息,有很多属性最常用的就是userAgrent 该属性返回由客户机发送服务器的user-agrent头部的值
// navigator.userAgent 有一段判断代码其中用到这个知识点 判断用移动端还是pc端打开的网页 以此来显示不同的页面
- // history对象
// window 对象给我们提供了history 对象,与浏览器历史记录进行交互,该对象包含用户(在浏览器窗口中)访问过的url
// back() 后退功能
// forward() 前进
//go()前进后退功能 参数为1前进一个页面 -1后退一个页面
history.go(2); //写2就前进2个