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)

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

前端 ---BOM的介绍的更多相关文章

  1. 前端——BOM与DOM

    目录 前戏 window对象 window的子对象 navigator对象(了解即可) screen对象(了解即可) history对象(了解即可) location对象 弹出框 计时相关 DOM H ...

  2. Sublime Text前端开发工具介绍

    Sublime Text前端开发工具介绍.. Sublime Text这款前端开发工具中的非常优秀的特性进行介绍 ------------ sublime text 3 3114 注册码 —– BEG ...

  3. [原创]H5前端性能测试工具介绍

    [原创H5前端性能测试工具介绍 一 网络抓包工具 网络抓包工具选择原则,可以捕获网络请求,抓取具体请求信息流,同时可以针对网络请包进行修改或拦截: 1.Fiddler(推荐) 2.Charles(推荐 ...

  4. 前端路由vue-router介绍

    一.前端路由vue-router介绍 Vue-Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模 ...

  5. 4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍

    4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍 天涯明月笙 关注 2018.02.20 19:23* 字数 762 阅读 135 ...

  6. Vue.js教程 1.前端框架学习介绍

    Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...

  7. 优秀网站看前端 —— 小米Note介绍页面

    刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的 ...

  8. web前端开发教程系列-1 - 前端开发编辑器介绍

    目录: 前言 一. Webstorm 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 二. SublimeText 1. 优点 2. 缺点 3. 教程 4. 插件 5. 技巧 前言 由于很 ...

  9. 使用Fiddler提高前端工作效率 (介绍篇)

    1. Fiddler 是什么? Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器.英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让 ...

随机推荐

  1. python位运算

    什么是位运算 位运算就是把数字当成二进制来进行计算,位运算有六种:&(与), |(或), ^(异或), ~(非), <<(左移), >>(右移) &(与) &a ...

  2. Sql显示16进制

    select cast(id as varbinary(4)) from tableTest

  3. DevExpress 之 GridControl 自定义列

    Ø  前言 DevExpress 控件大家应该都有所了解,使用这个框架实现B/S或C/S的,都是非常出色的.本文主要讨论下 GridControl 中如何[自定义列]或[计算列],可使用以下两种方法实 ...

  4. error: Microsoft Visual C++ 14.0 is required. Get it with "Microsoft Visual C++ Build Tools": http://landinghub.visualstudio.com/visual-cpp-build-tools

    解决方案 1. http://www.lfd.uci.edu/~gohlke/pythonlibs/#twisted 下载twisted对应版本的whl文件(我的Twisted‑17.5.0‑cp36 ...

  5. redis的常用命令及实例讲解

    使用命令行操作redis 数据类型 字符串String 列表list 使用双向循序链表实现(LinkedList) 散列 Hash 一般应用于将redis作为分布式缓存,存储数据库中的数据对象 集合s ...

  6. Mac OSX常用工具

    换Mac有几个月了,刚换的那个月折腾了整整一个月,初用OSX很不适应,这是一种错觉,就好比说了十几年汉语,突然说英语肯定很别扭,适应后就会觉得英语更加实用. Life weiboX(http://we ...

  7. oracle 问题查找 error ora-

    Error ORA-03113: 通信通道的文件结尾进程 ID: 2232会话 ID: 1250 序列号: 这是oracle 报的错误, 可能这个03113这个编码的错误有很多. 但是要找到是什么原因 ...

  8. Linux修改MAC地址方法

    Linux修改MAC地址方法 - Linux modifies MAC address method ifconfig wlan0 down ifconfig wlan0 hw ether MAC地址 ...

  9. 数组B：我想我需要一艘船屋

    Fred Mapper is considering purchasing some land in Louisiana to build his house on. In the process o ...

  10. [C++]PAT乙级1012.数字分类 (20/20)

    /* 1012. 数字分类 (20) 给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字: A1 = 能被5整除的数字中所有偶数的和: A2 = 将被5除后余1的数字按给出顺序进行交错求和, ...