zoukankan      html  css  js  c++  java
  • BOM

    1.什么是BOM
    1.1、 概念
        BOM:浏览器对象模型,是个模型,这个模型由一个对象window来体现(具象)
        作用:
            ①提供了ES和页面的运行环境
            ②浏览器的一些规定,首先需要在ES的基础之上设置,但是最终生效时,以浏览器的标准为主
            ③浏览器的规范没有涉及到的范围,使用ES的规范
    1.2、window的具体功能和作用
        window:窗口
        作用:window提供的窗口 或 窗口与窗口之间的操作
            因为所有内容都运行在浏览器中,所以,window也是浏览器的js中的顶层对象
            所有的全局变量和函数,都属于window
                 window在使用过程中可以省略
                 注意,严格模式下,全局函数如果省略window,会导致全局函数中的this指向undefined

    2.方法(内置全局函数)

    2.1、弹出框三兄弟
        - 弹出信息框:alert()   确认:返回undefined;
        - 弹出对话框:prompt()    确认:返回输入的值;取消:返回null;
        - 弹出选择框:confirm()   确认:返回turn; 取消:返回false;
        - 注意原理,将来会使用html+css+js模拟
    2.2、 页面的打开和关闭
        - open()   在新的页面打开参数里的网站;
        - close()  关闭当前页面
        - 注意:
            ①尽量配合行为适用,不要直接执行;
            ②而且某些浏览器还有兼容性;
    3. 计时器
    3.1、计时器(定时器)(重复执行):
    3.1.1、开
                - setInterval()
                - 功能:每隔参数2的时间,执行一次参数1的函数
                - 参数:参数1:函数;参数2:毫秒数
                - 返回值:当前计时器的唯一标志,是个数值,从1开始逐次累加;只有一个作用:用来清除当前计时器!!!
                - 是否改变原数据:否
    3.1.2、关
                - clearInterval()
                - 功能:用来关闭计时器
                - 参数:要关闭的计时器的返回值 所在的变量
                - 返回值:无
                - 是否改变:否
    3.2、延时器(延迟,一次)
    3.2.1、开
                - setTimeout()
                - 功能:延迟 参数2的时间,执行一次参数1的函数
                - 参数:参数1:函数;参数2:毫秒数
                - 返回值:当前延时器的唯一标志,是个数值,只有一个作用:用来清除当前延时器!!!
                - 是否改变原数据:否`
    3.2.2、关
                - clearTimeout()
                - 功能:用来关闭延时器
                - 参数:要关闭的延时器的返回值 所在的变量!切记,变量!
                - 返回值:无
                - 是否改变:否
     
    4.事件(内置全局事件)
    4.1window浏览器事件
        - load:加载
            - window.onload不仅是页面的加载,还在等待资源的加载
            - document.onload仅仅是页面的加载
        - resize:改变大小
        - scroll:滚动
    - 语法:
        - 事件源.on事件名 = 事件处理函数
    5. 子对象(内置对象)
    5.1、history:历史记录
    5.1.1、控制浏览器的前进后退刷新等于历史记录相关的功能
    5.1.2、属性:
            - 历史记录的个数:history.length
    5.1.3、方法:
            - 前进:history.forward()
            - 后退:history.back()
            - 前进或后退指定的步数:history.go(num);   num为正前进,为负后退,0刷新

    5.2、location:地址url

    5.2.1、控制浏览器的地址栏的内容
    5.2.2、属性:
            ①既可以获取又可以设置:当前页面的地址,设置之后,页面会自动跳转
                - location.href
            ②既可以获取也可以设置:当前页面地址中向后台发送的数据部分(?后的部分),页面也会跳转
                - location.search
            ③既可以获取也可以设置:当前页面地址的锚点连接(哈希值,#后的部分),页面也会跳转
                - location.hash
    5.2.3、方法:
            ①重新加载当前地址:
                - location.reload()
            ②跳转方法,必须传参,空字符刷新,指定地址会跳转
                - location.assign("")

    5.3、navigator:浏览器信息(了解)

        - navigator.userAgent:浏览器信息
        - navigator.appName:浏览器名字(废弃)
        - navigator.appVersion:浏览器版本
        - navigator.appCodeName:浏览器内核
        - navigator.platform:运行系统

    5.4、 screen:屏幕尺寸(了解):显示器的分辨率

    5.5frames:框架(了解):需要配合frame使用

    6.补充:

    6.1、获取页面的可视(看得见的区域)区域的大小:
        ①document.documentElement.clientWidth(获取页面的宽度)
        ②document.documentElement.clientHeight(获取页面的高度)
        ③只能获取,不能设置

    6.2、获取滚动之后距离上边或左边的距离:

        ①document.documentElement.scrollTop(距离上边多远)
        ②document.documentElement.scrollLeft(距离左边多远)
        ③既能获取,又能设置
  • 相关阅读:
    atitit.atiOrmStoreService 框架的原理与设计 part1  概述与新特性
    Atitit. atiOrder   Order 订单管理框架的设计
    Atitit.为什么小公司也要做高大上开源项目
    Atitit.atiInputMethod v2词库清理策略工具    q229
    12条黄金法则
    数据库主键设计
    xhtml常见问题
    程序员面试宝典
    采用XHTML和CSS设计可重用可换肤的WEB站点
    XHTML基础问答
  • 原文地址:https://www.cnblogs.com/yh-3175339026/p/12859741.html
Copyright © 2011-2022 走看看