javascript 第二章 javascript 操作Bom对象

JavaScript

今天我们学了使用JavaScript操作Bom对象

本章目标
会使用getElementByld方法访问DOM元素
会使用getElementsByName方法访问DOM元素
会使用getElements
ylagName方法访问DOM元素
会使用定时函数和Date对象制作时钟特效

BOM模型

BOM ：浏览器对象模型（Browser Object Model）

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

整个Bom的核心是WINDOUS
windous 下有三个history document location
document 下有三个 LINK form anchor
form 下有 button chekbox text textarea radio select

BOM模型2-2

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

windou对象

常用属性
常用方法

windou对象的常用属性

常用的属性

windou.属性名 = "属性值";
window.location = "网站地址"

open()方法

window.open("弹出窗口的url""窗口名称"∵"窗口特征’

history

常用方法

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

location对象

常用属性

常用方法

|reload(）|重新加载当前文档|
|replace|用新的文档替换当前文档|

loctiong和history

#主页面使用href实现跳转和刷新本页

<a href = "javascript:location.href='网站链接'">查看网站链接</a>
<a href = "javascript:location.reload()">刷新本页</a>
<a href = "jvaascript:history.back()">返回前一页</a>

（接下来我们来学习一个本章要点）

Document对象

常用属性

Document对象应用

判断页面是否连接进入

自动跳转到登录页面

Document对象的常用方法

Document对象访问页面元素

动态改变层、标签中的内容
访问相同name的元素
访问相同标签的元素

Document对象的常用方法

动态改变层、标签中的内容
访问相同的name元素
访问相同标签的元素

JavaScript内置对象

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

Date对象

var 日期对象 = newDate(参数)
参数格式： MM DD,YYYY,HH:mm:ss
var today = new Date();//返回当前日期和时间
var tdate = new Date ("september 1 ,2013,14:58:12");

Date对象的方法

常用方法

制作时钟特效

使用Date对象的方法像是当前时间的小时、分钟、秒

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];
}

Date对象

制作的时钟特效示例中，时间为什么不该表？
由于时间在不停地走，所以应该每个一秒调用显示时间的方法，如何解决？

定时函数

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 seconds')",3000);//var t = setinterval("alert('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);
clearlnterval ()
clearinterval(setlnterval()返回的ID值)
var mytime = setlnterxal("disptime()", 1000 );
clearlnterval(myTime);