一、什么是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. PHP实现session对象封装

    <?php class Session { private $db; // 设置数据库变量 private $expiry = 3600; // 设置Session失效时间 public fun ...

  2. configure: error: Bundled APR requested but not found at ./srclib/. Download and unpack the corresponding apr and apr-util packages to ./srclib/.

    Apache在2.4版本以后,编译时: # ./configure \ --prefix=/usr/local/apache2 \ --with-included-apr \ --enable-so ...

  3. memcached 的实践操作

    memcached安装和使用   yum install -y libevent  memcached  libmemcached   启动命令:   /etc/init.d/memcached st ...

  4. Scoping the Project for iOS 7

    Scoping the Project On This Page Things Every App Must Do Things Every App Should Do If You Must Con ...

  5. Array 数组的排序 sort

    JavaScript实现多维数组.对象数组排序,其实用的就是原生的sort()方法,用于对数组的元素进行排序.sort() 方法用于对数组的元素进行排序.语法如下:arrayObject.sort(s ...

  6. NOI2009 二叉查找树 【区间dp】

    [NOI2009]二叉查找树 [问题描述] 已知一棵特殊的二叉查找树.根据定义,该二叉查找树中每个结点的数据值都比它左子树结点的数据值大,而比它右子树结点的数据值小.另一方面,这棵查找树中每个结点都有 ...

  7. laravel框架基础知识点

    一.数据库:DB    1.db查    DB::table('msg')->where('id','>',$id)->get()       查询单行    DB::table(' ...

  8. 重温基础之-css盒模型

    所有html元素都可以看作盒子. css盒模型本质上是一个盒子,封装周围的html元素,它包括:外边距,边框,内边距和实际内容. 默认情况下,一个元素的总宽度计算方式: 总宽度=左外边距+左边框+左内 ...

  9. JQuery基础知识学习1

    1.JQuery是javascript的类库 2.下载JQuery 3.导入JQuery <script src="jquery-3.0.0.js"></scri ...

  10. Linux文本的处理

    Linux最最最最重要的哲学思想就是:一切皆文件.文件以及文件的操作在LInux操作系统中是非常的重要.熟练使用精悍小巧快捷的文本处理方式让效率更高. 一.文件查看命令 less 分页查看 [root ...