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之间的关系,于是就开始在网上查资料. 结果,这个问 ...

随机推荐

c# 使用ssh.net 上传文件
在ssh.net 客户端实例下无法普通用户切换到su root 超级用户,原因是tty 的不支持,具体原因未查, 连接时用超级用户,问题解决使用ssh.net 能实现远程命令, 使用其中的sf ...
ofo退押金脚本
同事钉钉给的因为押金一直没退,电话很难打进去,咨询客服排队要等好久,一直几千位. 长时间挂机就自动退出客服了,所以自动写了一个脚本,目前已经成功退押金了.所以共享出来 1.关注ofo小黄车订阅号,注 ...
Android开发之动态设置字体的样式和粗细
字体设置通常有两种形式: 1:在xml中直接设置 android:textStyle="bold" android:typeface="sans" 2:用jav ...
PAT 甲级 1023 Have Fun with Numbers（20）（思路分析）
1023 Have Fun with Numbers(20 分) Notice that the number 123456789 is a 9-digit number consisting exa ...
tensorflow.reshap(tensor,shape,name)的使用说明
tensorflow as tf tf.reshape(tensor, shape, name=None) reshape作用是将tensor变换为指定shape的形式. 其中shape为一个列表形式 ...
javascript的变量类型：var、let、const
不同点:可变性,与作用域的关系. 可变性:const定义的变量都不可变,而var和let可以任意更改. const 只能在声明时被初始化一次,之后不允许将全新的值赋值给const变量.但可以修改con ...
使用spec文件语法创建一个rpm
How to create an RPM package/zh-hk < How to create an RPM package 此页面包含 Packaging:ScriptletSnippe ...
iOS.UITableView.SectionIndex
1. 为tableview中section建立索引来加速tableview的滚动. http://nshipster.com/uilocalizedindexedcollation/ 2. 获取汉字的 ...
wcf 使用sqlMembership证书认证
.接口 namespace Aretch.WcfService.Services.Interface { [ServiceContract] public interface ICalculator ...
Minimum Size Subarray Sum LT209
Given an array of n positive integers and a positive integer s, find the minimal length of a contigu ...