首页 > temp > JavaScript教程 >
-
JavaScript 14 BOM
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