经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
JavaScript 14 BOM
来源:cnblogs  作者:筱宇衡  时间:2021/6/15 9:10:59  对本文有异议

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

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

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

  1. var a = 10;
  2. console.log(window.a);
  3. 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()   闹钟一样,隔一段时间执行,且会重复执行

 

  1. <input type = 'button' value = '按钮' id = 'btn' >
  2. <input type = 'button' value = '按钮' id = 'btn2' >
  3. <script>
  4. //定时器默认有个返回值,是定时器的标示
  5. var timerId;
  6. var btn = document.getElementById('btn');
  7. btn.onclick = function(){
  8. timerId = setTimeout(function(){console.log('爆炸了');},3000)
  9. }
  10. var btn2 = document.getElementById('btn2');
  11. btn2.onclick = function(){
  12. //取消定时器执行
  13. clearTimeout(timerId);
  14. }
  15. </script>

 

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

  1. <div id="box" ></div>
  2. <input type="button" value="delete" id="btn">
  3. <script type="text/javascript">
  4. var box = document.getElementById('box');
  5. var btn = document.getElementById('btn');
  6. btn.onclick = function(){
  7. box.style.display = 'block';
  8. setTimeout(function(){
  9. box.style.display = 'none';
  10. },3000)
  11. }
  12. </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端,以此来显示页面的大小尺寸等

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号