• bom的基础知识


    BOM基本介绍

    BOM中大致存在如下几个对象:

    •window:表示窗口对象

    •navigator:包含浏览器相关信息

    •location:包含当前页面的位置信息

    •history :包含用户访问页面的历史信息

    •screen:包含客户端显示能力信息

    •document:表示整个页面

    screen 对象

    height :屏幕的像素高度

    width:屏幕的像素宽度

    availHeight:屏幕的像素高度减去系统部件高度之后的值(只读)

    availWidth:屏幕的像素宽度减去系统部件宽度之后的值(只读)

    left:当前屏幕距左边的像素距离[firefox返回0, chrome和IE不支持]

    top:当前屏幕距上方的像素距离[firefox返回0, chrome和IE不支持]

    availLeft:未被系统部件占用的最左侧的像素值(只读)[chrome和firefox返回0, I E不支持]

    availTop:未被系统部件占用的最上方的像素值(只读)[chrome和firefox返回0, I E不支持]

    bufferDepth:读、写用于呈现屏外位图的位数[IE返回0, chrome和firefox不支持]

    colorDepth:用于表现颜色的位数(只读)[IE8-返回32,其他浏览器返回24]

    pixelDepth:屏幕的位深(只读)[IE8 -不支持,其他浏览器返回24]

    deviceXDPI:屏幕实际的水平DPI(只读)[IE返回96, chrome和firefox不支持]

    deviceYDPI:屏幕实际的垂直DPI(只读)[IE返回96, chrome和firefox不支持]

    logicalXDPI:屏幕逻辑的水平DPI(只读)[IE返回96, chrome和firefox不支持]

    logicalYDPI:屏幕逻辑的垂直DPI(只读)[IE返回96, chrome和firefox不支持]

    updateInterval:读、写以毫秒表示的屏幕刷新时间间隔[IE返回0, chrome和firefox不 支持]

    fontSmoothingEnab:是否启用了字体平滑(只读)[IE返回true, chrome和firefox不支持]

    history对象

    常见属性

    lenght:返回浏览器历史列表中URL的数量

    常见方法:

    back:加载history列表中的前一个URL

    forward:加载history列表中的下一^ URL

    go:加载history列表中的某个具体页面

    window.history.go:方法可以用来导航到指定的页面,0代表是当前页面

    window.histo ry.fo rwa rd():向前一个页面

    window.histo ry.back():回退一个页面

    window 对象

     window对象基本介绍:

    浏览器每打开一个窗口,就包含了一个window对象。window对 象是整个BOM的核心对象,它代表着一个浏览器窗口的实例。

    window对象扮演着在ES中的globa I对象的角色,因此所有在全局作用域中声明的变量以及函数 都会成为该对象的属性和方法。也就是说全局变量是window对象的属性,全局函数是window对 象的方法。

    全局属性和window属性的区别:var和window对象的属性真的就是一模一样么?
    也不是,还是有稍微不同的地方,那就是不能使用delete操作符删除用var声明的变量,但是如 果是window的属性就可以使用delete操作符来进行删除。

    let以及const所声明的变量:还需要注意的是,使用ES6新提供的let和const所声明的变量不会成为window对象的属性

    常见属性:

    窗口大小:inne rWidth , inne rHeight 以及 oute rWidth , oute rHeight 区别在于:inner那一组表示的是页面视图区的大小,而outer那一组表示的是浏览器窗口本身的;不同的浏览器,所表示的值略微有差异。
    我们除了通过inne rWidth , inne rHeight来获取页面视图区的大小以外,还可以通 过 document.documentElement.clientWidth 以
    及document.documentElement.clientHeight来获取页面视图区的大小,

    窗口位置:.窗口位置的属性也是有两组,分别是scr eenLeft和scr eenTop,还有scr eenX和scr eenY
    这两组属性都是表示窗口相对于屏幕左边和上边的位置

    区别在于screenX和screen Y属性最早是火狐浏览器里面特有的属性。但是上面的代码是在谷歌浏 览器里面运行的,可以看到,现在这两组属性在很多浏览器里面都是通用的了。接下来我将上面 两组属性的区别总结成下面的表格

    元素位置:我们可以通 过offsetLeft以及offsetTop来得到一个元素在页面中的位置,位置的信息是不带单位的,

    元素大小:除了获取到一^元素在页面中的位置,我们还可以通过offsetwidth和offsetHeight来得到
    —个元素的宽高,

    滚动位置:通过pageXOffset和pageYOffset属性我们可以获取文档在窗口左上角水平和垂直方向滚动的 像素

    常用方法

    1.系统提示框:

    ale rt():用于显示带有一条指定消息和一个确定按钮的警告框。
    注意:alert会终止JavaScript代码的执行

    打开和:

    open()方法:使用window.open()方法,该方法有4个参数,

    需要注意现在的浏览器一般都是会阻止弹窗的。一般需要我们点击允许弹出后,才弹出2.htm I页 面
    在调用了 window对象的open()方法以后,他会返回一个对象,可以调用这些对象的方法,其 中就有一个close()方法,

    还有一个opener属性,保存着打开它的原始窗口对象

    5.定时函数:

    间歇调用:

    setInterval()与clearInterval():这两个方法可以说是一组方法,前面是设定指定的时间 周期调用某个函数,而后面的方法则是清除前面的设定。

  • 相关阅读:
    c#中的对象生命周期
    数据抓取的艺术(三):抓取Google数据之心得
    redmine3.3.0安装问题
    wget 无法建立ssl连接 [ERROR: certificate common name ?..ssl.fastly.net?.doesn?. match requested host name ?.ache.ruby-lang.org?. To connect to cache.ruby-lang.org insecurely, use ?.-no-check-certificate?]
    Centos安装ruby
    Redmine插件的安装与卸载,知识库插件安装。
    Nexus网页直接上传jar包
    mvn deploy命令上传包
    一辈子只有1次成为BAT的机会,你如何把握?
    redmine创建新闻,自动发邮件给项目组所有成员
  • 原文地址:https://www.cnblogs.com/wwjljwx/p/11223210.html
Copyright © 2020-2023  润新知