首页 > 代码库 > 实用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>



      3、location 对象

它是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常用对象