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. CSS3弹性盒布局方式

    一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...

  2. appium 方法整理

    1.contexts contexts(self):     Returns the contexts within the current session.     返回当前会话中的上下文,使用后可 ...

  3. WPF 使用 AppBar 将窗口停靠在桌面上,让其他程序不占用此窗口的空间(附我封装的附加属性)

    原文:WPF 使用 AppBar 将窗口停靠在桌面上,让其他程序不占用此窗口的空间(附我封装的附加属性) 本文介绍如何使用 Windows 的 AppBar 相关 API 实现固定停靠在桌面上的特殊窗 ...

  4. windows桌面远程连接突然不能双向复制文件

    远程桌面连接windows 2008,突然无法在本地和服务器之间互相复制文件.根据微软的说明,由rdpclip.exe进程来控制,打开远程服务器的任务管理器,看到rdpclip.exe进程存在,即可进 ...

  5. python安装和pycharm安装与笔记

    目录 计算机的基础知识 python安装和使用 pycharm安装和使用 [TOC] 计算机的基础知识 计算机是由什么组成的 cpu-----大脑 主板----身体 电源----心脏 内存----临时 ...

  6. nginx+rsync实现本地yum源以及公网yum源

    1.配置nginx的autoindex模块,开启目录浏览功能 2.使用rsync同步公网源上的软件包,至本地目录中 3.配置客户端指向即可 1.nginx提供目录浏览功能 [root@xuliangw ...

  7. 使用jmeter对dubbo接口进行性能测试教程及常见问题处理

    一.   测试脚本编写 脚本可参考git项目: https://github.com/aland-1415/dubbo-interface-test.git 1. pom依赖 (注意添加的jmeter ...

  8. ASUS笔记本,更换了固态硬盘,重装系统前后开机都自动进入BIOS界面

    解决方法:advanced标签中sata configration回车进入,如有识别硬盘设备,按F9恢复BIOS默认设置,按F10保存后重启. 如有自行安装过系统,Security-Secure Bo ...

  9. 缓冲区溢出漏洞 ms04011

    DSScan使用 扫描目标主机是否存在ms04011漏洞 getos使用 获取操作系统类型 > getos.exe 192.168.1.101 ------------------------- ...

  10. SAP错误消息调试之七种武器:让所有的错误消息都能被定位

    目录 长生剑 - SAPGUI Where Used List 碧玉刀 - ABAP调试器观察点 霸王枪 - ABAP调试器动态断点 多情环 - ABAP代码静态扫描 孔雀翎 - SAT 离别钩 - ...