本文由河南大学狼王贡献
DOM
文档对象模型 Document Object Model
JavaScript 将浏览器及网页文档、HTML 元素都使用相应的对象表示 如：window、document、body、forms 这些对象与对象的层次关系称为 DOM DHTML (Dynamic HTML 动态 HTML) HTML+JavaScript+CSS+DOM 的结合使用 称之为 DHTML
BOM
浏览器对象模型
浏览器对象
window 对象
表示浏览器窗口 对其属性和方法的引用可以省略 window.
window 对象方法 对象方法
alert()方法 方法 显示包含由应用程序自定义消息的对话框 confirm()方法 方法 返回 true false
显示一个确认对话框， 显示一个确认对话框， prompt()方法 方法 显示一个提示对话框 其中带有一条消息和一个输入框 确定 返回文本框的值 取消 返回 null close()方法 方法 open()方法 方法 关闭指定的窗口 打开一个 WEB 浏览器窗口 当前窗口打开新窗口 覆盖当前窗口
window.location.href="URL"
window.open（”打开窗口的 url””窗口名””窗口特征” （ ” 窗口名” 窗口特征” ， ， ）
window.open("about:blank");
//open()最简单使用
window.open("url","windowName","width=100 height=100 status=yes menubar=no toolbar=no resizable=no location=yes scrollbars=yes");
height： 窗口高度； ： 窗口高度；
width： 窗口宽度； ： 窗口宽度； top： 窗口距离屏幕上方的象素值； ： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的象素值； ：窗口距离屏幕左侧的象素值； toolbar： 是否显示工具栏，yes 为显示； ： 是否显示工具栏， 为显示； menubar，scrollbars 表示菜单栏和滚动栏。 ， 表示菜单栏和滚动栏。 resizable： 是否允许改变窗口大小，yes 或 1 为允许 ： 是否允许改变窗口大小， location： 是否显示地址栏，yes 或 1 为允许 ： 是否显示地址栏， status：是否显示状态栏内的信息，yes 或 1 为允许 ：是否显示状态栏内的信息，
定时器 轮询 Window. setTimeout(函数名，指定时间毫秒数) 函数名， 定时间毫秒数 函数名 clearTimeout(定时器对象名称 定时器对象名称) 定时器对象名称 setInterval(函数名称，时间毫秒数) 函数名称，时间毫秒数 函数名称 clearInterval (定时器对象名称 定时器对象名称) 定时器对象名称 取消执行定时器 定时执行指定的函数 间隔为多少毫秒数 取消定时器 延时执行某个函数 执行一次
定时器示例:
<script type="text/javascript"> //setTimeout(函数名，指定时间毫秒数) 延时执行某个函数 执行一次 //clearTimeout(定时器对象名称) var start; function showName(){ document.all["myname"].style.display="block"; start=setTimeout("hideName()",300); } function hideName(){ document.all["myname"].style.display="none"; start=setTimeout("showName()",300); } function stopTime(){ if (start != null) { clearTimeout(start);
start=null; document.all.btn.value="开始闪烁" } else { start = setTimeout("showName()", 300); document.all.btn.value="停止闪烁" } } </script> </head> <body onLoad="showName();"> <input type="button" onClick="stopTime();" id="btn" value="停止闪烁" /> <h2>Hello<font id="myname" color="red" style="display:none">肖总</font></h2> </body>
<script type="text/javascript"> //setInterval(函数名称，时间毫秒数) 定时执行指定的函数 间隔为多少毫秒数 //clearInterval (定时器名称) 取消定时器 var num=0; var myTimer; function show(){ document.all.myNum.innerHTML=num++; } function testTimer(){ if(myTimer!=null ) { clearInterval(myTimer); num=0; myTimer=null; document.all.btn.value="开始计时"; }else{ myTimer=setInterval(show,100);
document.all.btn.value="停止计时"; } } </script> </head> <body> <h2>计时：<font id="myNum" face="宋体" color="red" >0</font></h2> <input type="button" name="btn" onclick="testTimer();" value="开始计时" /> </body> </html>
网页对话框 模式对话框和无模式对话框 window.showModalDialog("URL",传递变量名，"窗口特征 传递变量名， 窗口特征 窗口特征") 传递变量名 建议传递 window 对象
window.showModelessDialog("URL",传递变量名，"窗口特征 传递变量名， 窗口特征 窗口特征") 传递变量名 子窗口访问父窗口数据使用 dialogArguments 对象 返回到父窗口的值使用 returnValue window 对象的子对象属性： 对象的 对象属性 属性：
parent 对象 self 对象 top 对象 opener 对象 代表对象层次中的父窗口 parent 对象仅仅是对子窗口有意义 代表对当前窗口或框架的引用 代表最顶层的窗口 代表创建当前窗口的源窗口 用于确定 open 方法打开窗口的源窗口 代表特定窗口的 URL 信息
刷新 不后退
location 对象
location.replace(url)
location.href="url"
window.location.reload();
加载 可后退
history 对象 用于存储客户端最近访问过的网址清单
onClick="javascript:top.mymain.history.forward();"> onClick="javascript:top.mymain.history.back(1);" history.go() 刷新表单不提交 =history.go(1) =history.go(-1)
history.forward() 指向浏览器历史列表中的下一个URL， 相当于点击浏览器的“前进 前进”按钮 前进 history.back() 指向浏览器历史列表中的上一个URL， 相当于点击浏览器的“后退 后退”按钮 后退
window.screen
代表浏览器屏幕
设置浏览器屏幕
var h=screen.Height; var w=screen.Width;
//屏幕高度 //屏幕宽度
window 对象属性： 对象属性：
window.status 代表浏览器状态栏 window.closed
窗口是否关闭 设置状态栏标题 window.status="清华 IT";
window 的事件
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>window 对象的专有事件演示</title> <script language="javascript" type="text/javascript"> alert("开始加载网页....\n ---请注意网页的加载顺序---"); </script> </head> <!-window的专有事件 的专有事件: 的专有事件 在浏览器完成对象的装载后触发事件 在对象卸载前立即触发事件 在页面将要被卸载前触发事件
onload onunload onbeforeunload
1星 需积分: 9 107 浏览量
更新于2024-09-13
收藏 28KB TXT 举报 
我的内容管理
展开
