首页 > 代码库 > JavaScript对象
JavaScript对象
在JavaScript中可以使用window和self标志符来引用当前的浏览器窗口。
每个打开的窗口定义一个window对象,如果文档包含框架(frame 或 iframe 标签),浏览
器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
可以使用top标识符引用最上层的窗口,或使用parent标志符引用当前窗口的父窗口。
第一节 Window 对象属性
属性描述
closed 返回窗口是否已被关闭。
defaultStatus 设置或返回窗口状态栏中的默认文本。
document 对 Document 对象的只读引用。请参阅 Document 对象。
history 对 History 对象的只读引用。请参数 History 对象。
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
length 设置或返回窗口中的框架数量。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
name 设置或返回窗口的名称。
Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener 返回对创建此窗口的窗口的引用。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent 返回父窗口。
Screen 对 Screen 对象的只读引用。请参数 Screen 对象。
self 返回对当前窗口的引用。等价于 Window 属性。
status 设置窗口状态栏的文本。
top 返回最顶层的先辈窗口。
window window 属性等价于 self 属性,它包含了对窗口自身的引用。
· screenLeft
· screenTop
· screenX
· screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和
Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持
screenX 和 screenY。
第二节 Window 对象方法
方法描述
alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
第三节 常用方法示例
(1)打开和关闭窗口:
open 打开另外一个窗口来显示新的页面。
window.open(URL,窗口名称,可选参数)
close() 关闭用Open方法打开的窗口
可选参数:“toolbar=yes, width=500,height=200”
(2)对话框方法
alert (提示字符串) 提示信息,只有一个“确定”按钮
confirm (提示字符串) 选择确定或取消,返回值:true, false
<html>
<head>
<script type="text/javascript">
function disp_confirm(){
var r=confirm("请点击一个按钮");
if (r==true){
document.write("您点击了确认!");
}else{
document.write("您点击了取消!");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_confirm()" value=http://www.mamicode.com/"显示一个确认框" />
</body>
</html>
prompt(提示字符串,初始值) 让用户在对话框中输入
<html>
<head>
<script type="text/javascript">
function disp_prompt(){
var name=prompt("请输入您的名字","Bill Gates");
if (name!=null && name!=""){
document.write("你好," + name + "!今天过得好吗?");
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()" value=http://www.mamicode.com/"显示一个提示框" />
</body>
</html>
(3)移动窗口方法:
(窗口左上角为坐标0,0点)
moveBy 窗口横向纵向移动多少象素 moveBy(10,10)
<html>
<head>
<script type="text/javascript">
function moveWin(){
myWindow.moveBy(50,50);
myWindow.focus();
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow=window.open(‘‘,‘‘,‘width=200,height=100‘);
myWindow.document.write("This is ‘myWindow‘");
</script>
<input type="button" value=http://www.mamicode.com/"Move ‘myWindow‘" onclick="moveWin()" />
</body>
</html>
moveTo 窗口移动到参数指定的位置 moveTo(100,100)
<html>
<head>
<script type="text/javascript">
function moveWin(){
myWindow.moveTo(0,0);
myWindow.focus();
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow=window.open(‘‘,‘‘,‘width=200,height=100‘);
myWindow.document.write("This is ‘myWindow‘");
</script>
<input type="button" value=http://www.mamicode.com/"Move ‘myWindow‘" onclick="moveWin()" />
</body>
</html>
(4)定时方法:
设置定时器,按指定时间间隔,反复执行某函数:
setInterval 和 clearInterval (见跑马灯程序)
<html>
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50);
function clock(){
var t=new Date();
document.getElementById("clock").value=http://www.mamicode.com/t;
}
</script>
<button onclick="int=window.clearInterval(int)">
Stop interval
</button>
</body>
</html>
设置定时器,按指定时间间隔,执行一遍某函数:
setTimeout 和 clearTimeout
<html>
<head>
<script type="text/javascript">
function timedMsg(){
var t=setTimeout("alert(‘5 seconds!‘)",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value=http://www.mamicode.com/"显示计时的消息框!"
onClick = "timedMsg()">
</form>
<p>点击上面的按钮。5 秒后会显示一个消息框。</p>
</body>
</html>
(5)聚焦方法 :
让窗口处于激活状态。
window.focus()
<html>
<body>
<script type="text/javascript">
myWindow=window.open(‘‘,‘‘,‘width=200,height=100‘);
myWindow.document.write("This is ‘myWindow‘");
myWindow.focus();
</script>
</body>
</html>
DOM (文档对象模型)
window 整个浏览器窗口的统称,是最上层的唯一对象。这一级可以省略,是系统默认值。
document 是Window的一个子对象,包含当前文档(HTML文件)中所有的对象。
form 即表单,包含许多子对象。
window、document和history对象是系统定义好的,其它对象是由我们程序员自己定义的。
我们要为每个对象起一个名称。
第一节 document对象概述
document对象最强大的一个特性在于它的组织性。如果给页面中的元素起个名字,则可以把该元
素当成document 对象的一个属性来处理。例如,如果在form 元素“form1”中有一个名叫
“ txtbox” 的文本框, 则可以像下面这样去引用该文本框中的文本:
document.form1.txtbox.value。
除了将HTML元素按名字组织起来外,document对象还有许多属性、方法、事件,这些特点可以
帮助我们扩展程序的功能。
Document 对象集合
集合描述
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。
Document 对象属性
属性描述
body
提供对 <body> 元素的直接访问。
对于定义了框架集的文档,该属性引用最外层的 <frameset>。
cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。
URL 返回当前文档的 URL。
Document 对象方法
方法描述
close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流,以收集来自任何 document.write() 或
document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。
第二节 document对象的事件(body标记中)
onkeydown 按下任意键
onkeypress 将按下任意键
onkeyup 释放键
onclick 单击鼠标
ondblclick 双击鼠标
onmousedown 按下鼠标
onmouseup 释放鼠标
load 文档装载完毕
unload 文档卸载完毕
可以使用attachEvent方法,为body添加事件。
document.attachEvent (‘onclick‘,getA);
JavaScript对象