您的位置：首页 > Web前端 > JavaScript

[学习笔记]JavaScript之BOM基础

2015-01-18 13:43 483 查看


BOM概述

BOM（浏览器对象模型，BrowserObjectModel），即可以将浏览器的各个部分抽象成对象在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指代顶层窗口。结构如图：





1.5案例

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

父子传值-父.html：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>父子传值-父</title>
<linkrel="stylesheet"type="text/css"href="css.css">
<scripttype="text/javascript">
	function_father(){
		varcontent=document.getElementById("input").value;
		var_ch=self.frames[0].document.getElementById("content");
		_ch.innerHTML=content;
}
</script>
</head>
<body>
	<br/>
<div>父页面</div>
	<br/>
	<divid="whole">
		<inputtype="text"id="input"value="father"/>
		<br/><br/>
		<inputtype="button"value="传值到子页面"onclick="_father()">
		<br/><br/>
<div>传送显示内容：</div>
		<divid="content"></div>
</div>
<!--以下是子窗口-->
<divid="sonFrame"><br/>子窗口<br/><br/>
<iframeid="iframe"src="父子传值-子.html"></iframe>
</div>
</body>
</html>


父子传值-子.html：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>父子传值-子</title>
<linkrel="stylesheet"type="text/css"href="css.css">
<scripttype="text/javascript">
function_son(){
varcontent=document.getElementById("input").value;
var_fa=self.parent.document.getElementById("content");
_fa.innerHTML=content;
}
</script>
</head>
<body>
<divid="whole">
<inputtype="text"id="input"value="son"/>
<br/>
<br/>
<inputtype="button"value="传值到父页面"onclick="_son()">
<br/>
<br/>
<div>传送显示内容：</div>
<divid="content"></div>
</div>
</body>
</html>


效果：





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

<!DOCTYPEhtml>
<html>
<head>
	<metacharset="utf-8"/>
<title>新窗口-父</title>
	<styletype="text/css">
#bank{
		width:200px;
		height:30px;
		border:2pxsolidred;
		text-align:center;
		line-height:30px;
}
</style>
	<scripttype="text/javascript">
	function_open(){
/*
创建非模式窗口
//window.open(URL,name,features,replace)
		window.open("新窗口-子.html","城市列表","width=100px;height=30px;");
*/
		//创建模式窗口
		varvalue=window.showModalDialog("新窗口-子.html");
		document.getElementById('bank').innerHTML=value;
}
</script>
</head>
<body>
	<divid="bank"></div>
	<inputtype="button"value="请选择城市"onclick="_open();"/>
</body>
</html>


新窗口-子：

<!DOCTYPEhtml>
<html>
<head>
	<metacharset="utf-8"/>
<title>新窗口-子</title>
	<scripttype="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>
	<inputtype="radio"id="bj"value="北京"name="city"onclick="_transfer(this);"/>
	<labelfor="bj">北京</label>
	<inputtype="radio"id="sh"value="上海"name="city"onclick="_transfer(this);"/>
	<labelfor="sh">上海</label>
	<inputtype="radio"id="gz"value="广州"name="city"onclick="_transfer(this);"/>
	<labelfor="gz">广州</label>
	<inputtype="radio"id="sz"value="深圳"name="city"onclick="_transfer(this);"/>
	<labelfor="sz">深圳</label>
</body>
</html>


效果：

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





三种弹窗
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>三种弹窗</title>
</head>
<body>
<scripttype="text/javascript">
alert("test");
vars=confirm("确定删除吗");
if(s){
alert("你点了确定");
}else{
alert("你点了取消");
}
vart=prompt("请输入行数",5);
for(vari=0;i<t;i++){
document.write("<hrwidth="+(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示例
<ahref="javascript:history.forward()">前进，相当于（go(1)）</a>
<ahref="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.示例
随机数显示

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>定时器</title>
<styletype="text/css">
#d1,#d2{
border:1pxsolidblue;
width:100px;
height:30px;
line-height:30px;
text-align:center;
}
input{
	width:100px;
	height:20px;
}
</style>
<scripttype="text/javascript">
varout="";
function_random1(){
varr=Math.floor(Math.random()*100);
document.getElementById("d1").innerHTML=r;
out=setTimeout("_random1()",500);
}
function_random(){
varr=Math.floor(Math.random()*100);
document.getElementById("d2").innerHTML=r;
}
function_random2(){
	out=setInterval("_random()",500);
}
</script>
</head>
<body>
<divid="d1"></div>
<inputtype="button"value="setTimeout方法演示"onclick="_random1();"/>
<divid="d2"></div>
<inputtype="button"value="setInterval方法演示"onclick="_random2();"/>
</body>
</html>


4.案例

抽奖
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>抽奖</title>
<styletype="text/css">
input{
width:100px;
height:50px;
}
</style>
<scripttype="text/javascript">
varrand="";
function_rand(){
rand=Math.floor(Math.random()*100);
document.getElementById('result').innerHTML=rand;
}
vartime="";
varflag=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>
<divid="result"></div>
<br/>
<divid="b">
<inputtype="button"id="go"value="抽奖"onclick="_start();"/>
</div>
</body>
</html>


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






事件（Event对象）
1.鼠标事件

1.1常用属性
onclick：当用户点击某个对象时调用的事件句柄。
ondblclick：当用户双击某个对象时调用的事件句柄。
onmousedown：鼠标按钮被按下。
onmousemove：鼠标被移动。
onmouseout：鼠标从某元素移开。
onmouseover：鼠标移到某元素之上。
onmouseup：鼠标按键被松开。
clientX：返回当事件被触发时，鼠标指针的水平坐标。
clientY：返回当事件被触发时，鼠标指针的垂直坐标。


1.2示例
<html>
<head>
<title>鼠标事件</title>
<styletype="text/css">
#div1{
border:1pxsolidred;
width:500px;
height:500px;
}
</style>
<scripttype="text/javascript">
function_onmouseover(){
alert("鼠标已经移上来了");
}
function_onmouseout(){
alert("鼠标已经移走了");
}
function_onmousemove(){
window.status=event.clientX+","+event.clientY;
}
function_btn(){
alert("点击事件");
}
</script>
</head>
<body>
<divid="div1"onMouseMove="_onmousemove()"></div>
<inputtype="text"name="username"onMouseOver="_onmouseover();"onMouseOut="_onmouseout()"/>
<inputtype="button"value="点击事件"onclick="_btn()"/>
</body>
</html>


2.键盘事件

2.1常用属性
onkeydown：某个键盘按键被按下。
onkeypress：某个键盘按键被按下并松开。
onkeyup：某个键盘按键被松开。


2.2示例
<html>
<head>
<title>键盘事件</title>
<styletype="text/css">
#div1{
border:1pxsolidred;
width:100px;
height:100px;
}
</style>
<scripttype="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>
<divid="div1"onKeyDown="_onkeydown()"onKeyUp="_onkeyup()"onKeyPress="_onkeypress()"></div>
用户名：
<inputtype="text"name="username"onKeyDown="_changeInput()"/>昵称：
<inputtype="text"name="nickname"/>
</body>
</html>


3.加载退出事件

3.1常用属性
onload：一张页面或一幅图像完成加载。
onunload：用户退出页面。


3.2示例
<html>
<head>
<title>加载卸载事件</title>
<scripttype="text/javascript">
function_onload(){
alert("当页面加载的时候就执行");
}
function_onunload(){
alert("当页面被卸载的时候执行");
}
</script>
</head>
<bodyonload="_onload()"onunload="_onunload()">
</body>
</html>


4.聚焦离焦事件

4.1常用属性
onfocus：元素获得焦点。
onblur：元素失去焦点。


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

<html>
<head>
<title>聚焦离焦事件</title>
<scripttype="text/javascript">
varflag=true;
function_onfocus(){
	if(flag){
	document.getElementById("tel").value="";
	flag=false;
}
varmsg=document.getElementById("msg");
msg.innerHTML="";
}
function_onblur(){
vartel=document.getElementById("tel").value;
varmsg=document.getElementById("msg");
varreg=/^[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>
<inputtype="text"id="tel"name="tel"value="请输入手机号"onfocus="_onfocus();"onblur="_onblur();"/>
<spanid="msg"></span>
</body>
</html>


效果





5.提交重置事件

5.1常用属性
onsubmit：提交按钮被点击。
onreset：重置按钮被点击。


5.2注意
onsubmit和onreset都是针对表单说的，所以要写在表单标签内。
onsubmit和onreset事件调用格式必须是return方法名。
onsubmit的方法必须有个返回值。


5.2示例
<html>
<head>
<title>提交重置事件</title>
<scripttype="text/javascript">
function_onsubmit(){
varuname=document.getElementsByName("username")[0].value;
varpsswd=document.getElementsByName("password")[0].value;
if(uname==''){
alert("请输入用户名");
returnfalse;
}
if(psswd==''){
alert("请输入密码");
returnfalse;
}
returntrue;
}
</script>
</head>
<body>
<formaction=""method="get"onsubmit="return_onsubmit();">
用户名：<inputtype="text"name="username"/>
<br/>
密码：<inputtype="password"name="password"/>
<br/>
<inputtype="submit"value="提交"/>
<inputtype="reset"value="重置"/>
</form>
</body>
</html>


6.选择改变事件

6.1属性
onchange：用户改变域的内容。


6.2案例

城市区域选择
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>城市选择</title>
<scripttype="text/javascript">
function_changearea(){
vararr=newArray();
arr[1]=["海淀区","昌平区","东城区","西城区"];
arr[2]=["黄浦区","浦东新区","徐汇区","静安区"];
arr[3]=["田家庵区","谢家集区","潘集区","大通区"];
arr[4]=["建邺区","玄武区","鼓楼区"];
varcity=document.getElementById('city');
vararea=document.getElementById('area');
if(city.value=="none"){
	area.length=1;
	return;
}else{
area.length=1;
for(vari=0;i<arr[city.value].length;i++){
area.add(newOption(arr[city.value][i],arr[city.value][i]));
}
}
}
</script>
</head>
<body>
<selectid="city"onchange="_changearea();">
<optionvalue="none">--请选择城市--</option>
<optionvalue="1">北京</option>
<optionvalue="2">上海</option>
<optionvalue="3">淮南</option>
<optionvalue="4">南京</option>
</select>
<selectid="area">
<option>--请选择地区--</option>
</select>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航