VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > 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


相关教程