微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JavaScript高级程序设计—第八章BOM

1.BOM是浏览器对象模型,也可以理解成javascript在浏览器中的实现,其中BOM的核心对象是window对象,在浏览器中document扮演者多个角色,它既表示浏览器的一个窗口,同时ESMAScript中规定的Global对象,因此document对象包含了parseInt()、parseFloat()等属性,同时在我们声明的全局变量函数等也都是window对象的属性

2.window对象表示浏览器的一个实例,在不使用框架的情况下window对象只有一个,但是如果一个页面中包含多个框架,则每个框架都会拥有自己的window对象。在使用多个框架的情况下,top对象始终指向最外层的对象,而与top对象类似的还有parent对象,始终指向当前框架的直接上层框架。

3.窗口位置:用来获取修改窗口位置的属性有很多,且在不同的浏览器上的实现并不相同,在IE、chrome、safari、opera中可以使用screenLeft和screenTop属性获取,而在fireFox中则需要使用screenX和screenY属性获取,下面是跨浏览器获取窗口位置的代码

不过需要注意的是,由于实现不同,在不同浏览器中即使窗口位置相同,这两个属性返回的值可能并不相同。

4.间歇性调用和超时调用(setInterval和setTimeout函数):
setInterval函数间歇性调用函数,可以指定时间间隔重复执行一段代码,直到间歇调用被取消或页面关闭。setInterval函数接受两个参数,第一个参数是需要执行的代码,这段代码可以是字符串形式(不推荐)或函数形式,第二个参数是时间间隔。setInterval函数会返回一个调用ID,方便取消相应的间歇调用。setInterval函数设置的时间间隔指的是上一次代码开始执行到下一次代码开始执行,因此会忽略代码的执行时间(有可能造成上一次代码还没有执行完,下一次代码已经开始执行了)。

setTimeout函数时超时调用函数,在指定的时间后执行一点代码,与间歇调用类似该函数也接收两个参数,第一个参数是需要执行的代码,第二个参数是延迟执行的时间。setTimeout函数也会返回一个调用ID用于取消相应的调用

调用timeOut1");
  clearTimeout(timeOut2);
},1000);

var timeOut2 = setTimeout(function() {
console.log("调用timeOut2");
},2000);

上面代码只会在一秒后调用timeOut1,由于timeOut2被取消了,因此不会被调用。实际上我们可以使用超时调用来模拟间歇调用,由于间歇调用的后一个调用可能会在前一个调用结束之前启动,因此实际开发中我们也常常会用setTimeout来代替setInterval。

= 0) {
    console.log(number--);
    setTimeout(incrementNumber,1000);
  }
  else {
    console.log("结束");
  }
}

setTimeout(incrementNumber,1000);

setInterval和setTimeout的运行机制:首先javascript是当线程语言,所有的任务实际上都在一个任务队列中进行,上一个任务完成之后才能开始下一个任务。而setInterval和setTimeout都是在指定时间后将任务添加到任务队列的尾部,当前面所有的任务完成之后才能执行。看下面的例子:

在浏览器中运行上面的代码的打印顺序为1->3->2,这是因为setTimeout将要执行的任务添加到了任务队列的尾部,要等到所有的任务完成之后才开始执行。

5.location对象:location对象是BOM中最有用的对象之一,location中包含了当前页面文档的相关信息(协议、域名、端口号等),我们可以操作location对象来操作浏览的位置。

修改整个地址
location.href = "https:www.baidu.com";
location.assign = "https:www.baidu.com";
window.location = "https:www.baidu.com";
// 修改哈希值
location.hash = "#section1";
// 修改参数
location.search = "?id=5";
// 修改域名
location.hostname = "www.baidu.com";
// 修改文件地址
location.pathname = "/public";
// 修改端口
location.port = "8080";

6.navigotor对象:此对象中包含了浏览器相关信息(版本、名称、操作系统、安装插件等),在处理浏览器兼容性问题问题时,必要时可对不同的浏览器进行检测,针对某个浏览器单独编写兼容性代码

7.history对象:此对象包含了页面浏览记录的相关信息,但是编程人员无法直接取得用户的浏览记录,但是可以根据浏览记录进行前进、后退等操作,例如:

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐