js基础之BOM

BOM的构成

1. window对象是浏览器的顶级对象
2. js访问浏览器窗口的一个接口
3. 它是一个全局变量。定义在全局作用域中的变量、函数都变成window对象的属性和方法

页面加载时间

1. load等页面内容全部加载完毕，包含页面dom元素 图 flash css等
2. DOMContentLoaded是DOM加载完毕，不包含图、flash、CSS等； 速度比load快一些

调整窗口大小事件 resize

window.onresize = function(){};
window.addEventListener("resize", function(){});

1. 调整窗口大小加载事件，当触发时就调用函数
2. 利用这件事完成响应式布局，window.innerWidth当前屏幕宽度

定时器

1. 定时器setTimeout(调用函数，[延迟毫秒数(省略为0)])
   • 调用函数可以直接写函数，或者写函数名，或者’函数名()'不推荐这种
   • 多个时，给它赋值一个标识符 var time1 =
   • 回调函数setTimeout(fn, 30)；30秒后调用函数fn element.onclick = function(){}和监听事件都可以用
2. 停止setTimeout()定时器：clearTimeout(timeoutID)
3. setInterval(调用函数，[间隔毫秒数]) ；用法与setTimeout()相似
4. 停止setInterval()定时器：clearInterval(timer)

   // 全局变量 
   var timer = null;
   begin.addEventListener('click', function(){
   	timer = setInterval(...)
   })
   

this指向问题

1. 一般情况this的最终指向调用它的对象
2. 全局作用域或者普通函数中this指向全局对象window
3. 方法调用中谁调用this指向谁

   // 封装：
   var o = {
   	sayHi:function(){
   		console.log(this); //this指向o这个对象
   	}
   }
   o.sayHi();
   // 点击事件：
   btn.onclick = function(){
   	console.log(this); //this指向btn
   }
   

4. 构造函数中this指向构造函数实例

   function Fun(){
   	console.log(this);//this指向下面的fun实例对象
   }
   var fun = new Fun(0); //Fun()指向fun
   

js执行机制：单线程分为同步和异步

1. 同步任务：在主线程上执行，形成一个执行栈
2. 异步任务：js的异步是通过回调函数实现的
3. 异步有三种：1）普通事件click、resize 2)资源加载load、error 3）定时器setInterval、setTimeout
4. 回调函数加到任务队列
5. 事件循环
   • 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）

BOM三种对象

1. location对象
   • location.herf: 获取或设置整个URL
     • 统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
   • location.search：返回参数
2. location 对象的方法
   • location.assignl()：跟href一样，可以跳转页面 页面后退
   • location.replace()：替换当前页面，因为不记录历史，不能后退
   • location.reload()：刷新
3. navigator对象
   • 属性有：userAgent,客户机——服务器——得到user-agent头部的值，可以判断哪种客户机PC or 移动
4. history对象方法
   • history.back()：后退功能
   • history.forward()：前进功能
   • history.go(参数)：前进为1；后退为-1