JavaScript学习笔记-BOM对象

JavaScript操作BOM对象

BOM模型

BOM:浏览器对象模型（Browser Objeect Model）

• BOM提供了独立与内容、可以与浏览器窗口进行互动的对象结构

BOM核心

BOM可实现功能

• 弹出新的浏览器窗口
• 移动、关闭浏览器窗口以及调整窗口的大小
• 页面的前进、后退

window对象

window对象的常用属性

常用的属性

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前URL的信息

语法

window.属性名 = "属性值"

示例

window.location = "http://www.baidu.com";
//表示跳转到百度首页

常用的方法

方法名称	说明
prompt()	显示可提示用户输入的对话框
alert()	显示带有一个提示信息和一个确定按钮的警示框
confirm()	显示一个带有提示信息、确定和取消按钮的对话框
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout	在指定的毫秒数后调用函数或者计算表达式
setlnterval	按照指定的周期（以毫秒计）来调用函数或表达式

confirm()方法

confirm(): 将弹出一个确认对话框

语法

confirm("对话框中显示的纯文本")

示例

<script type = "text/javascript">
	var flag = confirm("确认要删除此信息吗？");
	if(flag = true)
		alert("删除成功！")；
	 else
	 	alert("你取消了删除");
</script>	 	

confirm()与alert()、prompt()区别

• alert(): 一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
• prompt(): 两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
• confirm(): 一个参数，确定对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

open()方法

语法

window.open("弹出窗口的url","窗口名称","窗口特征");

窗口特征

history对象

常用方法

名称	说明
back()	加载history 对象列表中的前一个URL
forward()	加载history对象列表中的后一个URL
go()	加载history对象列表中的某个具体的URL

            //等价
history.back()--->history.go(-1) 	//浏览器中的“后退” 
history.forward()--->history.go(1)  //浏览器中的“前进”

location对象

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

location和history对象的应用

示例

<a href ="javascript:location.href='flower.html'">查看鲜花详情</a>
<a href ="javascript:location.reload()">刷新本页</a>
<a href ="javascript:history.back()">返回主页面</a>

document对象

常用属性

名称	说明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

语法

document.referrer
document.URL

document对象应用

• 判断页面是否是链接进入
• 自动跳转到登录页面

var preUrl = document.referrer;  //载入本页面文档的地址
if(preUrl == ""){
	document.write("<h2>您不是从领奖页面进入，5秒后将自动跳转到登录页面</h2>");
	setTimeout("javascript:location.href='login.html'",5000);
}

document对象的常用方法

• Document对象的常用方法

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用 (对象的id唯一)
getElementsByName()	返回带有指定名称的对象的集合(相同name属性)
getElentsByTagName()	返回带有指定标签名的对象的集合(相同的元素)
write	向文档写文本、HTML表达式或JavaScript代码

• 动态改变层、标签中的内容

document.getElementById("book").innerHTML ="现象级全球畅销书";

• 访问相同name的元素

var alnput = document.getElementsByName("season");
	var sStr="";
	for(var i=0;i<alnput.length;i++){
		sStr += alnput[i].value+"&nsbp;&nbsp;";
	}
	document.getElementById("replace").innerHTML = sStr;

• 访问相同标签的元素

var alnput = document.getElementsByTangName("input");
var sStr = "";
for(var i=0;i<alnput.length;i++){
	sStr +=alnput[i].value+"&nbsp;&nbsp;";
}
document.getElementById("replace").innerHTML=sStr;

JavaScript内置对象

• Array：用于在单独的变量名中存储一系列的值
• String：用于支持对字符串的处理
• Math：用于执行常用的数字任务，它包含了若干个数字常量和函数
• Date：用于操作日期和时间

Date对象

语法

var 日期对象 = new Date(参数)
参数格式：MM  DD,YYYY,hh:mm:ss

示例

var today = new Date();   //返回当前日期和时间
var tdate = new Date("september 1,2013,14:58:12");

Date对象的方法

常用方法

方法	说明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1~31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0~6之间
getHours()	返回 Date 对象的小时数，其值介于0~23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0~59之间
getSecounds()	返回 Date 对象的秒数，其值介于0~59之间
getMonth()	返回 Date 对象的月份，其值介于0~11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻(1970年1月1日)以来的毫秒数

制作时钟特效

• 使用Date对象的方法显示当前时间的小时、分钟和秒

示例

function disptime(){
	var today = new Date();
	var hh = today.getHours();
	var mm = today.getMinutes();
	var ss = today.getSeconds();
	document.getElementById("myclock").innerHTML="现在是:"+hh+":"+mm+":"+ss;
}
disptime();

<div id ="myclock"></div>

Math对象

常用方法

• 如何实现返回的整数范围为2~99？

var iNum = Math.floor(Math.random()*98+2);

随机选择颜色

示例

function selColor(){
	var color = Array("红色","黄色","蓝色","绿色","橙色","青色","紫色");
	var num = Math.ceil(Math.random()*7-1;
	document.getElementById("color").innerHTML = color[num];

定时函数

setTimeout()

语法

setTimeout("调用的函数",等待的毫秒数)

示例

var myTime = setTimeout("disptime()",1000);
//1秒(1000毫秒)之后执行函数disptime()一次

<input name="s" type="button" value="显示提示消息" onclick="timer()" />
function timer(){
	var t = setTimeout("alert('3 secounds')",3000);
//  var t = setInterval("alet('3 seconds')",3000);
}

setInterval()

语法

setInterval("调用的函数",间隔的毫秒数)

示例

var myTime=setInterval("disptime()",1000);
//每隔1秒(1000毫秒)执行函数disptime()一次

**如果要多次调用，使用setInterval()或者让disptime()自身再次调用setTimeout() **

清除函数

clearTimeOut()

语法

clearTimeout(setTimeOut()返回的ID值)

示例

var myTime = setTimeout("disptime()",1000);
clearTimeout(myTime);

clearInterval()

语法

clearInterval(setInterval()返回的ID值)

示例

var myTime = setInterval("disptime()",1000);
clearInterval(myTime);