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

时间: 2024-12-10 22:24:31

实用JS系列——BOM常用对象的相关文章

Js基础之常用对象

今天来总结一下js中的常用对象: 1.string对象 常用方法: charAt():返回在指定位置的字符. charCodeAt():返回在指定的位置的字符的 Unicode 编码. concat():连接字符串. fromCharCode():从字符编码创建一个字符串. String indexOf():检索字符串,返回字符串出现的位置,如果没有找到,返回-1. lastIndexOf():从后向前搜索字符串,返回字符串出现的位置,如果没有找到,返回-1 . split():把字符串分割为字

BOM常用对象

1.BOM的常用对象: window  navigator history location dicument screen event navigator:保存浏览器配置信息的对象 cookicEnablcd:判断是否启用cookic userAgent:判断浏览器的名称和版本号 plugins:保存浏览器中所有插件信息的集合 screen:保存显示屏幕的对象信息 history:保存当前的历史记录栈 history.go(-1):后退 history.go(1):前进一次 history.g

实用JS系列——事件类型

事件就是用户对窗口上各种组件的操作.JS中的事件中的事件即由访问Web页面的用户引起的一系列的操作.一般用于浏览器和用户操作进行交互,例如:用户的单击事件等. 类型分为: 内联模型.脚本模型和DOM2模型. 1.内联模型 先看两个内联模型的例子: //示例1 <input type="button" id="button1" value="Test" onclick="alert('Hello World!')" /&g

你不知道的JS系列 ( 33 ) - 对象复制

JS 初学者最常见的问题之一就是如何复制一个对象.看起来应该有一个内置的 copy() 方法,实际上比想象中的更复杂,我们无法选择一个默认的复制算法 function anotherFunction(){/** ... */}; var anotherObject = { c: true }; var anotherArray = []; var myObject = { a: 2, b: anotherObject, // 引用,不是复本! c: anotherArray, // 另一个引用

你不知道的JS系列 ( 39 ) - 对象遍历

for 循环可以遍历数组 var myArray = [1,2,3]; for(var i=0; i<myArray.length; i++) { console.log(myArray[i]) } // 1 2 3 ES5 增加了数组的辅助迭代器,包括 forEach(...).every(...).some(...) forEach(...) 会遍历数组中的所有值并忽略回调函数的返回值 every(...) 会一直运行直到回调返回 false some(...) 会一只运行直到回到函数返回

DOM_04之常用对象及BOM

1.添加:①var a=document.createElement("a"):②设置关键属性:③将元素添加到DOM树:a.parent.appendChild(a):b.parent.insertBefore(a,old):c.parent.replaceChlid(a,old): 2.优化:尽量少的操作DOM树,①如果同时添加父元素与子元素,应在内存中先将子元素拼到父元素下,再将父元素添加到DOM树:②如果添加多个平级子元素,应先将所有子元素放入文档片段,再将文档片段一次性添加到D

JS原生系列-BOM篇

我们已经学习了DOM,文档对象模型,我们的主要处理都是在这个模型基础上工作的,同样我们还有可能对浏览器进行一些操作,如: 1.检测浏览器的类型和版本 2.检测是pc还是移动设备 3.根据条件,进行页面的自动跳转 4.打开一个新的窗口,存放指定链接 5.关闭窗口 6.返回到上一个页面 7.获取地址栏信息,进行处理 等... 我们来学习,并且逐个实现上面的处理 (一)screen对象,Screen 对象中存放着有关显示浏览器屏幕的信息. 代表屏幕对象,获取屏幕信息,并不是浏览器 availHeigh

js的常用对象和方法

1.上节课内容回顾  * html里面form表单     * css     * javascript 2.内容补充  1.js和html两种结合方式   * 使用外部文件方式   * <script type="text/javascript" src="1.js">不能写js代码</script>    2.padding:内边距   * padding: 20px;   * 另外一种设置方式:   /*    设置内边距    按照顺

JavaScript基础16——js的BOM对象

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的BOM对象</title> 6 <script type="text/javascript"> 7 // BOM:Broswer Object Model 浏览器对象模型 8 /* 9 navifator 获取客户端(浏览器)的信息 10