BOM中常用的对象、事件、及方法

BOM

1. BOM的概念

• 浏览器对象模型，对象是window
• window是js的顶层对象
• window作为窗口对象，提供了浏览器窗口与窗口之间的操作
• window拥有一些子对象

2. window是对象，对象拥有自身的方法(内置全局函数)

• parseInt()

• parseFloat()

• alert()

• prompt()

• confirm()

• open()

• close()

• 不要直接执行，最好配合行为

3. window是浏览器窗口，浏览器事件，window的事件

• load：浏览器加载完成（页面(html+css)和资源(引入的外部)）
• scroll：页面滚动
  • 兼容html5的DOCTYPE
    • document.documentElement.scrollTop;
    • document.documentElement.scrollLeft;
  • 兼容低版本html的DOCTYPE
    • var scrollL = document.body.scrollLeft;
    • var scrollL = document.body.scrollTop;
• resize：页面改变大小
  • 兼容html5的DOCTYPE
    • document.documentElement.clientWidth;
    • document.documentElement.clientHeight;
  • 兼容低版本html的DOCTYPE
    • var clientH = document.body.clientWidth;
    • var clientH = document.body.clientHeight;

4. window身上一些常用的子对象

window的子对象
location
	 href
	search
	 hash
	reload()
	assign()
- history
	 length
	 back()
	 forward()
	 go(n)
     ...

• location：地址栏

  • 属性：既可以获取又可以设置，设置会引发跳转
    • location.href完整url
    • location.search查询数据部分（想后台发送的get数据）
    • location.hash锚点链接部分（哈希值）
  • 方法
    • location.reload(布尔值)刷新页面
      • 是否读取缓存
    • location.assign(“http://www.baidu.com”)跳转到…

• history：历史记录(前进后退刷新按钮)

  • 属性
    • history.length历史记录的个数（长度）
  • 方法
    • history.back();后退一步（后退）
    • history.forward();前进一步（前进）
    • history.go(n);正：前；负：后；0：刷新

• navigator:对象包含有关访问者浏览器的信息。

• frames: 属性返回窗口中所有命名的框架。

  • 使用 frames.length 来获取框架的数量。
  • :该属性也可用于 元素，但是 HTML5 不支持 元素。

• screen: 对象包含有关客户端显示屏幕的信息。

5. 计时器 - 也是window身上的方法

• 定时器 - 每隔指定时间执行一次，根据需要手动清除
  • setInterval(参数1, 参数2)
    • 参数1：函数
    • 参数2：毫秒数
    • 功能：每隔指定参数2时间执行一次参数1
    • 返回值：当前计时器的唯一标志，数值型数据，表示当前页面上的第几个计时器，用来清除的
  • clearInterval(参数)
    • 参数：要清除的计时器的唯一标志

   var a=10;

   var t = setInterval(function(){
       console.log(a--);
   }, 1000);

   // 二次或多次点击效果
   // 记录鼠标点击的状态：true奇数次，false偶数次
   var type = true;

   document.onclick = function(){
       if(type === true){
           clearInterval(t);
           type = false;
       }else{
           t = setInterval(function(){
               console.log(a--);
           }, 1000);
           type = true;
       }
   }

• 延时器 - 延迟指定事件执行一次，执行结束自动清除，也有手动清除的方法
  • setTimeout(参数1, 参数2)
    • 参数1：函数
    • 参数2：毫秒数
    • 功能：延迟指定参数2时间只执行一次参数1
    • 返回值：当前延时器的唯一标志，数值型数据，表示当前页面上的第几个计时器，用来清除的
  • clearTimeout(参数)
    • 参数：要清除的延时器的唯一标志

    var t = setTimeout(function(){
      console.log(1);
  }, 5000);

document.onclick = function(){
      clearTimeout(t);
  }

• 不管是计时器还是延时器，当前计时器函数都是立即执行，重复或延迟执行的都是参数1的函数