小强的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>
<!-- 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的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（33）—— jqMobi基础
一.什么是jqMobi jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询. 版本 jqMobi源码最初在2012年1月 ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
随机推荐
- 如何查看kafka消费者信息？
看kafka消费者信息? 进入cd $ZOOKEEPER_HOME/bin下. ./kafka-run-class.sh kafka.tools.ConsumerOffsetChecker --zoo ...
- c# 调用 C++ dll 传入传出 字符串
c# 调用 C++ dll 传入传出 字符串 2013-07-02 09:30 7898人阅读 评论(2) 收藏 举报 本文章已收录于: 分类: windows 版权声明:随便转载,随便使用. C ...
- amazeui学习笔记--css（HTML元素4）--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
- 【CS Round #48 (Div. 2 only)】Game of Chance
[链接]h在这里写链接 [题意] 在这里写题意 [题解] 在这里写题解 [错的次数] 0 [反思] 在这了写反思 [代码] #include <bits/stdc++.h> using n ...
- Linux 内核源代码分析 chap 2 存储管理 （5）
物理页面分配 linux 内核 2.4 中有 2 个版本号的物理页面分配函数 alloc_pages(). 一个在 mm/numa.c 中, 还有一个在 mm/page_alloc.c 中, 依据条件 ...
- Oracle分页查询的一个存储过程：
create or replace procedure AspNetOraclePager( tableName in varchar2, --表名 fields in var ...
- LA 4329 - Ping pong 树状数组（Fenwick树）
先放看题传送门 哭瞎了,交上去一直 Runtime error .以为那里错了. 狂改!!!!! 然后还是一直... 继续狂改!!!!... 一直.... 最后发现数组开小了.......... 果断 ...
- 三个Bootstrap免费字体和图标库
前言:Bootstrap 简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单 ,深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快, 组件无数 ...
- AE加载不同数据的方法（GeoDatabase空间数据管理）
原文 AE加载不同数据的方法(GeoDatabase空间数据管理) GeoDatabase 先看一下GeoDatabase核心结构模型图: 1 工作空间工厂WorkspaceFactory对象 Wo ...
- 云应用开发之新浪SAE读写云端数据库MySQL
本博文为前篇博文新浪云应用SAE日志查看的延续. 在读写云数据库MySQL之前,须要说明的是,在新浪云平台上使用数据库时.该平台默认会为每个应用单独新建一个数据库database实例.在该实例中再创建 ...