【JavaScript】——BOM+demo
2015-11-15 15:10
651 查看
是什么:
BOM(Browser Object Model)浏览对象模型。提供了独立于内容而与浏览器窗口进行交互的对象。由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
什么用:
BOM提供了独立于内容而与浏览器窗口进行交互的对象。所以其主要应用于与浏览器窗口的交互。如:弹出提示框,获取窗口大小等与窗口内容无关的功能。JavaScript能很好的体现面向对象的思想,在这里也凸显了出来。window:
window是BOM的核心对象,它表示浏览器的一个实例。属性和方法:
与window直接关联的有6个属性,与window的document属性关联的又有5个属性,这11个属性本身也是对象。通常,window下的属性和方法,可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。
例如:window.alert()和alet()是一个意思。
系统对话框:
这块的内容就相对很实用了。系统对话框与浏览器中显示的网页没有关系,也不包含HTML。
实用demo:
<span style="font-family:KaiTi_GB2312;font-size:18px;">//确定和取消 confirm('请确定或者取消'); //这里按哪个都无效 if (confirm('请确定或者取消')) { //confirm 本身有返回值 alert('您按了确定!'); //按确定返回true } else { alert('您按了取消!'); //按取消返回false }</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">//输入提示框 var num = prompt('请输入一个数字', 0); //两个参数,一个提示,一个值 alert(num); //返回值可以得到</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">//调出打印及查找对话框 print(); //打印 find(); //查找</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">defaultStatus = '状态栏默认文本'; //浏览器底部状态栏初始默认值</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">status='状态栏文本'; //浏览器底部状态栏设置值 </span>与显示的网页(内容)无关,即如:status='状态栏文本';无论URL百度也好,google也好,浏览器状态栏文本都是你设置的内容,不会随着打开网页的不同而改变。
新建窗口
即:打开一个链接:使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。它可以接受四个参数:1.要加载的URL;2.窗口的名称或窗口目标;3.一个特性字符串;4.
一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。
demo:
<span style="font-family:KaiTi_GB2312;font-size:18px;">open('http://www.baidu.com'); //新建页面并打开百度 open('http://www.baidu.com','baidu'); //新建页面并命名窗口并打开百度 open('http://www.baidu.com','_parent'); //在本页窗口打开百度,_blank 是新建</span>
间歇调用和超时调用
该方法能实现在规定时间执行动作。超时调用:
即在指定的时间过后执行代码:setTimeout()方法,参数为:执行代码和超时时间的毫秒数。demo:
<span style="font-family:KaiTi_GB2312;font-size:18px;">setTimeout("alert('Lee')", 1000); //不建议直接使用字符串</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">function box() { alert('Lee'); } setTimeout(box, 1000); //直接传入函数名即可 setTimeout(function () { //推荐做法 alert('Lee'); }, 1000);</span>使用第二种方法,扩展性好,性能更佳,所以更推荐第二种方法。
间歇调用:
即按指定的时间间隔重复执行代码,直至间歇调用被取消或页面被卸载:setInterval()方法,参数为:执行的代码和间隔毫秒数。demo:
<span style="font-family:KaiTi_GB2312;font-size:18px;">setInterval(function () { //重复不停执行 alert('hanhan'); }, 1000);</span>
取消间歇或超时:
使用clearInterval()方法。取消间歇调用的重要性要远高于取消超时调用,一般认为,使用超时调用来模拟间歇调用是一种最佳模式。在真正的开发环境下,很少使用真正的间歇调用。因为需要根据情况来取消ID,并且可能造成同步的一些问题,我们建议不使用间歇调用,而去使用超时调用。
demo:
间歇调用:<span style="font-family:KaiTi_GB2312;font-size:18px;">var num = 0; //设置起始秒 var max = 5; //设置最终秒 setInterval(function () { //间歇调用 num++; //递增num if (num == max) { //如果得到5 秒 clearInterval(this); //取消间歇调用,this 表示方法本身 alert('5 秒后弹窗!'); } }, 1000); //1 秒</span>
超时调用:
<span style="font-family:KaiTi_GB2312;font-size:18px;">var num = 0; var max = 5; function box() { num++; if (num == max) { alert('5 秒后结束!'); } else { setTimeout(box, 1000);//设置超时调用 } } setTimeout(box, 1000); //执行定时器</span>
location:
location是window对象的属性,也是document的属性,当然,他也是BOM的对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航的功能。最简单的小demo:
<span style="font-family:KaiTi_GB2312;font-size:18px;">alert(location); //获取当前的URL</span>另外可以根据location的不同属性获取URL的不同内容。如:hostname属性,表示主机名。就可以这样获取:
<span style="font-family:KaiTi_GB2312;font-size:18px;">location.hostname = 'han'; //设置主机名,并跳转 alert(location.hostname); //获取当前主机名,</span>
history:
history是window对象的属性,也是BOM的对象之一。它保存着用户上网的记录,从窗口被打开的那一刻算起。当要实现网页跳转(返回上次刚访问的网页),可以利用该对象。
通过判断history.length == 0,得到是否有历史记录。
demo:
<span style="font-family:KaiTi_GB2312;font-size:18px;">function back() { //跳转到前一个URL history.back(); }</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">function forward() { //跳转到下一个URL history.forward(); }</span>
<span style="font-family:KaiTi_GB2312;font-size:18px;">function go(num) { //跳转指定历史记录的URL history.go(num); }</span>
总结:
本篇文章主要介绍了BOM(浏览对象模型)及其常见应用,这些demo都是很实用的小代码块,用的时候,换换属性就可以实现其它类似功能,知识是学不完的,重要的是思想,面向对象的思想(貌似是实现了很多功能,其实只不过是获取了各种属性).....相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法