BOM模型
BOM:浏览器对象模型(Browser Object Model)
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
BOM可实现功能
- 弹出新的浏览器窗口
- 移动、关闭浏览器窗口以及调整窗口的大小
- 页面的前进、后退
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一。
Window对象的常用属性
常用属性
属性名称 | 说 明 |
---|---|
history | 有关客户访问过的 URL 的信息 |
location | 有关当前 URL 的信息 |
语法
window.属性名="属性值";
eg:
window.location="http://www.baidu.com";
常用方法
方法名称 | 说 明 |
---|---|
prompt( ) | 显示可提示用户输入的对话框 |
alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
close( ) | 关闭浏览器窗口 |
open( ) | 打开一个新的浏览器窗口,加载给定 URL 所指定的文档 |
setTimeOut( ) | 在指定的毫秒数后调用函数或计算表达式 |
setInterval( ) | 按照指定的周期(以毫秒计)来调用函数或表达式 |
confirm( )、alert( )和prompt( )区别
- alert( ):一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变
- prompt( ):两个参数,输入对话框,用来提示用户输入一些信息,单击 “取消” 按钮则返回null,单击 “确定” 按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息
- confirm( ):一个参数,确认对话框,显示提示对话框的消息、“确定” 按钮和 “取消” 按钮,单击 “确定” 按钮返回true,单击 " 取消" 按钮返回false,因此常与if-else语句搭配使用
open( )方法
window.open(URL,name,features,replace)
参数 | 描述 |
---|---|
URL | 一个可选的字符串,声明了要在新窗口中显示的文档的URL。如何省略了这个参数,或则它的值是空字符串,那么新窗口就不会显示任何文档 |
name | 可选。指定target属性或窗口的名称。支持以下值_blank(加载到一个新的窗口,默认)、_parent(加载到父框架)、_self(替换当前页面)、_top(替换任何可加载的框架集)、name(窗口名称) |
features | 可选。一个逗号分隔的项目列表。支持以下值:在这不做详细介绍,下面会提到 |
replace | Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:true- (URL替换浏览历史中的当前条目)。false- (URL 在浏览历史中创建新的条目) |
上面features会在接下来提到
窗口特征(features)
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() | 用新的文档替换当前文档 |
Document 对象
常用属性
名称 | 说明 |
---|---|
referrer | 返回载入当前文档的URL |
URL | 返回当前文档的URL |
document对象的常用方法
名称 | 说 明 |
---|---|
getElementById() | 返回对拥有指定id的第一个对象的引用 |
getElementsByName() | 返回带有指定名称的对象的集合 |
getElementsByTagName() | 返回带有指定标签名的对象的集合 |
write() | 向文档写文本、HTML表达式或JavaScript代码 |
innerHTML
innerHTML在 JS 中是双向功能,获取对象的内容 或 向对象插入内容
innerHtml 属性用于设置或返回指定标签之间的 HTML内容。
语法
object.innerHTML="HTML";//设置
var html=object.innerHTML;//获取
JavaScript 内置对象
Array:用于在单独的变量名中存储一系列的值
String:用于支持对字符串的处理
Math:用于执行常用的数学任务,它包含了若干个数字常量和函数
Date:用于操作日期和时间
Date对象
语法
var 日期对象=new Date(参数);
eg:
var today=new Date();//返回当前日期和时间
var today=new Date("June 28,2020,20:03:24");
常用方法
方法 | 说 明 |
---|---|
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日)以来的毫秒数 |
Math对象
常用方法
方法 | 说 明 | 示例 |
---|---|---|
ceil() | 对数进行上舍入 | Math.ceil(25.5);返回26 |
floor() | 把数进行下舍入 | Math.floor(25.5);返回25 |
round() | 把数四舍五入为最接近的数 | Math.round(25.5);//返回26 |
random() | 返回0~1之间的随机数(不含1) | Math.random();返回0.654598898665 |
定时函数
setTimeout()
语法
setTimeOut("调用的函数","等待的毫秒数");//只执行一次
eg:
var myTime=setTimeOut("disptime()",1000);//1秒后执行函数
disptime()一次
setInterval()
语法
setInterval("调用的函数",间隔的毫秒数);//每隔多少毫秒执行一次
eg:
var myTime=setInterval("disptime()",1000);//每隔1秒执行函数
disptime()一次
提示
如果要多次调用,使用setInterval()或者让setTimeout()里的函数自身再次调用
setTimeout()。
清除函数
clearTimeout
语法
clearTimeout(setTimeout()返回的ID值)
eg:
var myTime=setTimeout("disptime()",1000);
clearTimeout(myTime);
clearInterval()
语法
clearInterval(setInterval()返回的ID值)
eg:
var myTime=setInterval("disptime()",1000);
clearInterval(myTime);