一、什么是BOM?

BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。

二、Windows对象

Window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用。例如:window.document.write()可以简写成:document.write()。

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

一些常用的Window方法:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口

三、Windows的子对象

  • navigator对象

    • 浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。

      navigator.appName  // Web浏览器全称
      navigator.appVersion  // Web浏览器厂商和版本的详细字符串
      navigator.userAgent  // 客户端绝大部分信息
      navigator.platform   // 浏览器运行所在的操作系统
  • screen对象

    • 屏幕对象,不常用。

      一些属性:

      •   screen.availWidth - 可用的屏幕宽度

      •   screen.availHeight - 可用的屏幕高度

  • history对象

    • window.history 对象包含浏览器的历史。
    • 浏览历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体的地址,可以简单的用来前进或后退一个页面。
      history.forward()  // 前进一页
      history.back() // 后退一页
  • location对象

    • window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
    • 常用属性和方法:
      location.href  获取URL
      location.href="URL" // 跳转到指定页面
      location.reload() 重新加载页面
  • 弹出框

    • 可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
    • 警告框

      警告框经常用于确保用户可以得到某些信息。

      当警告框出现后,用户需要点击确定按钮才能继续进行操作。

      语法:

      alert("你看到了吗?");

      确认框(了解即可)

      确认框用于使用户可以验证或者接受某些信息。

      当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

      如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

      语法:

      confirm("你确定吗?")

      提示框(了解即可)

      提示框经常用于提示用户在进入页面前输入某个值。

      当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

      如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

      语法:

      prompt("请在下方输入","你的答案")
  • 计时相关

    •   

      通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

      setTimeout()

      语法:

      var t=setTimeout("JS语句",毫秒)

      setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。

      setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。

      第二个参数指示从当前起多少毫秒后执行第一个参数(1000 毫秒等于一秒)。

      clearTimeout()

      语法:

      clearTimeout(setTimeout_variable)

      举个例子

      // 在指定时间之后执行一次相应函数
      var timer = setTimeout(function(){alert(123);}, 3000)
      // 取消setTimeout设置
      clearTimeout(timer);

      setInterval()

      setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

      setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

      语法:

      setInterval("JS语句",时间间隔)

      返回值

      一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

      clearInterval()

      clearInterval() 方法可取消由 setInterval() 设置的 timeout。

      clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

      语法:

      clearInterval(setinterval返回的ID值)

      举个例子:

      // 每隔一段时间就执行一次相应函数
      var timer = setInterval(function(){console.log(123);}, 3000)
      // 取消setInterval设置
      clearInterval(timer);

JavaScript之BOM的更多相关文章

  1. 第一百一十一节,JavaScript,BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  2. 第三章 JavaScript操作BOM对象

    第三章   JavaScript操作BOM对象 一.window对象 浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HT ...

  3. JavaScript的BOM和DOM

    JavaScript的BOM和DOM 1,window对象,所有浏览器都支持window对象,它表示浏览器窗口 BOM(browser Object Model)是指浏览器对象模型,它使JavaScr ...

  4. javascript之BOM对象(一window对象)

    javascript包含三个部分,ECMAScript,BOM和DOM.ECMAScript是javascript的核心,包含javascript的基础语法.在Web中使用javascript,BOM ...

  5. 使用jQuery快速高效制作网页交互特效--JavaScript操作BOM对象

    JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windo ...

  6. 8.5 JavaScript的BOM(二)

    8.5 JavaScript的BOM 即 浏览器对象模型(Browser Object Model) 浏览器对象包括 一.Window(窗口) 如果需要打开一个新的网站,应该通过超级链接等方式让用户主 ...

  7. JavaScript(4)---BOM详解

    JavaScript(4)---BOM详解 之前写过一篇有关DOM的博客:JavaScript(2)---DOM详解 DOM有个顶级对象叫:document.同样BOM中也有顶级对象叫 window. ...

  8. JavaScript的BOM对象

    JavaScript的BOM对象 BOM:浏览器对象模型 JavaScript和浏览器的关系:JavaScript的诞生就是为了能够让它再浏览器中运行. 1. 操作BOM对象 1.1 window w ...

  9. [JavaScript之BOM与DOM]

    [JavaScript之BOM与DOM] BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM ( ...

  10. javascript中BOM部分基础知识总结

    一.什么是BOM      BOM(Browser Object Document)即浏览器对象模型.      BOM提供了独立于内容 而与浏览器窗口进行交互的对象:      由于BOM主要用于管 ...

随机推荐

  1. Centos7安装GitLab

    GitLab CE Download Archives gitlab安装调试小记 Gitlab Free Trial GitLab搭建手记 Gitlab社区版的使用 GUI PNG Gitlab升级到 ...

  2. Maven中避开测试环节

    两种方法 修改pom文件 添加<skipTests>true</skipTests>标签 <plugin> <groupId>org.apache.ma ...

  3. ipset批量配置iptables

    简介: ipset是iptables的扩展,允许你创建匹配整个地址sets(地址集合)的规则.而不像普通的iptables链是线性的存储和过滤,ip集合存储在带索引的数据结构中,这种集合比较大也可以进 ...

  4. PHP中一种sign计算方法

    一言不合上代码......... <?php function getsign($data,$key){ $key=MD5("KEY_".$key."_K" ...

  5. 获取对象属性类型、属性名称、属性值的研究:反射和JEXL解析引擎

    同步发布:http://www.yuanrengu.com/index.php/20170511.html 先简单介绍下反射的概念:java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所 ...

  6. canvas-缩放

    Canvas-图片缩放 由上一篇canvas-旋转的例子可以了解到canvas的一些特性,不熟悉的同学可以先去看看canvas-旋转. 我们在将图片引入canvas时,图片会一原始像素渲染.这样往往不 ...

  7. hbase优化之region合并和压缩

    HBASE操作:(一般先合并region然后再压缩) 一 .Region合并: merge_region   'regionname1','regionname2' ,'true'  --true代表 ...

  8. GCC精彩之旅_2(转)

    说明: 本文共两篇,转自GCC精彩之旅.第一篇着重介绍GCC编译一个程序的过程与优化,第二篇侧重在GCC结合GDB对代码的调试. 调试     一个功能强大的调试器不仅为程序员提供了跟踪程序执行的手段 ...

  9. Python中List和Tuple类型

    a = 'python' print('hello,', a or 'world') b = '' print ('hello,', b or 'world') print('------------ ...

  10. scrapy回调函数传递参数

    scrapy.Request 的callback传参的两种方式 1.使用 lambda方式传递参数 def parse(self, response): for sel in response.xpa ...