BOM概念

   BOM是Browser Object Model的缩写,简称浏览器对象模型。这个对象就是window
        BOM提供了独立于内容而与浏览器窗口进行交互的对象
        BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性
        BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C
        BOM最初是Netscape浏览器标准的一部分
 
    由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。

window对象介绍,内置对象(location/history/navigator)及方法:

//    什么是window对象,window对象是浏览器内置的一个对象,相当于BOM的一个抽象

//    window对象是js中全局对象的寄存地。

    window对象的常见方法:
alert(要显示的文本); //弹出信息框
prompt(提示对话框信息); //弹出输入框,点击确定,返回字符串,点击取消,返回null
confirm(提示文字); //点击确定返回true,点击取消返回false close(); //关闭浏览器(火狐不支持!),但都支持通过别的网页打开的新的网页关闭
//不允许关闭非脚本打开的页面 open(url,name,feature,replace);
//open('http://www.baidu.com','_blank','width=300,height=300')
//谷歌会默认把系统自动打开的新网页阻止掉,但不阻止通过事件打开的网页

window对象下内置的子对象:

1.history对象:该对象包含浏览器访问过的url。

//     该对象的属性:
history.length; //返回历史记录的数量
// 该对象的方法:
history.back(); //后退,加载前一个url。
history.forward(); //前进,需要后退一下之后,才有前进的方向
history.go(num); //参数为正,前进相应的数目,为负,后退相应的数目,为0,刷新

2.location对象:包含当前url的相关信息,而history对象不能具体反映url的相关信息。

//     该对象的属性:
location.href; //设置或返回完整的url
location.search; //返回url?后面的查询部分
location.hash; //是一个可读写的字符串,是url的锚部分(从#开始的部分)哈希
// 该对象的方法:
location.reload(); //刷新页面的方法,一般情况下,传递一个true,不使用缓存刷新。缓存?
location.assign(url); //加载新页面,当url为空字符时,加载当前页面

3.navigator对象:浏览器信息

        navigator.appName;      //返回当前浏览器名
navigator.appCodeName; //返回当前浏览器的代码名
navigator.appVersion; //返回当前浏览器的版本号和平台
navigator.platform; //返回当前计算机的操作系统 以上方法已经在逐渐被抛弃,出现一个新的属性替代这些属性:
navigator.userAgent; //返回浏览器信息

几乎没什么卵用

        4.frames对象:包含当前页面所有的框架信息。
frames.length; //返回当前页面的框架数量
frames[0].location; //修改第一个框架的地址
5.screen对象:包含当前显示屏信息
screen.width/height //屏幕总宽高度
screen.availWidth/availHeight //屏幕的宽高(不包括任务栏)

window.onload / onscroll/onresize 事件

//  onload当文档加载完成后执行一些操作
window.onload = function(){
console.log("页面加载完成")
} // onscroll当页面发生滚动时执行一些操作
window.onload = function(){
console.log(1) //当页面发生滚动时,打印1
} // onresize当窗口大小发生改变时执行一些操作
window.onresize = function(){
console.log(1) //当窗口大小发生改变时,打印1
}
// 页面滚动条距离顶部的距离
document.documentElement.scrollTop
// 页面滚动条距离左边的距离
document.documentElement.scrollLeft

JavaScript基础07——BOM的更多相关文章

  1. javascript基础07

    javascript基础07 1.节点 元素.childNodes : 属性 只读 属性 子节点列表集合 元素.childNodes 只包含子节点,不包含孙节点 DOM节点的类型有很多种,w3c标准有 ...

  2. JavaScript基础:BOM的常见内置方法和内置对象

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. BOM的介绍 JavaScript的组成 JavaScript基础分为三 ...

  3. JavaScript 基础知识 - BOM篇

    前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...

  4. javascript基础:bom

    一.BOM 1.概念:Browser Object Model  浏览器对象模型 *  将浏览器的各个组成部分封装成对象 2.组成: *  Window:窗口对象                  1 ...

  5. JavaScript基础入门07

    目录 JavaScript 基础入门07 BOM window对象 Navigator对象 Screen 对象 Location对象 History 对象 JavaScript 基础入门07 BOM ...

  6. Javascript基础五(BOM和DOM)

    1.BOM概念 什么是BOM?         BOM是Browser Object Model的缩写,简称浏览器对象模型.这个对象就是window         BOM提供了独立于内容而与浏览器窗 ...

  7. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  8. 第三篇:web之前端之JavaScript基础

    前端之JavaScript基础   前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...

  9. 初识 Javascript.01 -- Javascript基础|输出方式、变量、变量命名规范、数据类型、

    Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司   研发出世界上第一款浏览器. 95年 sun公司   java语言诞生 网景公司和su ...

随机推荐

  1. Flutter 增加三方库卡在flutter package get 的解决办法

    修改 pubspec.yaml 文件增加第三方库之后,AndroidStudio 像往常一样提示 需要 package get. 然后一直卡在 Running "flutter packag ...

  2. pytest_04_测试用例setup和teardown

    学过unittest的都知道里面用前置和后置setup和teardown非常好用,在每次用例开始前和结束后都去执行一次. 当然还有更高级一点的setupClass和teardownClass,需配合@ ...

  3. 魔法 [线段树优化DP]

    也许更好的阅读体验 \(\mathcal{Description}\) 小 \(D\) 正在研究魔法. 小 \(D\) 得到了远古时期的魔法咒语 \(S\),这个咒语共有 \(n\) 个音节,每个音节 ...

  4. An Illustrated Proof of the CAP Theorem

    An Illustrated Proof of the CAP Theorem The CAP Theorem is a fundamental theorem in distributed syst ...

  5. loj#10067 构造完全图(最小生成树)

    题目 loj#10067 构造完全图 解析 和kruscal类似,我们要构造一个完全图,考虑往这颗最小生成树里加边 我们先把每一条边存下来, 把两个端点分别放在不同的集合内,记录每个集合的大小,然后做 ...

  6. js-Date对象(九)

    一.Date对象的创建1.new Date()[创建当前时间对象]eg: var date = new Date(); console.log(date); //Thu Jul 18 2019 18: ...

  7. k8s维护常用命令

    k8s维护 1. 不可调度 kubectl cordon k8s-node-1 kubectl uncordon k8s-node-1 #取消 2.驱逐已经运行的业务容器 kubectl drain ...

  8. 木马防杀 花指令 OllyDbg

    打开木马 入口地址 添加花指令 全0的地方,可以插入花指令 保存为可执行文件 随便选择几行,右击 保存文件

  9. day 02 预科

    目录 什么是编程语言 什么是编程 为什么要编程 计算机的组成 CPU 存储器 I/O设备(Input/Output设备) 输入设备 输出设备 多核CPU 32位和64位 机械硬盘工作原理 机械手臂 磁 ...

  10. 小米8seroot后更改hosts文件记录

    1.先备份原有文件,在设置中有个备份与恢复,可以备份,备份后链接电脑,传电脑上 2.下载开发版miui,安装 3.解bl锁,先到官网申请,按照提示操作. 4.备份文件传到手机,恢复文件 5.获得roo ...