新手笔记——JavaScript BOM模型

时间:2021-02-22 21:11:01

BOM模型

BOM:浏览器对象模型(Browser Object Model

window整个BOM的核心

   history          document             location

   link              form             anchor

 

Button  checkbox   text  ...    text area   radio select

BOM的作用

将相关的元素组织包装起来,提供给程序设计人员使用,从而减少开发人员的工作量,提高设计Wed页面的效率

BOM可实现功能

弹出新的浏览器

移动、关闭浏览器窗口以及调整窗口的大小

页面的前级、后退

window对象的常用属性

常用的属性

属性名

说明

history(历史)

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

location(当前)

有关当前URL的信息

语法:window.属性名=”属性值”

Window对象的常用方法

常用的方法

方法名称

说明

prompt()

显示可提示用户输入的对话框

alert()

显示带有一个个提示信息和一个缺点按钮的警示框

confirm()

显示一个带有提示信息、缺点和取消按钮的对话框

close()

关闭浏览器

open()

打开一个新的浏览器窗口,加载个定UPRL所知道的文档

set Timeout()

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

set Interval()

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

confirm():将演出一个确认对话框

语法:confirm(对话框中显示的纯文本)

confirm()alert()prompt()区别

 alert():一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变

prompt( ):两个参数,输入对话框,用来提示用户输入一些信息,单击取消按钮则返回null,单击确定按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息

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

open()方法

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

窗口特征

属性名称

说明

heightwidth

窗口文档显示去的高度、宽度。以像素计

lefttop

窗口的x坐标、y坐标。以像素计

 

 

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()

重新加载当前文档

replace()

用新的文档替换当前文档

 

locationhistory对象应用

示例:

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  

<a href="javascript:location.reload()">刷新本页</a>

<a href="javascript:history.back()">返回主页面</a>

 

Document对象

常用属性

名成

说明

referrer

返回载入当前文档的URL

URL

返回当前文档的URLR

语法

document.referrer

document.URL

判断页面是否是链接进入

自动调整到的登录页面

var preUrl=document.referrer;  //载入本页面文档的地址

if(preUrl==""){

      document.write("<h2>您不是从领奖页面进入,5秒后将自动

                         跳转到登录页面</h2>");

      setTimeout("javascript:location.href='login.html'",5000);

}

document对象的常用方法

名称

说明

getElementById()

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

getElementByName()

返回带有指定名称的对象的集合(相同name属性)

getElementByTagName()

返回带有指定标签名的对象的集合(相同的元素)

write()

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

动态改变层、标签中的内容

document.getElementById("id元素"). innerHTML="改成后的文字";

访问相同name的元素

访问相同标签内容

Date对象

JavaScript内置对象

Array:用于在单独的变量名中存储一系列的值

String:用于支持对字符串的处理

Math:用于执行常用的数学任务,它包含了若干个数字常量 和函数

Date:用于操作日期和时间

 

语法: var日期对象=new Date(参数)

 

 

常用方法

方法

说明

getDate()

返回 Date 对象的一个月中的每一天,其值介于131之间

getDay()

返回 Date 对象的星期中的每一天,其值介于06之间

getHours()

返回 Date 对象的小时数,其值介于023之间

getMinutes()

返回 Date 对象的分钟数,其值介于059之间

getSeconds()

返回 Date 对象的秒数,其值介于059之间

getMonth()

返回 Date 对象的月份,其值介于011之间

getFullYear()

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

getTime()

返回自某一时刻(197011日)以来的毫秒数

 

 

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();例如:0.6273608814137365

定时函数

setTimeout()

语法:setTimeout(“调用的函数”,等待的毫秒数)

示例:var myTime=setTimeout(“disptime()”,1000);

 

setInterval()

语法:setInterval(“调用的函数”,等待的毫秒数)

示例:var myTime=setInterval(“disptime()”,1000);

 

clearTimeout()

语法:clearTimeout(setTimeout()返回值的ID)

示例:var  myTimesetTimeout("disptime() ", 1000 );

clearTimeout(myTime)

 

clearInterval()

语法:clearInterval(setTimeout()返回值的ID)

示例:var  myTimesetInterval("disptime() ", 1000 );

clearInterval(myTime)