专栏首页cwl_Java前端基础-浏览器对象模型

前端基础-浏览器对象模型

第5章 浏览器对象模型

5.1 介绍

浏览器对象模型(Browser Object Model)–英文简称 BOM,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。我们使用JavaScript与浏览器交互的所有内容,均来自 浏览器对象模型

浏览器对象模型的具体实例化对象就是 window 对象;

window 对象下有很多属性和方法,我们前面学过的DOM对象,就是window对象的一个属性,只不过这个属性的值又是一个对象,因此也成为window对象的子对象;

https://developer.mozilla.org/zh-CN/docs/Web/API/Window

5.2 对话框

window.alert() : 显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。

window.prompt() : 显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字.

var s = window.prompt('你觉得很幸运吗?','是的');
console.log(s);

window.confirm() :方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框 。

5.3 页面加载事件

onload

window.onload = function () {
  // 当页面加载完成执行
  // 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行
}

5.4 浏览器控制台

window.console : 返回console对象的引用,该对象提供了对浏览器调试控制台的访问。

Console.clear() : 清空控制台。

Console.error() : 打印一条错误信息

Console.table() : 将数组或对象数据在控制台以表格形式打印

Console.log() : 打印字符串,使用方法比较类似C的printf、PHP的echo等格式输出

5.5 定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数,只执行一次

// 创建一个定时器,1000毫秒后执行,返回定时器的标示
var timerId = window.setTimeout(function () {
  console.log('Hello World');
}, 1000);

// 取消定时器的执行
window.clearTimeout(timerId);

setInterval()和clearInterval()

定时调用的函数,可以按照给定的时间(单位毫秒)周期调用函数

// 创建一个定时器,每隔1秒调用一次
var timerId = window.setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);

window.clearInterval(timerId);

5.6 案例

一起来摇摆

<style>
    #div{
        position: absolute;
    }
</style>
<body>
    <input type="button" value="摇起来" id="btn1">
    <div id="div">
        <img src="/img/c2.jpg" style="width: 50px;height: 50px;" alt="">
        <img src="/img/c3.jpg" style="width: 50px;height: 50px;" alt="">
    </div>
</body>
<script>
    var b1 = document.getElementById('btn1');
    var b2 = document.getElementById('btn2');

    b1.onclick = function(){
        
        if(this.value != '停止'){
            this.value = '停止';
            var d = document.getElementById('div');
            c = window.setInterval(function(){
                d.style.left = parseInt(Math.random() * 100 +1) + 'px'
                d.style.top = parseInt(Math.random() * 100 +1) + 'px'
            },50);
        }else{
            this.value = '摇起来';
            clearInterval(c);
        }
    }
</script>   

眼看着图片就这个飞走了

<style>
    #div{
        position: absolute;
    }
</style>
<body>
    <input type="button" value="摇起来" id="btn1">
    <div id="div">
        <img src="/img/c2.jpg" style="width: 50px;height: 50px;" alt="">
    </div>
</body>
<script>
    var b1 = document.getElementById('btn1');
    b1.onclick = function(){
        var d = document.getElementById('div');
        window.setInterval(function(){
            var s = parseInt(getComputedStyle(d)['top']);
            var l = parseInt(getComputedStyle(d)['left']);
            // console.log(l);
            d.style.top = s-1+'px';
            d.style.left = l+5+'px';
        },50)
    }
</script> 

5.7 location对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Location

window.location 只读属性,返回一个 Location对象,其中包含有关文档当前位置的信息;

URL

统一资源定位符 (Uniform Resource Locator, URL)

URL的组成:

scheme://host:port/path?query#fragment
scheme:通信协议
	常用的http,ftp,maito等
host:主机
	服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
	整数,可选,省略时使用方案的默认端口,如http的默认端口为80。
path:路径
	由零或多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
query:查询
	可选,用于给动态网页传递参数,可有多个参数,用'&'符号隔开,每个参数的名和值用'='符号隔开。例如:name=zs
fragment:信息片断
	字符串,锚点.

console.log(location);

页面跳转

location.href = 'http://qq.com'

5.8 history对象

https://developer.mozilla.org/zh-CN/docs/Web/API/History

history.back() : 前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法

history.forward() : 在浏览器历史记录里前往下一页,用户可点击浏览器左上角的前进按钮模拟此方法

history.go() : 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如:参数为-1的时候为上一页,参数为1的时候为下一页.

5.9 navigator对象

https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator

userAgent : 通过userAgent可以判断用户浏览器的类型

platform : 通过platform可以判断浏览器所在的系统平台类型.

geolocation : 位置定位对象;

参考: https://developer.mozilla.org/zh-CN/docs/Web/Reference/API

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java工具集-数学(反比例函数)

    cwl_java
  • 前端基础-JSON

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    cwl_java
  • 经典面试题-列举JSP的内置对象,同一应用中页面有哪些方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • 第187天:js基础---常见的Bom对象

    BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统...

    半指温柔乐
  • Lombok插件

    在有lombak的目录下按住shift右键打开窗口,输入java -jar 包名即可

    木瓜煲鸡脚
  • 比特币与130多种山寨币的数字货币开源交易库CCXT(CryptoCurrency eXchange)

    CCXT(CryptoCurrency eXchange)交易库,一个JavaScript/Python/PHP加密货币交易库,支持超过100种山寨币与比特币交...

    笔阁
  • openstack上创建vm实例后,状态为ERROR问题解决

    问题说明: 在openstack上创建虚拟机,之前已顺利创建了n个centos6.8镜像的vm 现在用ubuntu14.04镜像创建vm,发现vm创建后的状态为...

    洗尽了浮华
  • Python3.6.5标准库文档(完整中文版)—内置函数(四)

    本文主要介绍Python3.6.5标准库文档(完整中文版)---内置函数:delattr(),dict(),dir(),divmod()

    python鱼霸霸
  • Windows Phone Dev Notes-关于WP7 OS 7.0和7.1的加速度传感器数据获取方法差异

    问题描述     对于加速度传感器,数据获取是一个最基本的事件。但是OS 7.0和OS7.1版本有所差异。这个问题源于中文技术论坛上的一个帖子:关于Accele...

    ShiJiong
  • history命令使用方法详解

    history是一条非常实用的shell命令,可以显示出之前在shell中运行的命令,配合last显示之前登录的用户,就可以追溯是哪个用户执行了某些命令。以下详...

    三丰SanFeng

扫码关注云+社区

领取腾讯云代金券