本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：HTML5移动开发之路（32）—— JavaScript回顾7
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>
-
-
<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>
-
-
<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>
-
-
<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>
-
-
<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>
阅读(543) | 评论(0) | 转发(0) |
