博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript_BOM对象
阅读量:6651 次
发布时间:2019-06-25

本文共 2931 字,大约阅读时间需要 9 分钟。

BOM(浏览器对象模型),它可以对浏览器窗口进行访问和操作,使用BOM,我们可以移动窗口、改变状态中的文本及执行其他与页面内容不直接相关的动作。

简而言之:BOM对象的功能就是使JavaScript有能力与浏览器’对话’,以便达到我们想要的效果。
一.Window对象
1.简单说明
所有的浏览器都支持window对象;
从概念上来讲,一个HTML文档对应一个window对象;
从功能上来说,它可以控制浏览器的窗口;
从使用上讲,window对象不需要创建对象,直接使用即可。
2.window对象方法
2.1.alert():页面弹框提醒

var s =window.alert("hi");      //返回结果为undefined,即无返回值    console.log('s='+s);

2.2.confirm():页面弹框让进行选择,返回值为布尔值(选择'确认",则返回true;选择'取消'返回false)

var res= window.confirm("this is a person ?")    console.log('res='+res);

2.3.prompt():页面弹框让用户进行输入,点击'确定'后返回值为用户输入的字符串值,点击'取消'后,返回值为null

var  name = window.prompt("pelase input your name:");    console.log('name = '+name);

注意:window对应为全局对象(全局变量、内置对象),所以在使用过程中可以不带'window.'而直接使用window的所有方法;例如:

var  age = prompt("pelase input your age:");    console.log('age = '+age);

2.4.open(url)打开一个新的浏览器窗口或者查找一个一命名的窗口

var s = open("http://www.baidu.com");   console.log('s='+s);

2.5.close()关闭浏览器窗口

close();
2.6.setInterval(函数名(不能带括号,不能带参数),循环定时器,它是按照指定的周期(单位:毫秒)循环反复地来调用函数或者计算表达式,即:每隔多长时间执行一次函数,若没有clearInterval来处理则永远不会停止,永久执行。
例1(在网页上每隔一秒显示一次时间):

setInterval(show,1000)function show(){var time = new Date();var showtime = time.toLocaleTimeString();    document.write("show time:"+showtime+"
");}

例2(页面上点击输入框立即显示当前时间,并每隔1秒中刷新一次时间;点击’停止’按钮则停止刷新页面时间):

    
Title

2.7.clearInterva(定时器名称):取消由setInterval()设置的timeout

clearInterval(定时器名称) 注:其中定时器名称是由setInterval()生成的对象并赋值的,它是和setInetrva()结合使用的;例如:

var lock;//定义全局变量(定时器名称)方便后面的clearInterval()函数使用function begin() {    '点击输入框就在页面上显示当前时间并每秒钟刷新一次--定时器功能'    if(lock==undefined){        showtime(); //一开始点击就显示时间(否则会等待1S后才开始显示)        lock = setInterval(showtime,1000); //生成一个定时器对象    }}clearInterval(lock);

2.8.setTimeout(函数名(不带括号,不能带参数),等待时间):在指定的毫秒时间后调用函数或计算表达式,即:按照设置的等待时间执行一次函数。(注意:与setInterval的区别是:setInterval是循环永久的执行函数,而setTimeout是只执行一次函数)

setTimeout(函数名(不带括号,不能带参数),等待时间),例如:

2.9.clearTimeout(任务器名称):取消由setTimeout()设置的timeout

clearTimeout(任务器名称) 任务器是由setTimeout()函数生成的对象,它是与setTimeout()结合使用的。例如:

3.window对象的history子对象

history对象包含用户在浏览器窗口中访问过的URL;
history对象是window对象的一部分,可以通过window.history属性对其进行访问。
history对象包含的属性方法有:
3.1 back() 加载history列表的前一个URL页面;
3.2 forward() 加载history列表中的该页面之后的一个URL页面;
3.3 go(1或-1) 加载history列表中的具体某一个页面。
history.go(1) = history.forward()
history.go(-1) = history.back()
代码实例:
js_history1.html文件

    
js_history1

a:ToHistory2.html

forward:Tohistory1.html

这是html1页面

js_history2.html文件

    
js_history2

Tohistory1.html

点击它也可Tohistory1.html

这是html2页面

4.window对象的location子对象

location对象包含有关当前URL的信息;
location对象是window对象的一部分,可通过window。Location属性来进行访问。
location对象的方法
1.location.assign(url) 链接到指定的url页面;
2.location.reload() 刷新页面
3.location.replace(newurl)
实例代码:

    
location演示

location.reload()方法演示

注意:location.assign(url)和location.replace(newurl)

的区别:assign()方法可以进行页面前进和后退操作而replace()方法不可以,replace()方法是重新打开一个全新的页面。

转载于:https://blog.51cto.com/10836356/2286338

你可能感兴趣的文章
数字化经济具备的三大特征
查看>>
ZooKeeper分布式架构实战系列(01):ZooKeeper概念、功能、架构、与使用场景和面试题 ...
查看>>
CSS_伪元素_伪类
查看>>
ORACLE中Like与Instr模糊查询性能大比拼
查看>>
【深度分析】汽车零部件供应商管理+采购体系
查看>>
linux 天才排序算法??
查看>>
Java单例设计模式的理解与常规实现方式
查看>>
正则表达式上——基本语法
查看>>
PHPStorm File and Code Template
查看>>
AI技术加速普及喜大普奔?微软CTO认为应持谨慎乐观的态度
查看>>
mysql pxc强一致性集群
查看>>
SpringBoot三部曲之Controller 请求日志切面 AOP
查看>>
Innodb:insert 第一次进行乐观插入逻辑(二级索引)
查看>>
PHP异步:在PHP中使用 fsockopen curl 实现类似异步处理的功能
查看>>
DOM 深入学习 - 1
查看>>
编程语言之父谈语言设计,龟叔大赞 TypeScript
查看>>
Scrapy1.4最新官方文档总结 4 爬虫
查看>>
Spring cloud之/bus/refresh接口无用
查看>>
Markdown语法(二)
查看>>
微博粉丝通实操,其实你在给别人养粉。
查看>>