2014093009570524.gif

449064-20150901201202388-1759134225.png

BOM概述

BOM（浏览器对象模型，Browser Object Model），即可以将浏览器的各个部分抽象成对象在JavaScript中进行调用和完成特定的功能。比如对历史记录，地址栏，整个窗口等都可以进行操作。

注意

调用方法时，可以使用"_name()"或者_name，不可以"_name"这样调用。

BOM对象

1. Window对象

1.1 常用属性

  • closed：返回窗口是否已被关闭。

  • document：对 Document 对象的只读引用。请参阅 Document 对象。

  • location：用于窗口或框架的 Location 对象。请参阅 Location 对象。

  • Navigator：对 Navigator 对象的只读引用。请参数 Navigator 对象。

  • opener：返回对创建此窗口的窗口的引用。

  • parent：返回父窗口。

  • screen：对 Screen 对象的只读引用。请参数 Screen 对象。

  • self：返回对当前窗口的引用。等价于 Window 属性。

  • status：设置窗口状态栏的文本。

  • top：返回最顶层的先辈窗口。

  • window：window 属性等价于 self 属性，它包含了对窗口自身的引用。

1.2 常用方法

  • alert()：显示带有一段消息和一个确认按钮的警告框。

  • confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

  • prompt()：显示可提示用户输入的对话框。

  • open()：打开一个新的浏览器窗口或查找一个已命名的窗口，通过返回值为子窗口对象，子窗口通过opener传递数据。

  • showModalDialog()：打开一个新的浏览器模式窗口，通过参数和返回值传递数据。

  • close()：关闭浏览器窗口。

  • focus()：把键盘焦点给予一个窗口。

  • blur()：把键盘焦点从顶层窗口移开。

  • setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

  • clearInterval()：取消由 setInterval() 设置的 timeout。

  • setTimeout()：在指定的毫秒数后调用函数或计算表达式。 

  • clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

1.3 集合

frames[]：返回窗口中所有命名的框架。[]中可以是索引，也可以是name。

1.4 窗口结构

self指代本窗口，和window相同，parent指代父窗口，top指代顶层窗口。结构如图：

spacer.gif

1.5 案例

父子传值（父子关系只存在于框架frame的情况）（chrome[本地]，IE11）

父子传值-父.html：

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>父子传值-父</title>     <link rel="stylesheet" type="text/css" href="css.css">    <script type="text/javascript">	function _father(){		var content = document.getElementById("input").value;		var _ch = self.frames[0].document.getElementById("content");		_ch.innerHTML = content;	}    </script></head> <body>	<br />	<div>父页面</div>	<br />	<div id="whole">		<input type="text" id="input" value="father"/>		<br /><br />		<input type="button" value="传值到子页面" onclick="_father()">		<br /><br />		<div>传送显示内容：</div>		<div id="content"></div>	</div>	<!--以下是子窗口-->    <div id="sonFrame"><br />子窗口<br /><br />        <iframe id="iframe" src="父子传值-子.html"></iframe>    </div></body> </html>

父子传值-子.html：

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>父子传值-子</title>     <link rel="stylesheet" type="text/css" href="css.css">    <script type="text/javascript">    function _son() {        var content = document.getElementById("input").value;        var _fa = self.parent.document.getElementById("content");        _fa.innerHTML = content;    }    </script></head> <body>    <div id="whole">        <input type="text" id="input" value="son" />        <br />        <br />        <input type="button" value="传值到父页面" onclick="_son()">        <br />        <br />        <div>传送显示内容：</div>        <div id="content"></div>    </div></body> </html>

效果：

spacer.gif

窗口创建和信息传递（chrome[本地]，IE11）

新窗口-父：

<!DOCTYPE html><html><head>	<meta charset="utf-8" />	<title>新窗口-父</title>	<style type="text/css">	#bank{		width: 200px;		height: 30px;		border: 2px solid red;		text-align: center;		line-height: 30px;	}	</style> 	<script type="text/javascript">	function _open(){		/*		创建非模式窗口		//window.open(URL,name,features,replace)		window.open("新窗口-子.html", "城市列表", "width=100px;height=30px;");		*/		// 创建模式窗口		var value = window.showModalDialog("新窗口-子.html");		document.getElementById('bank').innerHTML = value;	}	</script></head><body>	<div id="bank"></div>	<input type="button" value="请选择城市" onclick="_open();"/></body></html>

新窗口-子：

<!DOCTYPE html><html><head>	<meta charset="utf-8" />	<title>新窗口-子</title>	<script type="text/javascript">	function _transfer(name){		/*		非模式窗口通过DOM传递信息		self.opener.document.getElementById("bank").innerHTML = name.value;		window.close();		*/		// 模式窗口信息返回		window.returnValue = name.value;		window.close();	}	</script></head><body>	<input type="radio" id="bj" value="北京" name="city"  onclick="_transfer(this);"/>	<label for="bj">北京</label>	<input type="radio" id="sh" value="上海" name="city"  onclick="_transfer(this);"/>	<label for="sh">上海</label>	<input type="radio" id="gz" value="广州" name="city"  onclick="_transfer(this);"/>	<label for="gz">广州</label>	<input type="radio" id="sz" value="深圳" name="city"  onclick="_transfer(this);"/>	<label for="sz">深圳</label></body></html>

效果：

点击“请选择城市”弹出新网页，选择城市后新网页自动关闭，并将城市显示在原网页中。

spacer.gif

三种弹窗

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>三种弹窗</title></head> <body>    <script type="text/javascript">    alert("test");    var s = confirm("确定删除吗");    if (s) {        alert("你点了确定");    } else {        alert("你点了取消");    }    var t = prompt("请输入行数", 5);    for (var i = 0; i < t; i++) {        document.write("<hr width=" + (i * 20) + "px />");    }    </script></body> </html>

其他BOM对象

1. Navigator对象

1.1 常用属性

  • appName：返回浏览器的名称。

  • appVersion：返回浏览器的平台和版本信息。

  • cookieEnabled：返回指明浏览器中是否启用 cookie 的布尔值。

  • platform：返回运行浏览器的操作系统平台。

1.2 示例

alert(navigator.appName); // 显示浏览器名称alert(navigator.appVersion); // 显示浏览器版本信息

2. Screen对象

2.1 常用属性

  • width：返回屏幕宽度。

  • height：返回屏幕高度。

2.2 示例

alert(screen.width);alert(screen.height);

3. History对象

3.1 常用方法

  • back()：加载 history 列表中的前一个 URL。

  • forward()：加载 history 列表中的下一个 URL。

  • go()：加载 history 列表中的某个具体页面。

3.2 示例

<a href="javascript:history.forward()">前进，相当于（go(1)）</a><a href="javascript:history.back()">后退，相当于（go(-1)）</a>

4. Location对象

4.1 常用属性

href：设置或返回完整的 URL。

4.2 常用方法

reload()：重新加载当前文档。

4.3 示例

跳转到相关网页。

function _location(){	location.href = "test.html";}

定时器

1. 概述

定时器是Window对象中的方法，可以进行时间上的设定，在特定时间或者每隔一段时间运行特定功能。

2. 常用方法

  • setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。

    setInterval(code, millisec)

    code（必须）：要调用的函数或要执行的代码串。

    millisec（必须）：周期性执行或调用 code 之间的时间间隔，以毫秒计。

  • clearInterval()：取消由 setInterval() 设置的 timeout。

    clearInterval(id_of_setinterval)

    id_of_setinterval：由 setInterval() 返回的 ID 值。

  • setTimeout()：在指定的毫秒数后调用函数或计算表达式。

    setTimeout(code, millisec)

    code（必需）：要调用的函数后要执行的 JavaScript 代码串。

    millisec（必需）：在执行代码前需等待的毫秒数。

  • clearTimeout()：取消由 setTimeout() 方法设置的 timeout。clearTimeout(id_of_settimeout)id_of_settimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

注意：

setTimeout()只在指定时间后调用一次function，若想要循环多次调用，请使用递归。

3. 示例

随机数显示

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>定时器</title>    <style type="text/css">    #d1,#d2 {        border: 1px solid blue;        width: 100px;        height: 30px;        line-height: 30px;        text-align: center;    }    input{    	width: 100px;    	height: 20px;    }    </style>     <script type="text/javascript">    var out = "";    function _random1() {        var r = Math.floor(Math.random() * 100);        document.getElementById("d1").innerHTML = r;        out = setTimeout("_random1()", 500);    }     function _random() {        var r = Math.floor(Math.random() * 100);        document.getElementById("d2").innerHTML = r;    }    function _random2() {    	out = setInterval("_random()", 500);    }    </script></head> <body>    <div id="d1"></div>    <input type="button" value="setTimeout方法演示" onclick="_random1();"/>    <div id="d2"></div>    <input type="button" value="setInterval方法演示" onclick="_random2();"/></body> </html>

4. 案例

抽奖

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>抽奖</title>     <style type="text/css">    input {        width: 100px;        height: 50px;    }    </style>     <script type="text/javascript">    var rand = "";         function _rand() {        rand = Math.floor(Math.random() * 100);        document.getElementById('result').innerHTML = rand;    }    var time = "";    var flag = true;    function _start() {        if (flag) {            time = setInterval(_rand, 10);            document.getElementById('go').value = "停止";        } else {            clearInterval(time);            document.getElementById('go').value = "开始";        }        flag = !flag;    }    </script></head> <body>    <div id="result"></div>    <br />    <div id="b">        <input type="button" id="go" value="抽奖" onclick="_start();" />    </div></body> </html>

效果（点击一次抽奖，再次点击停止）

spacer.gif

事件（Event对象）

1. 鼠标事件

1.1 常用属性

  • onclick：当用户点击某个对象时调用的事件句柄。

  • ondblclick：当用户双击某个对象时调用的事件句柄。

  • onmousedown：鼠标按钮被按下。

  • onmousemove：鼠标被移动。

  • onmouseout：鼠标从某元素移开。

  • onmouseover：鼠标移到某元素之上。

  • onmouseup：鼠标按键被松开。

  • clientX：返回当事件被触发时，鼠标指针的水平坐标。

  • clientY：返回当事件被触发时，鼠标指针的垂直坐标。

1.2 示例

<html> <head>    <title>鼠标事件</title>    <style type="text/css">    #div1 {        border: 1px solid red;        width: 500px;        height: 500px;    }    </style>    <script type="text/javascript">    function _onmouseover() {        alert("鼠标已经移上来了");    }     function _onmouseout() {        alert("鼠标已经移走了");    }     function _onmousemove() {        window.status = event.clientX + "," + event.clientY;    }     function _btn() {        alert("点击事件");    }    </script></head> <body>    <div id="div1" onMouseMove="_onmousemove()"></div>    <input type="text" name="username" onMouseOver="_onmouseover();" onMouseOut="_onmouseout()" />    <input type="button" value="点击事件" onclick="_btn()" /></body> </html>

2. 键盘事件

2.1 常用属性

  • onkeydown：某个键盘按键被按下。

  • onkeypress：某个键盘按键被按下并松开。

  • onkeyup：某个键盘按键被松开。

2.2 示例

<html> <head>    <title>键盘事件</title>    <style type="text/css">    #div1 {        border: 1px solid red;        width: 100px;        height: 100px;    }    </style>    <script type="text/javascript">    function _onkeydown() {        document.getElementById("div1").innerHTML += "onkeydown<br/>";    }     function _onkeypress() {        document.getElementById("div1").innerHTML += "onkeypress<br/>";    }     function _onkeyup() {        document.getElementById("div1").innerHTML += "onkeyup<br/>";    }     function _changeInput() {        //找到回车键的keyCode        if (event.keyCode == 13) {            //将keyCode的值赋值为制表符的值            event.keyCode = 9;        }    }    </script></head> <body>    <div id="div1" onKeyDown="_onkeydown()" onKeyUp="_onkeyup()" onKeyPress="_onkeypress()"></div>    用户名：    <input type="text" name="username" onKeyDown="_changeInput()" /> 昵称：    <input type="text" name="nickname" /></body> </html>

3. 加载退出事件

3.1 常用属性

  • onload：一张页面或一幅图像完成加载。

  • onunload：用户退出页面。

3.2 示例

<html> <head>    <title> 加载卸载事件</title>    <script type="text/javascript">    function _onload() {        alert("当页面加载的时候就执行");    }     function _onunload() {        alert("当页面被卸载的时候执行");    }    </script></head> <body onload="_onload()" onunload="_onunload()"></body> </html>

4. 聚焦离焦事件

4.1 常用属性

  • onfocus：元素获得焦点。

  • onblur：元素失去焦点。

4.2 示例

输入框验证[正则验证在chrome，IE11中出现问题]

<html> <head>    <title> 聚焦离焦事件 </title>    <script type="text/javascript">    var flag = true;    function _onfocus() {    	if(flag) {        	document.getElementById("tel").value = "";        	flag = false;    	}        var msg = document.getElementById("msg");        msg.innerHTML = "";    }     function _onblur() {        var tel = document.getElementById("tel").value;        var msg = document.getElementById("msg");        var reg = /^[1][3578][0-9]{9}/;        if (reg.test(tel)) {        	msg.style.color = "green";            msg.innerHTML = "正确";        } else {        	msg.style.color = "red";            msg.innerHTML = "错误，请重新输入";        }    }    </script></head> <body>    <input type="text" id="tel" name="tel" value="请输入手机号" onfocus="_onfocus();" onblur="_onblur();" />    <span id="msg"></span></body> </html>

效果

spacer.gif

5. 提交重置事件

5.1 常用属性

  • onsubmit：提交按钮被点击。

  • onreset：重置按钮被点击。

5.2 注意

  • onsubmit和onreset都是针对表单说的，所以要写在表单标签内。

  • onsubmit和onreset事件调用格式必须是 return 方法名。

  • onsubmit的方法必须有个返回值。

5.2 示例

<html> <head>    <title>提交重置事件</title>    <script type="text/javascript">    function _onsubmit() {        var uname = document.getElementsByName("username")[0].value;        var psswd = document.getElementsByName("password")[0].value;        if (uname == '') {            alert("请输入用户名");            return false;        }        if (psswd == '') {            alert("请输入密码");            return false;        }        return true;    }    </script></head> <body>    <form action="" method="get" onsubmit="return _onsubmit();">        用户名：<input type="text" name="username" />        <br/>        密码：<input type="password" name="password" />        <br/>        <input type="submit" value="提交" />        <input type="reset" value="重置" />    </form></body> </html>

6. 选择改变事件

6.1 属性

onchange：用户改变域的内容。

6.2 案例

城市区域选择

<!DOCTYPE html><html> <head>    <meta charset="utf-8" />    <title>城市选择</title>     <script type="text/javascript">    function _changearea() {        var arr = new Array();        arr[1] = ["海淀区", "昌平区", "东城区", "西城区"];        arr[2] = ["黄浦区", "浦东新区", "徐汇区", "静安区"];        arr[3] = ["田家庵区", "谢家集区", "潘集区", "大通区"];        arr[4] = ["建邺区", "玄武区", "鼓楼区"];        var city = document.getElementById('city');        var area = document.getElementById('area');                if (city.value == "none") {        	area.length = 1;        	return;        } else {            area.length = 1;            for (var i = 0; i < arr[city.value].length; i++) {                area.add(new Option(arr[city.value][i], arr[city.value][i]));        	}    	}    }    </script></head> <body>    <select id="city" onchange="_changearea();">        <option value="none">--请选择城市--</option>        <option value="1">北京</option>        <option value="2">上海</option>        <option value="3">淮南</option>        <option value="4">南京</option>    </select>    <select id="area">        <option>--请选择地区--</option>    </select></body> </html>
转载至：http://blog.csdn.net/jacobvv/article/details/42835133
   如需转载请自行联系原作者