BOM的介绍

JavaScript基础分为三个部分：

  • ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

  • DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

  • BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

什么是BOM

BOM：Browser Object Model，浏览器对象模型。

BOM的结构图:

从上图也可以看出：

  • window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

  • DOM是BOM的一部分。

window对象：

  • window对象是JavaScript中的顶级对象。

  • 全局变量、自定义函数也是window对象的属性和方法。

  • window对象下的属性和方法调用时，可以省略window。

下面讲一下 BOM 的常见内置方法和内置对象。

弹出系统对话框

比如说，alert(1)是window.alert(1)的简写，因为它是window的子方法。

系统对话框有三种：

    alert();    //不同浏览器中的外观是不一样的

    confirm();  //兼容不好

    prompt();   //不推荐使用

打开窗口、关闭窗口

1、打开窗口：

window.open(url,target)

参数解释：

  • url：要打开的地址。

  • target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--行间的js中的open() window不能省略-->

        <button onclick="window.open('https://www.luffycity.com/')">路飞学城</button>

        <button>打开百度</button>

        <button onclick="window.close()">关闭</button>

        <button>关闭</button>

    </body>

    <script type="text/javascript">

        var oBtn = document.getElementsByTagName('button')[1];

        var closeBtn = document.getElementsByTagName('button')[3];

        oBtn.onclick = function(){

                      //open('https://www.baidu.com')

            //打开空白页面

            open('about:blank',"_self")

        }

        closeBtn.onclick = function(){

            if(confirm("是否关闭？")){

                close();

            }

        }

    </script>

</html>

location对象

window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。

location对象的属性

  • href：跳转

  • hash 返回url中#后面的内容，包含#

  • host 主机名，包括端口

  • hostname 主机名

  • pathname url中的路径部分

  • protocol 协议 一般是http、https

  • search 查询字符串

location.href属性举例：

举例1：点击盒子时，进行跳转。

<body>

<div>smyhvae</div>

<script>

    var div = document.getElementsByTagName("div")[0];

    div.onclick = function () {

        location.href = "http://www.baidu.com";   //点击div时，跳转到指定链接

 //     window.open("http://www.baidu.com","_blank");  //方式二

    }

</script>

</body>

举例2：5秒后自动跳转到百度。

有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例：

<script>

    setTimeout(function () {

        location.href = "http://www.baidu.com";

    }, 5000);

</script>

location对象的方法

location.reload()：重新加载

setTimeout(function(){

         //3秒之后让网页整个刷新

    window.location.reload();

},3000)

navigator对象

window.navigator 的一些属性可以获取客户端的一些信息。

  • userAgent：系统，浏览器)

  • platform：浏览器支持的系统，win/mac/linux

例子：

    console.log(navigator.userAgent);

    console.log(navigator.platform);

history对象

1、后退：

  • history.back()

  • history.go(-1)：0是刷新

2、前进：

  • history.forward()

  • history.go(1)

用的不多。因为浏览器中已经自带了这些功能的按钮：

15-BOM的更多相关文章

  1. 15 BOM的介绍

    avaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比 ...

  2. JavaScript基础四

    1.13 Js中的面向对象 1.13.1 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或 ...

  3. 前端语言之js(对比python快速入门)

    昨日内容回顾 浮动 定位 溢出 透明度 模态框 今日内容概要 变量与常量 基本数据类型 数据类型内置方法 函数 常见内置对象 BOM与DOM操作 内容详细 1.变量与常量 # 在JS中声明变量需要使用 ...

  4. javascript BOM对象 第15节

    <html> <head> <title>浏览器对象</title> <script type="text/javascript&quo ...

  5. 7月15日学习之BOM

    setTimeout() //延时器,只执行一次代码 clearTimeout() //清除演示器 setIntervla() //定时器,根据指定时间间隔执行一次代码 clearInterval() ...

  6. BOM （Browser Object Model） 浏览器对象模型

    l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存 ...

  7. 4、BOM编程/正则表达式

    1.    BOM编程 1.1. BOM编程基础 全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行jav ...

  8. js常用内置对象、Dom对象、BOM对象

    11.html元素事件属性中,如onclick="",双引号里可以是方法条用,可以是js代码(无需加<script>标签) 12.JavaScript内置 对象.属性和 ...

  9. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

  10. 字符编码笔记：ASCII、Unicode、UTF-8、UTF-16、UCS、BOM、Endian

    转载:http://witmax.cn/character-encoding-notes.html 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问 ...

随机推荐

  1. 微信小程序填坑之路

    图片处理 三个小方法仅供参考1.将图片转成base64编码,可以使用代码来转换,当然我才不愿意特意写代码转,我懒,献上一个在线图片转base64的地址:http://tool.css-js.com/b ...

  2. 队列 和 线程 之GCD dispatch

    1.dispatch_queue_create  创建队列开启异步线程(1,4,2,3) // 创建一个队列 dispatch_queue_t queue = dispatch_queue_creat ...

  3. Vue filter-v-for 使用

    var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", &quo ...

  4. python tcp 粘包问题解决、文件下载等

    from socket import * #以下是关于tcp:服务端 和 客户端的小例子#服务端socket_server = socket(AF_INET, SOCK_STREAM) socket_ ...

  5. jQuery Dom对象操作 增、删、改、复制、包裹

    1. 增(插入) 内部插入 //向每个匹配的元素内部追加内容,为最后一个子元素$('.violet').append('<div></div>'); //把所有匹配的元素追加到 ...

  6. PAT 1039 到底买不买（20）（20 分）

    1039 到底买不买(20)(20 分) 小红想买些珠子做一串自己喜欢的珠串.卖珠子的摊主有很多串五颜六色的珠串,但是不肯把任何一串拆散了卖.于是小红要你帮忙判断一下,某串珠子里是否包含了全部自己想要 ...

  7. 全基因组测序 Whole Genome Sequencing

    全基因组测序 Whole Genome Sequencing 全基因组测序(Whole Genome Sequencing,WGS)是利用高通量测序平台对一种生物的基因组中的全部基因进行测序,测定其 ...

  8. Unknown type name 'NSString' 解决方案

    今天看到个问题,编辑工程提示Unknown type name 'NSString',如下图 导致出现异常的原因是是因为工程中添加了ZipArchive(第三方开源解压缩库) 一般情况下出现“Unkn ...

  9. ubuntu增加工作分区命令

    参考自: https://www.cnblogs.com/wolflowhereu/p/5422653.html ubuntu增加工作分区(workspace)命令 dconf write  /org ...

  10. maven3 学习

    主要参考博文:http://www.cnblogs.com/yjmyzz/p/3495762.html 修正: 1.下载maven 3.1.1 先到官网http://maven.apache.org/ ...