BOM模型brower object model(浏览器对象模型),通过浏览器内置的一些对象可以操作浏览器本身。
DOM是用来操作页面的,BOM是用来操作浏览器本身的。
BOM是没有规范的,但是大部分浏览器都支持如下几个对象
1、Window对象:表示整个窗口
(1)open方法:(名字,特性,高度宽度,工具栏,滚动条)
(2)setTimeout方法:setTimeout(fn, 毫秒); //第一个参数必须是一个函数名(不能加括号)
<html>
<head>
<script>
function f1(){
//win指向了新打开的窗口
var win = window.open('day05_03','wi_1',
'width=400,height=400');
setTimeout(function(){
win.close();
}, 5000);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="f1();"/>
</body>
</html>
(3)setInterval方法
var taskId = setInterval(fn, 毫秒); //在指定的时间间隔后执行某个函数
(4)clearInterval方法
clearInterval(taskId); //取消setInterval的任务
<html>
<head>
<style>
#d1{
width:80px;
height:80px;
background-color:blue;
position:relative;
}
</style>
<script src="myjs.js"></script>
<script>
function f2(){
var v1 = parseInt($('d1').style.left);
$('d1').style.left = v1 + 50 + 'px';
}
function f1(){
var taskId = setInterval(f2, 500);
setTimeout(function(){
clearInterval(taskId);
},5000)
}
</script>
</head>
<body>
<div id="d1" style="left:10px;"></div>
<input type="button" value="click me"
onclick="f1();"/>
</body>
</html>
(5)alert()方法 弹出一个警告对话框
(6)confirm()方法
var flag = confirm(string); //string为提示信息、flag是返回true或false
(7)prompt方法
var info = prompt(string)
<html>
<head>
<script>
function f3(){
var flag = confirm('你喜欢钱吗?');
alert(flag);
}
function f4(){
var info = prompt('请输入手机号');
alert('你输入的手机号是:' + info);
}
</script>
</head>
<body>
<input type="button" value="click me"
onclick="f4();"/>
</body>
</html>
2、Document对象:代表整个文档的根
getElementById(id);
createElement(tagName);
write(string); 在指定的位置输出相关信息
<html>
<!-- document对象 -->
<head></head>
<body style="font-size:30px;">
开始输出helloword<br/>
<script>
for(i=0; i<100; i++){
document.write('hello world<br/>');
}
</script>
</body>
</html>
3,Location对象:封装了浏览器地址栏的相关信息
href属性:指定要加载的页面
reload方法:重新加载当前页面,相当于刷新
<html>
<!-- location对象 -->
<head></head>
<body>
<input type="button"
value="跳转到另外一个页面" onclick="location.href = 'day05_04.html';"/><br/>
<input type="button"
value="刷新当前页面" onclick="location.reload();"/>
</body>
</html>
4,History对象:封装了浏览器已经访问过的页面的相关信息
back():后退
forward():前进
go(参数):正数前进,负数后退
<html>
<!-- history对象 -->
<head></head>
<body>
<input type="button"
value="点这里后退" onclick="history.back();"/>
<input type="button"
value="点这里前进" onclick="history.forward();"/>
<input type="button"
value="点这儿后退" onclick="history.go(-1);"/>
</body>
</html>
5,Navigator对象:封装了浏览器的相关信息,(比如:类型,版本)
<html>
<!--navigator对象-->
<head></head>
<body>
现在访问的浏览器的相关信息如下:<br/>
<script>
var info;
//for in循环:主要用于遍历对象
for(propName in navigator){ //propName是任意变量
// 将navigator对象的属性名保存到propName变量里
info += propName + ';' +navigator[propName] + '<br/>';
}
document.write(info); //在当前页面输出
</script>
</body>
</html>
<html>
<!--检测浏览器类型-->
<head>
<script>
function f1(){
if((navigator.userAgent).indexOf('Firefox')>0){
alert("当前浏览器是Firefox");
}else if(navigator.userAgent.indexOf('MSIE')>0){
alert("当前浏览器是IE");
}else{
alert("其他浏览器");
}
}
</script>
</head>
<body>
<input type="button"
value="获得当前浏览器的类型" onclick="f1();"/>
</body>
</html>
6,Screen对象:浏览器所在的屏幕的相关信息
<html>
<head>
<script>
function f2(){
alert(screen.width + ' ' +
screen.height);
}
</script>
</head>
<body>
<input type="button"
value="获得screen相关信息" onclick="f2();"/>
</body>
</html>
分享到:
相关推荐
尤其是有洁癖的人更是如此,总是喜欢时不时的杀进程杀服务,可是由于android开源的特殊性,你会发现被干掉的服务又一次的重新复活了,总之生命力极其强悍,业界称之为——打不死的小强。这里是它怎么做的,哈哈
小强老师《零基础学习软件测试》系列视频之QTP使用指南——界面分析
“小强一号”——实验机器人制作过程(图文.docx
小强老师《零基础学习软件测试》系列视频之QTP使用指南
小强老师《零基础学习软件测试》系列视频之QTP使用指南
小强的HTML5移动开发之路系列博客中的一个视频播放器的例子。
详细请看《 小强的HTML5移动开发之路(42)》:http://blog.csdn.net/column/details/dawanganban-html5.html
里面有小强开发板程序,对初学者有很大帮助
HTML、CSS、JavaScript网页制作从入门到精通
小强老师软件测试基础课程5-软件质量基础知识
小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换 小强多个模版替换
小强影音盒是一个在线电影和视频播放器,能播放网上的海量电影。如果想看最新版本到:http://www.5aie.com/xiaoqiangplayer/flvshuoming.htm 查看。
小强多个模版替换 快速发布信息,让你的工作更有效率。
小强开发板原理图版本,在网上是很不好找到的 ,不过需要的人可能也不多
小强通话时间统计,显示归属地,统计指定号码通话时间
小强升职记 实现目标思维导图
ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip ASP实例开发源码—一个非常小巧的自动更新asp新闻系统 小强修正版.zip
TinyButStrong version 2.05 TinyButStrong (TBS) 是一个PHP类,它能让你开发系统时能干净...没问题,TBS 同样能够让你创建 JavaScript 动态脚本. 正如它的名字一样, TBS 易用, 强大且快速. 它完全是 °~° 免费的°~°.
边学边练,依托网页实际开发,深入讲解JavaScript在网页中的各种应用;实例讲解,通过实例详细讲解每个知识点的实际应用。 本书共分为12章,分别介绍Web脚本编写和JavaScript语言的概念、JavaScript的基础知识、文档...