什么是BOM?

  bom即browser object model 也就是浏览器对象模型,BOM由多个对象组成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。

  顶层对象:window

  子对象:location:location 对象包含有关当前 URL 的信息;

      history:History 对象包含用户(在浏览器窗口中)访问过的 URL;

      screen:Screen 对象包含有关用户屏幕的信息;

      navigator:Navigator 对象包含有关访问者浏览器的信息;

      document:Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问;

      event:Event 对象代表着事件对象的状态。

 一.window对象:

  (一)alert警告框

    语法:window.alert();或 alert();

    功能:显示一段带有消息和确认按钮的警告框

  (二)confirm选择框

    语法:window.confirm();或 confirm();

    功能:显示一个带有指定消息的和确定及取消按钮的对话框

    返回值:用户点击确定,confirm()返回true

        用户点击取消,confirm()返回false

  (三)prompt输入框

    语法:window.prompt(text[,defaultText]);或者 prompt(text,[,defaultText]);

    参数:text:要在对话框中显示的纯文本(不是HTML格式文本)

         defaultText:默认的输入文本

    返回值:如果用户点击提示框的取消按钮,则返回null

        如果用户点击确定按钮,则返回输入的内容

  (四)open打开一个新窗口

    语法:window.open(pageURL,name,parameters)

    功能:打开一个新的浏览器窗口或者查找一个名称的窗口

    参数:pageURL:子窗口路径

       name:子窗口的名字

       parameters:窗口参数(各参数用逗号分隔)

          width:窗口宽度,

          height:窗口高度,

          left:窗口X轴坐标 ;top:窗口Y轴坐标,

          toolbar:是否显示浏览器工具栏(yes/no),

          menubar:是否显示菜单栏(yes/no),

          scrollbars:是否显示滚动条(yes/no),

          location:是否显示地址字段,

          status:是否添加状态栏,

  (五)close关闭浏览器

    语法:window.close();

    功能:关闭浏览器窗口

  (六)setTimeout超时调用

    语法:setTimeout(code,millisec);

    功能:在指定的毫秒数后调用函数或计算表达式

    参数:code:要调用的函数名或要执行的js代码串

       millisec:在执行代码前需等待的时间(毫秒)

PS:setTimeout()只执行code一次,如果要多次调用请使用setInterval()或者让code自己调用自己;

  (七)clearTimeout清除超时调用

    语法:clearTimeout(id_of_settimeout);

    功能:取消由setTimeout()方法设置的超时调用;

    参数:id_of_settimeout:由setTimeout()返回的ID值,该值标识要取消的延迟代码块

  (八)setInterval间歇调用

    语法:setInterval(code,millisec)

    功能:每隔指定的时间执行一次代码

    参数:code:要调用的函数名或要执行的js代码串

       millisec:在执行代码前需要等待的时间(毫秒)

  (九)clearInterval清除间歇调用

    语法:clearInterval(id_of_setinterval)

二.location对象

  location对象提供了与当前窗口中加载的文档有关的信息,还提供了功能,它既是window对象的属性,也是document对象的属性

  (一)location.href获取url

    1.获取url

      语法:location.href

      功能:返回当前加载页面完整url

      说明:location.href()与window.location.href()等价

    2.设置url

      语法:location.href = "url"

      功能:使网页加载到指定的url地址上

  (二)location.hash获取锚点链接

    1.获取锚点

      语法:location.hash

      功能:返回url中的hash(#以及后面的字符),如果不包含,返回空字符串

    2.设置锚点

      语法:location.hash = "param";

      功能:为url添上指定的锚点,实现页面上的锚点位置跳转

  (三)location对象其他常用属性

     # TODO 待补充

  (四)location.replace重新定向url

    语法:location.replace(url)

    功能:重新定向url

    PS:使用location.replace不会在历史记录中生产新记录(没有后退按钮)

  (五)location.reload重新加载当前显示的页面

    语法:location.reload()

    功能:重新加载当前显示的页面

    说明:location.reload()有可能从浏览器缓存中加载

       location.reload(true)强制从服务器重新加载

三,history对象

  history对象保存了用户在浏览器中访问页面的历史记录

  (一)history.back()

    语法:history.back()

    功能:回到历史记录的上一步

    PS:相当于使用了history.go(-1)

  (二)history.forward()

    语法:history.forward()

    功能:回到历史记录的下一步

    PS:相当于使用了history.go(1)

  (三)history.go(-n)

    语法:history.go(-n)

    功能:回到历史记录的前n步 

  (四)history.go(n)

    语法:history.go(n)

    功能:去到历史记录的后n步

四,screen对象

  screen对象包含有关客户端显示屏幕的信息  

  (一)screen.availWidth(可用屏幕宽度)和screen.availHeight(可用屏幕高度)

  (二)screen.innerWidth(窗口文档显示宽度);screen.innerHeight(窗口文档显示高度)

五,navigator对象

  提供了用户的浏览器,操作系统等信息,可通过当前对象得知用户所用浏览器类型,版本等

  (一)navigator.userAgent用来识别浏览器名称,版本,引擎以及操作系统等信息

    语法:navigator.userAgent

    例子:

JS之BOMBOM!的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  7. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  8. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

  9. 干货分享:让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

随机推荐

  1. Hi3516EV300专业型HD IP Camera SoC

    Hi3516EV300芯片特点: 处理器内核 ARM Cortex A7@ 900MHz,32KB I-Cache,32KB D-Cache /128KB L2 cache 支持 Neon 加速,集成 ...

  2. Android组件化探索与实践

    什么是组件化 不用去纠结组件和模块语义上的区别,如果模块间不存在强依赖且模块间可以任意组合,我们就说这些模块是组件化的. 组件化的好处 实现组件化本身就是一个解耦的过程,同时也在不断对你的项目代码进行 ...

  3. 编程心法 之 敏捷开发(新架构)Agile Team Organization Squads, Chapters, Tribes and Guilds

    Agile Team 参考 一般情况下,一个小组有以下功能分布: Squads 每个主要的功能的开发属于一个Squad,比如说QQ这个应用,可以分为QQ空间小组.QQ会员小组等等, 每一个Squad有 ...

  4. 自动获取windows或者linux系统IP

    1.获取Windows下的IP java.net.InetAddress.getLocalHost().getHostAddress(); 2.获取linux下的IP /** * 获取Linux下的I ...

  5. 浅析C语言中的整形类型

    在C语言中,可以把 字符型.短整形.整形.长整形都看作是整形,同属于整形家族这个大类型. 这些类型的大小,默认是否有符号等一些知识点较零散,较容易混淆,所以特地整理如下.   一 类型存储字节长度说明 ...

  6. vmware P2V迁移域内windows服务器脱域问题

    windows 域服务器采用vmware converter进行物理机转换为虚拟机,需要在完成后进行退域重新加域操作. 否则,有可能会出现服务器在30天后脱域情况.出现脱域情况,可以通过退域加域的方式 ...

  7. Maven配置ojdbc14-10.2.0.4.0.jar

    对于oralce的jdbc驱动,在maven上搜索到把pom配置复制到pom.xml里进行引用的时候出现下面这种情况 <dependency> <groupId>com.ora ...

  8. H5直播避坑指南

    本文来自"小时光茶社(Tech Teahouse)"公众号 作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开 ...

  9. 基于python语言的tensorflow的‘端到端’的字符型验证码识别源码整理(github源码分享)

    基于python语言的tensorflow的‘端到端’的字符型验证码识别 1   Abstract 验证码(CAPTCHA)的诞生本身是为了自动区分 自然人 和 机器人 的一套公开方法, 但是近几年的 ...

  10. 《Python黑客编程之极速入门》正式开课

    玄魂 玄魂工作室 今天 之前开启了一个<Python黑客编程>的系列,后来中断了,内容当时设置的比较宽,不太适合入门.现在将其拆分成两个系列<Python黑客编程之极速入门>和 ...