第二章

第二章

JavaScript操作BOM对象

1.BOM模型

1.BOM：浏览器对象模型
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

2.BOM可实现功能
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

2.windo对象

1.常用属性
history               有关客户访问过的 URL 的信息
location              有关当前 URL 的信息

window.属性名= "属性值"

例：window.location="http://www.bdqn.cn" ; 

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

3.confirm()方法
confirm("对话框中显示的纯文本")        //将弹出一个确认对话框

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

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

4.open()方法
window.open("弹出窗口的url","窗口名称","窗口特征”)

窗口特征 
height、width	                窗口文档显示区的高度、宽度，以像素计
left、top	                    窗口的x坐标、y坐标，以像素计
toolbar=yes | no  |1 | 0         是否显示浏览器的工具栏，黙认是yes
scrollbars=yes | no  |1 | 0	     是否显示滚动条，黙认是yes
location=yes | no  |1 | 0	     是否显示地址地段，黙认是yes
status=yes | no  |1 | 0	         是否添加状态栏，黙认是yes
menubar=yes | no  |1 | 0	     是否显示菜单栏，黙认是yes
resizable=yes | no  |1 | 0       窗口是否可调节尺寸，黙认是yes
titlebar=yes | no  |1 | 0        是否显示标题栏，黙认是yes
fullscreen=yes | no  |1 | 0	     是否使用全屏模式显示浏览器，黙认是no；处于全屏模式的窗口必须同时处于                                  剧院模式

3.history对象和location对象

1.history对象
常用方法
back()	          加载 history 对象列表中的前一个URL
forward()	      加载 history 对象列表中的下一个URL 
go()	          加载 history 对象列表中的某个具体URL

2.location对象
常用属性
host	          设置或返回主机名和当前URL的端口号
hostname           设置或返回当前URL的主机名
href	          设置或返回完整的URL

常用方法
reload()	      重新加载当前文档
replace()	      用新的文档替换当前文档

3.应用
主页面使用href实现跳转和刷新本页
例：<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
    <a href="javascript:location.reload()">刷新本页</a>
    <a href="javascript:history.back()">返回主页面</a>

4.Document对象

1.常用属性
referrer         返回载入当前文档的URL
URL              返回当前文档的URL

语法：document.referrer
      document.URL

2.应用
判断页面是否是链接进入
自动跳转到登录页面

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

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

动态改变层、标签中的内容
例：document.getElementById("book").innerHTML="现象级全球畅销书";

访问相同name的元素
例：var aInput=document.getElementsByName("season");
    var sStr="";
    for(var i=0;i<aInput.length;i++)
    {sStr+=aInput[i].value+"&nbsp;&nbsp;";
    } 
    document.getElementById("replace").innerHTML=sStr;


访问相同标签的元素
例：var aInput=document.getElementsByTagName("input");
    var sStr="";
    for(var i=0;i<aInput.length;i++)
    {sStr+=aInput[i].value+"&nbsp;&nbsp;";
    }
    document.getElementById("replace").innerHTML=sStr;

5.JavaScript内置对象

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

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

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

常用方法：
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日）以来的毫秒数

制作时钟特效
使用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>

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

随机选择数字
例：实现返回2~98之间的随机数
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];
    }

3.定时函数
① setTimeout("调用的函数",等待的毫秒数)

例：var myTime＝setTimeout("disptime() ", 1000 );   
                        //1秒(1000毫秒)之后执行函数disptime()一次
                        
② setInterval("调用的函数",间隔的毫秒数)

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

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

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

4.清除函数
① clearTimeout(setTimeOut()返回的ID值)

例：var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；

② clearInterval(setInterval()返回的ID值)

例：var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；