15-BOM

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的更多相关文章

15 BOM的介绍
avaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比 ...
JavaScript基础四
1.13 Js中的面向对象 1.13.1 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或 ...
前端语言之js(对比python快速入门)
昨日内容回顾浮动定位溢出透明度模态框今日内容概要变量与常量基本数据类型数据类型内置方法函数常见内置对象 BOM与DOM操作内容详细 1.变量与常量 # 在JS中声明变量需要使用 ...
javascript BOM对象第15节
<html> <head> <title>浏览器对象</title> <script type="text/javascript&quo ...
7月15日学习之BOM
setTimeout() //延时器,只执行一次代码 clearTimeout() //清除演示器 setIntervla() //定时器,根据指定时间间隔执行一次代码 clearInterval() ...
BOM （Browser Object Model）浏览器对象模型
l对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法; // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存 ...
4、BOM编程/正则表达式
1. BOM编程 1.1. BOM编程基础全称 Browser Object Model,浏览器对象模型. JavaScript是由浏览器中内置的javascript脚本解释器程序来执行jav ...
js常用内置对象、Dom对象、BOM对象
11.html元素事件属性中,如onclick="",双引号里可以是方法条用,可以是js代码(无需加<script>标签) 12.JavaScript内置对象.属性和 ...
JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...
字符编码笔记：ASCII、Unicode、UTF-8、UTF-16、UCS、BOM、Endian
转载:http://witmax.cn/character-encoding-notes.html 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问 ...

随机推荐

BOM浏览器对象模型；
1.window.open(url,ways) url是打开的网页地址 ways是打开方式(-blank:-self) 2.window.close()关闭窗口 3.浏览器的用户信息 window.n ...
27.MySQL备份与恢复
27.备份与恢复27.1 备份/恢复策略考虑因素:备份表的存储引擎(事务性or非事务性):全备份or增量备份用复制做异地备份定期备份,考虑恢复时间确保mysql打开log-bin,有了BINLOG,M ...
Gulp应用场景
转自:Gulp教程之:Gulp能做什么,前端装逼为何要用它我们先说说平时web开发遇到的一些场景和苦恼无奈的情况: JavaScript和CSS的版本问题我们都知道 JavaScript ...
DOM心得
一.自定义属性值两种方法的注意事项 1.用元素节点.属性(元素节点[属性])绑定的属性值不会出现在标签上. 2.用get/set/removeAttribut(,)等绑定的属性会出现在标签上.且两种方 ...
SSH原理与运用（一）：远程登录（转）
作者: 阮一峰日期: 2011年12月21日 SSH是每一台Linux电脑的标准配置. 随着Linux设备从电脑逐渐扩展到手机.外设和家用电器,SSH的使用范围也越来越广.不仅程序员离不开它,很 ...
VS2010配置OpenGL开发环境
OpenGL(Open Graphics Library)是一个跨编程语言.跨平台的专业图形程序接口.OpenGL是SGI公司开发的一套计算机图形处理系统,是图形硬件的软件接口,任何一个OpenGL应 ...
[ES]ES集群内容灾
ES是如何实现节点容灾的? 1. ES中的index,首先会进行分片,每一个分片数据一般都会有自己的副本数据,ES分配分片的策略会保证同一个分片数据和自己的副本不会分配到同一个节点上2. 当集群中的某 ...
.net中反射技术的应用
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Ref ...
walsh矩阵
矩阵A(1) 1 矩阵A(2) 1 1 1 -1 矩阵A(2n) 由上一级矩阵组合,即用上一级矩阵的一行生成本级矩阵的一行. 生成规则是 A(2n)[k] = { A(n)[k], A(n)[k] ...
EasyUI DataGrid 获得分页信息
var b = $('#SBDiv_1_DateGrid').datagrid('options'); console.info(b); 具体需要哪些字段,可以通过火狐debug,然后自己找需要的信息 ...