首页 > 代码库 > 实用JS系列——BOM常用对象
实用JS系列——BOM常用对象
背景:
最近在着手项目的时候,意识到自己JS的欠缺。虽然看了不少JavaScript的视频,但真正项目中并不是经常遇到大且难的例子。所以JavaScript的基础还需要再打扎实,也就有了这一系列博客。这一系列更重视实用,理论部分可参看之前博客。
BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM。
由图中可看出,window对象是BOM中所有对象的父对象。
1、window对象——BOM核心
window,顾名思义,窗口对象。
它表示整个浏览器窗口,主要用来操作浏览器窗口。
对窗口的操作主要是对坐标的调整,屏幕的坐标如下图所示:
常用的方法有:
1)相对操作
moveBy——移动
resizeBy——调整大小
2)绝对操作
moveTo
resizeTo
2、document 对象
它是window对象的一个属性,可以用来处理页面文档,但很多功能已不推荐使用。
常用方法示例:
<script type="text/javascript"> function test() { //导航到新页面 document.URL = "http://www.baidu.com" //输出内容 document.write(document.URL); //window.document.write(document.URL)作用相同 } </script>
它是window对象和document对象的属性,用来分析和设置页面的URL地址。
常用方法示例:
//类似document的URL属性 location.href=http://www.mamicode.com/"http://baidu.com";>4、navigator 对象
被认为是最重要的对象,它包含了一系列浏览器信息的属性。
userAgent是最常用的属性,用来完成浏览器判断。
var auserAgent = navigator.userAgent; document.write(auserAgent);
显示结果:
5、screen 对象
也是window对象的属性之一,主要用来获取用户的屏幕信息。
常用方法示例:
document.write("屏幕的高度是:"+ screen.availHeight+" "+"屏幕的宽度是:"+screen.availWidth);
显示结果:
总结:
JavaScript是基础。JavaScript学不好,而直接去用JQuery中提供的函数的话,就有一种知识架空的感觉。知其然,不知其所以然。Js也可帮助你理解看懂Ajax,因此,JS学了要会用,要能用上,而不是写个简单的注册事件都要百度,这样效率太低,也太不专业了。
实用JS系列——BOM常用对象