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

第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

发布了2133 篇原创文章 · 获赞 2370 · 访问量 22万+
App 阅读领勋章
微信扫码 下载APP
阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 成长之路 设计师: Amelia_0503

分享到微信朋友圈

×

扫一扫,手机浏览