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>
以上就是 小强的HTML5移动开发之路(32)—— JavaScript回顾7的内容,更多相关内容请关注PHP中文网(www.php.cn)!