JavaScript操作BOM对象

原创 2018年04月16日 16:47:19
windows对象
        浏览器对象模型(BOM :Browser  Object  Model)是JavaScript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力。BOM是一个分层结构

使用BOM通常可实现如下功能:

        1.弹出新的浏览器窗口

        2.移动、关闭浏览器窗口及调整窗口大小

        3.在浏览器窗口中实现页面的前进、后退功能

windows对象的常用属性:

        1.history   有关客户访问过的URL的信息

        2.location  有关当前URL的信息

        3.screen    只读属性,包含有关客户端显示屏的信息

在Javascript中,属性的语法格式如下:

window.属性名=“属性值”

例:window.location="http://www.bdqn.cn",表示页面跳转

screen.heigth 返回显示浏览器的屏幕的高度,单位为像素

windows对象的常用方法:
    prompt()   显示可提示用户输入的对话框
    alert()  显示一个带有提示信息和一个“确定”按钮的警示对话框
    confirm()   显示一个带有提示信息、“确定”和“取消”按钮的对话框
    close()   关闭浏览器窗口
    open() 打开一个新的浏览器窗口,加载给定URL所指定的文档
    setTimeout()   在指定的毫秒数后调用函数或计算表达式
    setInterval()    按照指定的周期(以毫秒计)来调用函数或表达式
语法:
window.方法名();
window对象是全局对象,所以在使用window对象的属性和方法时,window可以省略
例如:之前直接使用的alert(),相当于写成window.alert();
方法的使用
1.confirm() 将弹出一个确认对话框 
语法:
window.confirm("确认要删除此条信息吗");
在confirm()对话框中,有确认和取消按钮。当用户单机确认是,则返回 true 反之 false
代码实例:
var flag=confirm("确认删除此条信息吗");
if(flag)
{
alert("删除成功");
}else
{
alert("你取消了删除");
}
2.close()
  close()方法用于关闭浏览器窗口,语法:window.close();
3.open();
  在页面上弹出一个新的浏览器窗口,弹出窗口的语法格式如下:
  window.open(“弹出窗口的url”, “窗口名称”,“窗口特征”);

  窗口的特征属性:


  prompt()、alert()、confirm()不同之处
  alert()   只有一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何影响
  prompt()  有两个参数,是输入对话框,用来提示用户输入一些信息,单击取消按钮则返回null,单击 确定按钮 则返回用户输入的值,常用于收集用户关于特定问题而反馈信息

  confirm()  只有一个参数,是确认对话框,显示提示对话框的信息。确认按钮和取消按钮单击确定返回true单击取消返回 false,因此与if--else语句搭配使用。

history对象 和 location对象

history对象常用方法:

  back()  加载history对象列表中的前一个URL

  forward() 加载history 对象列表中的下一个URL

  go() 加载history 对象列表中的某个具体URL
  history.back()=== history.go(-1) 浏览器中的后退
  history.forward() ===history.go  ( 1 )       浏览器中的前进 
  location 对象常用方法及属性:
  host :设置或返回主机名和当前URL的端口号
  hostname :设置或返回当前URL的主机名
  href:设置或返回完整的URL
  reload()   重新加载当前文档

  reolace()   用新的文档替换当前文档

document对象

document对象的常用属性


referrer的语法:document.referrer

URL的语法:document.URL

document的常用方法


  JavaScript 内置对象
        1.Array  : 用于在单独的变量名中存储一系列的值
        2.String : 用于支持对字符串的处理
        3.Math :用于执行常用的数学任务,它包含了若干个数字常量和函数

        4.Date :用于操作日期和时间

Date对象获取日期:

 语法:var  日期对象 = new  Date(参数);参数格式:MM  DD,YYYY ,hh:mm:ss

Date对象的常用方法


Math对象的常用方法


定时函数

常用定时函数

1.setTimeout()

setTimeout()用于在指定的毫秒后调用函数或计算表达式。

语法:

setTimeout("调用的函数名称",等待的毫秒数)

2.setInterval()

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

语法:

setInterval("调用的函数名称",周期性调用函数之间间隔的毫秒数)

3.clearTimeout()和clearInterval()

clearTimeout()函数用来清除由setTimeout()函数设置的定时器。

语法:

clearTimeout(setTimeout()返回的ID值);

clearInterval()函数用来清除由setInterval()函数设置的定时器。

语法:

clearInterval(setInterval()返回的ID值);





 


 

【BOM操作】JavaScript中的event对象之总结

Event属性和方法:  1. type:事件的类型,如onlick中的click;  2. srcElement/target:事件源,就是发生事件的元素;  3. button:...
  • itpinpai
  • itpinpai
  • 2015-08-08 12:32:48
  • 1176

javaScript中的对象、BOM、DOM知识点总结

一、  什么是javaScript对象?         对象是javaScript中最重要的API。         javaScript包含多种对象有:内置对象、外部对象(window对象、dom...
  • hhhhhggggddd
  • hhhhhggggddd
  • 2017-04-13 10:04:51
  • 526

实用JS系列——BOM常用对象

最近在着手项目的时候,意识到自己JS的欠缺。虽然看了不少JavaScript的视频,但真正项目中并不是经常遇到大且难的例子。所以JavaScript的基础还需要再打扎实,也就有了这一系列博客。这一系列...
  • u010066934
  • u010066934
  • 2015-01-15 19:34:57
  • 4386

第二章 Javascript操作BOM对象

1、window对象浏览器对象模型是Javascript的组成之一。提供了独立于内容与浏览器进行交互的对象。2、BOM通常实现的功能弹出新的浏览器窗口移动、关闭浏览器以及调整窗口的大小在浏览器窗口中实...
  • liaohuanmei
  • liaohuanmei
  • 2018-04-16 20:46:42
  • 17

Javascript之BOM与DOM讲解

一.Javascript组成JavaScript的实现包括以下3个部分:ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 (DOM)处理网页内容的方法和接口浏览器对象模型(BOM)...
  • qq877507054
  • qq877507054
  • 2016-05-13 15:36:09
  • 12567

Javascript之BOM对象

个人理解是,我们知道浏览器显示内容的主要对象是DOM。浏览器除了有显示的内容,还有一个重要的部分就是一个载体,它承载我们看到的内容。好比是一个框架。这个载体对象我们把它叫做BOM。所以,DOM 是属于...
  • wangyongxia921
  • wangyongxia921
  • 2014-03-03 20:57:33
  • 6580

【JavaScript】BOM总结

BOM(browser object model)浏览器对象模型的缩写。 ·        BOM提供了独立于内容而与浏览器窗口进行交互的对象 ·        由于BOM主要用于管理窗口与窗口之...
  • u012331102
  • u012331102
  • 2015-08-14 18:04:20
  • 502

Javascript——BOM(操作指南)

/** * 知识点: 1 掌握window对象 * 2 掌握location对象 * 3 掌握history对象 */ // BOM 也叫浏览器...
  • Lixuanshengchao
  • Lixuanshengchao
  • 2016-08-07 20:33:59
  • 1684

JAvaScript和DOM(文档对象模型)和BOM(浏览器对象模型)

DOM是针对XML但经过扩展用于HTML的应用程序编程接口DOM把整个页面映射成一个多层节点结构,HTML页面中的每一个组成部分都是某种类型的节点,这些节点也包含这不同类型的数据...
  • wang2963973852
  • wang2963973852
  • 2016-10-27 13:58:51
  • 1905

JS中BOM相关知识点总结

js中BOM相关知识小结
  • liujie19901217
  • liujie19901217
  • 2016-04-01 21:57:53
  • 2602
收藏助手
不良信息举报
您举报文章:JavaScript操作BOM对象
举报原因:
原因补充:

(最多只允许输入30个字)