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. 26- java的String 转json

    https://www.cnblogs.com/nihaorz/p/5885307.html Gjson 下载:https://download.csdn.net/download/qq_394515 ...

  2. .NET通用工具——正则表达式

    正则表达式就是一组字符串运算规则,你需要先把元字符记熟,然后就可以随意组合获得你想要的结果.把一些常用的正则表达式背下来也是一种方法,再加以变化获得你想要的结果. 正则表达式不需要刻意的去学习,当用到 ...

  3. jar导入本地maven库

    最近在了解视频监控相关sdk,海康威视官方sdk要求自己手工将fas-data-sdk-1.0-SNAPSHOT.jar导入本地maven库,maven配置文件pom.xml配置如下 <?xml ...

  4. Java开发MIS系统需要的技术及其作用

    1.后台框架部分,常用spring.struts2(Struts2框架,提供了一种基于MVC体系结构的工程序的开发方法,具有组件模块化.灵活性和重用性等优点,使基于MVC模式的程序结构更加清晰,同时也 ...

  5. 自定义标签tld的使用

    在JSP中使用标签是很平常的事情,在制作自定义标签时,通常都需要写tld文件来定义标签的各种属性,对应的Java类,前缀等等.标签与tld文件紧紧相连,那么,到底应该怎么放置tld文件?在web.xm ...

  6. PAT 1013 数素数 (20)（代码）

    1013 数素数 (20)(20 分) 令P~i~表示第i个素数.现任给两个正整数M <= N <= 10^4^,请输出P~M~到P~N~的所有素数. 输入格式: 输入在一行中给出M和N, ...

  7. Codeforces559C Gerald and Giant Chess

    一道计数类\(DP\) 原题链接 我们可以先计算从左上角到右下角总的路径,再减去经过黑色方格的路径即是答案. 总路径数可以用组合数直接计算:\(C_{H+W-2}^{H-1}\) 因为从左上角到右下角 ...

  8. spring 的 ApplicationContext.getBean(type) 无法获取bean,报错

    具体问题请看   https://q.cnblogs.com/q/108101/ 研究了两天: 经过上文中的排除法: 造成问题的原因是要获取的bean 中 有被切入的方法.. 就是可能该类会使用反射生 ...

  9. solr之创建core（搜索核心，包括索引和数据）的方法

    我的solrhome为D:\solrHome\solr step1:进入solrHome会看到collection1文件夹,创建该文件夹的副本,重命名为product 进入product文件夹,进入d ...

  10. 【Linux】 Ncures库的介绍与安装

    Ncures库的介绍 ncurses(new curses)是一套编程库,它提供了一系列的函数以便使用者调用它们去生成基于文本的用户界面. ncurses名字中的n意味着“new”,因为它是curse ...