JS之BOM

情到浓时终转凉″ 提交于 2019-12-18 20:18:30

           JS语言是BS开发中负责页面动态效果的一种脚本语言,既然如此,自然少不了有关浏览器页面的知识,BOM:浏览器对象模型,涉及到有关JS中操作浏览器页面的一些基本知识。在这里最核心的对象就是window。它包括六大属性,当中这些属性本身也是对象。


通过图中。能够看出来,在window中我们最经常使用的就是window中的document对象即DOM(后面单独总结)。这里仅简单的总结一下有关window对象中的相关方法和使用。

 一、系统对话框

      此方法主要用于与用户交互。起到一个提示用户的作用。在BOM弹出窗体中。主要涉及到三个:

      alert():相当于vb中的msgbox()的最简单形式,被经经常使用于JS中进行測试。

      prompt():输入提示框,类似于inputbox

      confirm():确定和取消,msgbox也能够实现此功能

二、位置和大小

    主要指获取窗体的一个大小和位置。此处须要与DOM中的元素的位置和大小进行区分。

  1、大小 :用来获取浏览器窗体大小

 非IE:

        innerWidth/Height:不包含菜单条,工具栏和边框的大小。仅仅是页面显示部分的大小。

        outerWidth/Height:整个窗体的当前的尺寸,包含菜单条、工具栏和边框。

IE:可利用clientWidth/Height来获取元素的实际大小。这里和DOM中获取元素的大小有非常多关联的地方,后面总结。

   2、位置获取浏览器当前位置。距离左边和顶端的距离。

    非IE:screenLeft/Top

        IE:screenX/Y

这些是最主要的获取窗体的位置和大小的表示,能够和DOM中获取元素尺寸和位置来进行区分比較。一般会在设置元素居中显示时用到,在使用时,要涉及到各个浏览器的兼容问题,另外还可利用moveTo(,),moveBy(,)resizeTo(,) resizeBy()对元素进行移动等。

三、经常用法

         JS是单线程语言。不支持多线程,因此,它提供了两种方法专门儿用于延迟载入和间歇调用

       1、超时调用

         setTimeout(运行的方法。延迟的时间) //含有括号里的两个參数

        哪里能够用得到呢?

        实战:JS中的粘贴(paste)触发事件发生在粘贴到目标区域之前,那么假设想要在粘贴事件之后触发想要运行的方法。此时,我们就能够用到延迟载入来实现此功能。

		var box=function(){setTimeout(alert('粘贴成功。'), 50)}; //默认单位毫秒,事件绑定代码略
  此方法默认返回一个ID值,JS还提供了 clearTimeout()方法可用于取消超市调用,使用时。仅仅需将须要取消方法的ID(返回值)赋给clearTimeout作为參数就可以。                     
 clearTimeout(box);

      2、间歇调用

     setInterval(运行的方法,间歇时间),使用方法同上。同一时候可利用clearInterval()来取消间歇调用。

     3、操作父窗体

     在使用浏览器时,会常常遇到在弹出子窗体中去触发父窗体的情况,JS中open()方法用来打开一个新的子窗体,同一时候,默认父窗体的标识为opener,可在子窗体中加入事件。来触发父窗体对应。

document.onclick = function () {
    opener.document.write('子窗体让我输出的。');
}

总结:以上是有关window对象中最经常使用到的一些基础。在学习这一部分时,要避免与DOM中的一些知识混淆比方获取元素尺寸和大小等。

由于二者非常多属性是能够共用的。比方:location能够获取当前URL。具有导航功能。能够进行页面跳转,此为BOM中的其他对象在寻常我们使用浏览器时便经常常使用到,比方history对象用来查看历史信息等。



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!