小强的HTML5移动开发之路（32）—

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 ...

随机推荐

18. springboot整合jsp
转自:https://blog.csdn.net/u012562943/article/details/51836729
IOS系统不兼容position: fixed;属性的解决方案
position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...
Hypervisor, computer system, and virtual processor scheduling method
A hypervisor calculates the total number of processor cycles (the number of processor cycles of one ...
LeetCode Algorithm 07_Reverse Integer
Reverse digits of an integer. Example1: x = 123, return 321Example2: x = -123, return -321 click to ...
【Codeforces Round #301 (Div. 2) A】 Combination Lock
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟水题 [代码] #include <bits/stdc++.h> using namespace std; cons ...
怎样用Adobe Acrobat 7 Pro把PDF文档拆分成多个啊？
这个pdf文档里有多篇文章,我想把他们分开并分别保存在独立的pdf文档.怎么操作?我的电脑基础不太好,麻烦说得详细一些. Adobe Acrobat 7 Pro拆分PDF文档的方法: 1.点左边的“书 ...
Android小经验
转载自:http://mp.weixin.qq.com/s?__biz=MzA4MjU5NTY0NA==&mid=404388098&idx=1&sn=8bbbba7692dc ...
C# AutoMapper
http://www.cnblogs.com/xlhblogs/p/3356748.html
洛谷 P3871 中位数
->题目链接题解: 暴力经鉴定,此题数据水到没朋友. #include<algorithm> #include<iostream> #include<cstdi ...
【47.40%】【codeforces 743B】Chloe and the sequence
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

小强的HTML5移动开发之路（32）—— JavaScript回顾7

小强的HTML5移动开发之路（32）—— JavaScript回顾7的更多相关文章

随机推荐

热门专题