第三章JavaScript操作BOM对象

Posted 别动我的猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了第三章JavaScript操作BOM对象相关的知识,希望对你有一定的参考价值。

第一章   javascript操作BOM对象

一.window对象

浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与html的交互。

他的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力。

BOM是一个分层结构:

 

 

 

 

 

Window对象是整个BOM的核心,在浏览器中打开网页后,首先看到是浏览器窗口,即顶层的window对象;其次是网页内容,即document(文档)。

Window对象也称为浏览器对象。当浏览器打开HTML文档时,通常会创建一个window对象,如果文档定义了一个或多个框架,浏览器将为原始文档创建一个window对象,同时为每个框架另外创建一个window对象。

1.    BOM的作用

1).弹出的浏览器窗口。

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

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

2.window常用的属性

        

名称

说明

history

有关客户访问过的URL的信息

location

有关当前的URL的信息

Screen

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

语法: windoe.属性名=”属性值”;

例:window.location=”http//www.baidu.com”,表示跳转到百度的官方主页。

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

3.window常用的方法

名称

说明

prompt()

显示一个可提示并且用户可以输入的对话框,取消返回null,确定返回用户输入的值

alert()

显示一个带有提示信息和一个“确定”按钮的警示对话框,无返回值

confrim()

显示一个带有提示信息、“确定”和“取消”按钮的对话框,返回true或false

colse()

关闭浏览器窗口

open()

打开一个新的浏览器窗口,加载给定的URL所指定的稳定

setTimeout()

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

setInterval()

按照指定的周期(单位毫秒)来调用函数或表达式

弹出窗口语法:

Window.open(“弹出窗口的URL”,”窗口的名称”,”窗口特征”);

1.    窗口的特征属性

名称

说明

height、width

窗口文档显示区的高度、宽度、单位是像素

left、top

窗口的x坐标、y坐标,单位是像素

toolbar=yes|no|1|0

是否显示浏览器的工具栏,默认是yes

scrollbars=yes|no|1|0

是否显示滚动条,默认是yes

loaction= yes|no|1|0

是否显示地址栏,默认是yes

status= yes|no|1|0

是否添加状态栏,默认是yes

menubar=yes|no|1|0

是否显示菜单栏,默认是yes

resizable=yes|no|1|0

窗口是否可调节尺寸,默认是yes

titlebar= yes|no|1|0

是否显示标题栏,默认是yes

fullscreen=yes|no|1|0

是否全屏模式显示浏览器,默认是no

 

二.history对象和location对象

1.    history对象

history对象提供用户最近浏览过的URL列表,即浏览历史。出于隐私方面的考虑,history对象不再允许脚本访问已经访问过的实际URL

History对象的方法

名称

描述

back()

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

forward()

加载history对象列表中的后一个URL

go()

加载history对象列表中的某个位置的URL,参数为正负整数

go(n)方法中的n是一个具体的数字,当n>0时,进入历史列表中前进的第几个页面。

当n<0时,进入历史列表中后退的第几个页面。

A) history.go(1)代表前进一页,等价于forward()方法。

B) History.go(-1)代表后退一页,等价于back()方法。

2.    location对象

laction对象提供当前页面的URL信息,并且可以重新装载当前页面(刷新)或装入新页面。

Location对象的属性

名称

描述

Host

设置或返回主机名和当前URL的端口号

Hostname

设置或返回当前URL的主机名

href

设置或返回完整的URL

loaction对象的方法

reload()

重新加载(刷新)当前文档

replace()

用新的文档替换当前文档

例:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>主页面</title>
</head>
<body>
    <img src="flow.jpg" alt="鲜花"/><br/>
    <!--跳转到鲜花页面-->
   
<a href="javascript:location.href=‘flower.html‘">查看鲜花详情</a>
    <a href="javascript:location.reload()">刷新本页</a>
</body>
</html>

 

一.document对象

document对象即是window对象的一部分,又代表了整个HTML文档,可以用来访问页面中的所有元素。所以在使用document对象时,除了要适用于各个浏览器外,也要符合W3C的标准。

Document对象的常用属性

referrer

返回当前文档的URL

URL

返回当前文档的URL

1.referrer的语法格式如下:

document.referrer;

当前文档如果不是通过超连接访问的,则document.referrer的值为null

例:通过跳转地址判断用户是否从指定的页面登录的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    var preUrl=document.referer;//载入跳转到当前文档的地址
   
if(preUrl==""){
        document.write("<h2>您不是从领奖的登录页面进入,五秒后将自动跳入到领奖页面</h2>")
        setTimeout("location.href=‘login.html‘",3000);//使用setTimeout延迟5秒后跳转到领奖页面的登录页面
   
}else{
        document.write("<h2>大奖赶快拿!笔记本!数码相机!</h2>")
    }
</script>
</body>
</html>

 

2.URL的语法:

document.URL;

Document对象的常用方法

方法

描述

getElementByID()

返回对拥有指定id的第一个对象的引用

getElementsByName()

返回带有指定名称的对象的集合

getElementsByTagName()

返回指定带有表签名的对象的集合

write()

向文档写入文本,HTML表达式或JavaScript代码

 

 

二.javascript的内置对象

在javaScript中,系统的内置对象有Date对象、Array对象、String对象和Math对象等。

A) Date对象:用于操作日期和事件。

B) Array对象:用于在单独的变量名中存储一系列的值。

C) String对象:用于支持对字符串的处理。

D) Math对象:执行常用的数学任务,它包含了若干个数字常量和函数。

1.Date对象

语法:var 日期实例=new Date(参数);

例:var  today=new  Date(); //将当前的时间存储在变量today中

     var  tdate=new  Date(“July  15,2013,16:10:12”);//以字符串格式传入值

Date对象的常用方法

方法

说明

getDate()

返回Date对象中的一个月中每一天,值1~31

getDay()

返回Date对象的行其中的每一天,值0~6

getHours()

返回Date对象的小时数,值0~23

getMinutes()

返回Date对象的分钟数,值0~59

getSeconds()

返回Date对象的秒数,值0~59

getMonth()

返回Date对象的月份,值0~11

getFullYear()

返回Date对象中年份,其值为4位数

getTime()

返回来自某一刻(1970年1月1日)以来的毫秒数

例:显示时间

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟特效</title>
</head>
<body>
    <div id="myclock"></div>
    <script type="text/javascript">
      function disptime(){
          var today=new Date();//获得当前的时间
         
var hh=today.getHours();
          var mm=today.getMinutes();
          var ss=today.getSeconds();
          //设置div的内容为当前时间
         
document.getElementById("myclock").innerHTML="现在是:"+hh+":"+mm+":"+ss;
      }
        disptime();
    </script>
</body>
</html>

2.Math对象

Math对象提供了许多与数学相关的功能,它是javaScript的一个全局对象,不需要创建,直接作为对象使用就可以调用其属性和方法。

Math对象的常用方法

方法

说明

示例

ceil()

对数进行上舍入(方向第一象限)

Math.ceil(25.5);返回26

Math.ceil(-25.5);返回-25

floor()

对数进行下舍入(方向第三象限)

Math.floor(25.5);返回25

Math.floor(-25.5);返回-26

round()

四舍五入

Math.round(25.5);返回26

Math.round(-25.5);返回-26

random()

返回0~1的随机数

Math.random();

 

三.定时函数

JavaScript中提供了两个定时函数setTimeout()和setInterval().

此外,还提供了用于清除定时器的两个函数clearTimeout()和clearInterval()。

1.    setTimeout

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

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

2.    setInterval

按照指定的周期(单位毫秒)来调用函数或表达式。语法:

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

setInterval()会不停的调用函数,知道窗口关闭或被其他方法强制停止。


















































以上是关于第三章JavaScript操作BOM对象的主要内容,如果未能解决你的问题,请参考以下文章

55-前端-JavaScript

javascript之BOM对象(二location对象)

前端知识-JavaScript

JavaScript操作-BOM对象

javaScript操作BOM对象

javaScript操作BoM对象