新手笔记——JavaScript BOM模型
BOM模型
BOM:浏览器对象模型（Browser Object Model）
window整个BOM的核心
history document location
link form anchor
Button checkbox text ... text area radio select
BOM的作用
将相关的元素组织包装起来，提供给程序设计人员使用，从而减少开发人员的工作量，提高设计Wed页面的效率
BOM可实现功能
弹出新的浏览器
移动、关闭浏览器窗口以及调整窗口的大小
页面的前级、后退
window对象的常用属性
常用的属性
|
属性名 |
说明 |
|
history(历史) |
有关客户访问过的URL的信息 |
|
location(当前) |
有关当前URL的信息 |
语法：window.属性名=”属性值”
Window对象的常用方法
常用的方法
|
方法名称 |
说明 |
|
prompt() |
显示可提示用户输入的对话框 |
|
alert() |
显示带有一个个提示信息和一个缺点按钮的警示框 |
|
confirm() |
显示一个带有提示信息、缺点和取消按钮的对话框 |
|
close() |
关闭浏览器 |
|
open() |
打开一个新的浏览器窗口，加载个定UPRL所知道的文档 |
|
set Timeout() |
在指定的毫秒数后调用函数或计算表达式 |
|
set Interval() |
按照指定的周期（以毫秒计）来调用函数或表达式 |
confirm()：将演出一个确认对话框
语法：confirm(“对话框中显示的纯文本”)
confirm()与alert()、prompt()区别
alert()：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
open()方法
Window.open(“弹出窗口的url”,”窗口名称”,”窗口特征”)
窗口特征
|
属性名称 |
说明 |
|
height、width |
窗口文档显示去的高度、宽度。以像素计 |
|
left、top |
窗口的x坐标、y坐标。以像素计 |
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 |
返回当前文档的URLR |
语法
document.referrer
document.URL
判断页面是否是链接进入
自动调整到的登录页面
var preUrl=document.referrer; //载入本页面文档的地址
if(preUrl==""){
document.write("<h2>您不是从领奖页面进入，5秒后将自动
跳转到登录页面</h2>");
setTimeout("javascript:location.href='login.html'",5000);
}
document对象的常用方法
|
名称 |
说明 |
|
getElementById() |
返回对拥有指定id的第一个对象的引用（对象的id唯一） |
|
getElementByName() |
返回带有指定名称的对象的集合（相同name属性） |
|
getElementByTagName() |
返回带有指定标签名的对象的集合（相同的元素） |
|
write() |
向文档写文本、HTML表达式或JavaScript代码 |
动态改变层、标签中的内容
document.getElementById("id元素"). innerHTML="改成后的文字";
访问相同name的元素
访问相同标签内容
Date对象
JavaScript内置对象
Array：用于在单独的变量名中存储一系列的值
String：用于支持对字符串的处理
Math：用于执行常用的数学任务，它包含了若干个数字常量 和函数
Date：用于操作日期和时间
语法： var日期对象=new Date(参数)
常用方法
|
方法 |
说明 |
|
getDate() |
返回 Date 对象的一个月中的每一天，其值介于1～31之间 |
|
getDay() |
返回 Date 对象的星期中的每一天，其值介于0～6之间 |
|
getHours() |
返回 Date 对象的小时数，其值介于0～23之间 |
|
getMinutes() |
返回 Date 对象的分钟数，其值介于0～59之间 |
|
getSeconds() |
返回 Date 对象的秒数，其值介于0～59之间 |
|
getMonth() |
返回 Date 对象的月份，其值介于0～11之间 |
|
getFullYear() |
返回 Date 对象的年份，其值为4位数 |
|
getTime() |
返回自某一时刻（1970年1月1日）以来的毫秒数 |
Math对象
|
方法 |
说明 |
示例 |
|
ceil() |
对数进行上舍入 |
Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
|
floor() |
对数进行下舍入 |
Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
|
round() |
把数四舍五入为最接近的数 |
Math.round(25.5);返回26 Math.round(-25.5);返回-26
|
|
random() |
返回0~1之间的随机数 |
Math.random();例如：0.6273608814137365 |
定时函数
setTimeout()
语法：setTimeout(“调用的函数”,等待的毫秒数)
示例：var myTime=setTimeout(“disptime()”,1000);
setInterval()
语法：setInterval(“调用的函数”,等待的毫秒数)
示例：var myTime=setInterval(“disptime()”,1000);
clearTimeout()
语法：clearTimeout(setTimeout()返回值的ID值)
示例：var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；
clearInterval()
语法：clearInterval(setTimeout()返回值的ID值)
示例：var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；
