JavaScript 14 BOM

293 0 0

作者:筱宇衡

BOM（Browser Object Model）是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM是由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象

浏览器的顶级对象是window，当我们用的是window的成员的时候，window可以省略。比如window.alert() ----->　alert（）

定义的全局变量都属于window，都是window对象的属性

var a = 10;
console.log(window.a);
console.log(a);

window的属性：console.dir(window);

慎用window中的属性当作变量名，比如name

三种对话框：

alert()

prompt()

confirm()

页面加载事件：

onload 页面内容全部加载完成之后执行　　页面加载完成：页面上所有的元素创建完毕，并且引用的外部资源下载完毕（js，css，图片）。当js标签写在body内部的最后时，浏览器js和css加载完毕，而图片尚未加载

onload = function(){……}

//页面卸载的时候执行

onunload = function(){……}　　在onunload中，所有的对话框都无法使用window对象，被冻结了。而且所有对话框(三种)都无法使用，会报错

页面刷新：先卸载页面再重新加载页面

定时器：

setTimeout()　　定时炸弹一样，隔一段时间执行，且只会执行一次。倒计时，清除：clearTimeout

setInterval()　　闹钟一样，隔一段时间执行，且会重复执行

<input type = 'button' value = '按钮' id = 'btn' >
<input type = 'button' value = '按钮' id = 'btn2' >
<script>
//定时器默认有个返回值，是定时器的标示
var timerId;
var btn = document.getElementById('btn');
btn.onclick = function(){
    timerId = setTimeout(function(){console.log('爆炸了');}，3000)
}
var btn2 = document.getElementById('btn2');
btn2.onclick = function(){
//取消定时器执行
    clearTimeout(timerId);
}
</script>

执行删除提示三秒自动消失：

<div id="box" ></div>
<input type="button" value="delete" id="btn">
<script type="text/javascript">
var box = document.getElementById('box');
var btn = document.getElementById('btn');
btn.onclick = function(){
    box.style.display = 'block';
    setTimeout(function(){
        box.style.display = 'none';
    },3000)
}
</script>

location对象：获取或者设置浏览器地址栏的URL

location对象是window下的一个属性，所以使用的时候可省略window对象

跳转：

location.herf = 'http://www.baidu.com';

location.assign('http://www.baidu.com');　　//assign委派

location.replace( 'http://www.baidu.com');　　//替换地址之后无法返回原页面（不记录历史）

reload和F5一样，F5刷新页面，可能从缓存中加载， control+F5迁至刷新，从服务器获取页面

location.reload()　　//重新加载　　　　，reload有一个参数true/false，true强制从服务器获取页面，false如果浏览器有缓存的话，直接从缓存获取页面

URL组成部分都是location的属性：scheme://host:port/path?query#fragment　　//协议+主机 +端口+路径+查询+锚点

history：window下的对象，可通过按钮点击实现页面的前进后退功能。和浏览器上面的箭头前进后退一样

navigator.userAgent：该属性主要用于判断用户操作系统浏览器信息。判断是手机还是pc端，以此来显示页面的大小尺寸等

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/xiaoyuheng/p/14882352.html

标签： javascript 技术文章开发

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

JavaScript 14 BOM