zoukankan      html  css  js  c++  java
  • JS之BOM

               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对象用来查看历史信息等。



  • 相关阅读:
    Promise简单使用,需要在ES6以上
    uni-app条件编译:#ifdef #ifndef #endif
    js获取年月日
    js验证手机号、身份证等
    json.stringify()与json.parse()
    Vuex基本使用的总结--转载
    ...mapMutations前面的三个点什么意思
    制作缩略图、远程缩略图
    node整个环境的启动
    redis命令
  • 原文地址:https://www.cnblogs.com/yxysuanfa/p/6856306.html
Copyright © 2011-2022 走看看