javaScript第二张

第二章：JavaScript操作BOM对象

BOM模型

BOM：浏览器对象模型（Browser Object Model）
    	BOM提供了独立于页面内容的、与浏览器窗口进行互动的对象结构

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

！window对象的常用属性

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

语法：
	window.属性名= "属性值" 
示例：
	window.location="http://www.biadu.com" ;      

！！window对象的常用方法

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

confirm()方法

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

open()方法

属性名称	说明
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。 处于全屏模式的窗口必须同时处于剧院模式

简单使用：
	window.open("adv.html","_blank","height=20,width=1,top=100"); 

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

location对象常用方法

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

<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对象的常用方法

名称	说明
getElementByld()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

示例：
	动态改变层、标签中的内容
    	document.getElementById("ABC").innerHTML="ABC";

    获取具有相同name属性的元素
   		 var aInput=document.getElementsByName("season");

    获取具有相同标签的元素
        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;

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,2019,14:58:12");

Date对象的常用方法

方法	说明
getHours	返回 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日）以来的毫秒数

重点：
	1、getDay()：0－表示周日，1－表示周1，6－表示周6。
	2、getMonth()：0－11，0表示1月分，11表示12月份。

Math对象常用方法

方法	说 明	示例
ceil()—天花板	对数进行向上取整	Math.ceil(25.5);返回26Math.ceil(-25.5);返回-25
floor()—地板	对数进行向下取整	Math.floor(25.5);返回25Math.floor(-25.5);返回-26
round()	对数进行四舍五入	Math.round(25.5);返回26Math.round(-25.5);返回-26
random()	**返回(0~1)之间的随机数 **	Math.random();例如：0.6273608814137365

0-6随机数
	var num=Math.ceil(Math.random()*7)-1;

定时函数setTimeout()

语法：
	setTimeout("调用的函数",等待的毫秒数)
示例：
	1秒(1000毫秒)之后执行函数disptime()一次
	var  myTime＝setTimeout("disptime() ", 1000) );   

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

定时函数setInterval()

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

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

定时函数两者的区别；
    1、setTimeout()在等待指定时间后执行函数，且只执行一次；
    2、setInterval()是每指导间也不是时间后执行一次函数，循环执行，所以时钟例子使用setInterval();

清除函数clearTimeout()

语法：
	clearTimeout(setTimeOut()返回的ID值)
示例：
	var  myTime＝setTimeout("disptime() ", 1000 );
	clearTimeout(myTime)；

语法：
	clearInterval(setInterval()返回的ID值)
示例：
    var  myTime＝setInterval("disptime() ", 1000 );
    clearInterval(myTime)；

清除函数两者之间的区别；
    1、clearTimeout()清除由setTimeout()设置的定时；
    2、clearInterval()清除由setInterval()设置的定时；

时钟特效

<div id="myclock"></div>
<input type="button" onclick="javaScript:clearInterval(myTime)" value="停止">
<script type="text/javascript">
    function disptime(){
        var today = new Date();  	//获得当前时间
        var hh = today.getHours();	//获得小时、分钟、秒
        var mm = today.getMinutes();//获得分钟
        var ss = today.getSeconds();//获得秒
        /*设置div的内容为当前时间*/
        document.getElementById("myclock").innerHTML="现在是:"+hh +":"+mm+": "+ss;
    }
    /*使用setInterval()每间隔指定毫秒后调用disptime()*/
   var myTime = setInterval("disptime()",1000);
</script>

JavaScript操作BOM对象总结

window对象：
	alert( )、confirm( )、close( )、open( )、
	setTimeout( )、setInterval( )

history对象与location对象：
	back( )、forward( )、go( )、
	reload( )、replace( )

document对象：
	getElementById( )、getElementsByName( )、getElementsByTagName( )

JavaScript内置对象：
	Date对象：时钟特效、
    Math对象