欢迎光临
我的个人博客网站

JS——BOM操作


一、BOM介绍

BOM:Browser Object Model,浏览器对象模型。BOM的结构图:

JS——BOM操作

 

从上图可以看出来:

(1)DOM对象也是BOM的一部分

(2)window对象是BOM的顶层(核心)对象

注意:

(1)在调用window对象的方法和属性时,可以省略window,例如:window.document.location可以简写为document.location  (2)全局变量也是windows对象的属性,全局的函数是window对象的方法

二、对象history、navigator、screen

#1、history对象包不包含浏览器的历史 history.back() //后退一页,等同于history.go(-1) history.forward() //前进一页,等同于history.go(1) history.go(0) //0是刷新 用的不多。因为浏览器中已经自带了这些功能的按钮:  #2、navigator对象包含了浏览器相关信息。 navigator.appName  // Web浏览器全称 navigator.userAgent  // 客户端绝大部分信息 navigator.platform   // 浏览器运行所在的操作系统  #3、可以用screen对象得到可用的屏幕宽度和高度 screen.availWidth  //可用的屏幕宽度 screen.availHeight  //可用的屏幕高度

三、localtion对象

location.href  //获取URL location.href="URL" // 跳转到指定页面 location.reload() //重新加载页面

location.href

练习1:点击盒子,跳转页面

<body> <div id="div1">点我一下</div> <script>     var oDiv = document.getElementById('div1');     oDiv.onclick = function () {         window.location.href = 'https://www.baidu.com';     } </script> </body>

练习2:3s后,自动跳转页面

<body> <div>这天下,本就是大争之世,孤的儿子,不仅要争,而且要争的光芒万丈</div> <script>     setTimeout(function () {         location.href = 'https://www.baidu.com';     }, 3000) </script> </body>

练习3:3s后让网页整个刷新

<body> <div>这天下,本就是大争之世,孤的儿子,不仅要争,而且要争的光芒万丈</div> <script>     setTimeout(function () {         location.reload();     }, 3000) </script> </body>

四、弹出系统对话框

alert(1)是window.alert(1)的简写,因为它是window的子方法。  系统对话框有三种:      alert("人丑还不读书,是找不到女朋友的"); //不同浏览器中的外观是不一样的     confirm("你真的要这么做吗小伙子");  //兼容不好     prompt("输入用户名:");   //不推荐使用  # 示例 var x=confirm("你真到要这么做吗") console.log(x)  var username=prompt("输入用户名:") console.log(username);

五、打开关闭窗口

#1、open("url地址","新窗口的位置_blank或者_self","新窗口的特征") window.open("http://www.w3school.com.cn","_blank", "width=400, height=400")  #2、close()关闭当前窗口 var x=window.open("http://www.w3school.com.cn","_blank", "width=400, height=400") x.close()

六、浏览器窗口内部的高度和宽度

window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 

七、 定时器 

#1.setTimeOut() 只在指定时间后执行一次,通常用于延迟执行某方法或功能,  //定时器 异步运行   function say(){       alert("hello");   }   //使用方法名字执行方法   var t1 = setTimeout(hello,1000);   var t2 = setTimeout("hello()",3000); //使用字符串执行方法   clearTimeout(t2); //去掉定时器   #2.setInterval() 在指定时间为周期循环执行,通常用于刷新表单,对于一些表单的假实时指定时间刷新同步,动画效果等。  //实时刷新时间单位为毫秒   var t3 = setInterval(say,3000);    var t4 = setInterval('say()',3000);     clearInterval(t3); clearInterval(t4);

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » JS——BOM操作
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏