实用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>

3、location 对象

它是window对象和document对象的属性，用来分析和设置页面的URL地址。

常用方法示例：

//类似document的URL属性
            location.href="http://baidu.com";

            //重新加载页面
            location.reload(true);

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学了要会用，要能用上，而不是写个简单的注册事件都要百度，这样效率太低，也太不专业了。