JavaScriptDOM文档格式.docx
- 文档编号:16936286
- 上传时间:2022-11-27
- 格式:DOCX
- 页数:20
- 大小:47.10KB
JavaScriptDOM文档格式.docx
《JavaScriptDOM文档格式.docx》由会员分享,可在线阅读,更多相关《JavaScriptDOM文档格式.docx(20页珍藏版)》请在冰豆网上搜索。
resizable:
是否允许改变窗口大小,yes或1为允许
location:
是否显示地址栏,yes或1为允许
status:
是否显示状态栏内的信息,yes或1为允许
定时器
轮询
Window.setTimeout(函数名,指定时间毫秒数)
延时执行某个函数执行一次
clearTimeout(定时器对象名称)取消执行定时器
setInterval(函数名称,时间毫秒数)
定时执行指定的函数间隔为多少毫秒数
clearInterval(定时器对象名称)取消定时器
定时器示例:
<
scripttype="
text/javascript"
>
//setTimeout(函数名,指定时间毫秒数)延时执行某个函数执行一次
//clearTimeout(定时器对象名称)
varstart;
functionshowName(){
document.all["
myname"
].style.display="
block"
;
start=setTimeout("
hideName()"
300);
}
functionhideName(){
none"
showName()"
functionstopTime(){
if(start!
=null){
clearTimeout(start);
start=null;
document.all.btn.value="
开始闪烁"
}
else
{
start=setTimeout("
300);
停止闪烁"
/script>
/head>
bodyonLoad="
showName();
"
<
inputtype="
button"
onClick="
stopTime();
id="
btn"
value="
/>
h2>
Hello<
fontid="
color="
red"
style="
display:
肖总<
/font>
/h2>
/body>
//setInterval(函数名称,时间毫秒数)定时执行指定的函数间隔为多少毫秒数
//clearInterval(定时器名称)取消定时器
varnum=0;
varmyTimer;
functionshow(){
document.all.myNum.innerHTML=num++;
functiontestTimer(){
if(myTimer!
=null){
clearInterval(myTimer);
num=0;
myTimer=null;
开始计时"
}else{
myTimer=setInterval(show,100);
停止计时"
body>
计时:
myNum"
face="
宋体"
>
0<
name="
onclick="
testTimer();
/html>
其他例子见:
js_时间显示器.htmljs_跑马灯.htmljs_文字滚动.html
网页对话框
模式对话框和无模式对话框
window.showModalDialog("
传递变量名,"
窗口特征"
)
建议传递window对象
window.showModelessDialog("
)
子窗口访问父窗口数据使用dialogArguments对象
返回到父窗口的值使用returnValue
window对象的子对象属性:
parent对象
代表对象层次中的父窗口
parent对象仅仅是对子窗口有意义
self对象代表对当前窗口或框架的引用
top对象代表最顶层的窗口
opener对象
代表创建当前窗口的源窗口
用于确定open方法打开窗口的源窗口
location对象代表特定窗口的URL信息
location.replace(url)刷新不后退
location.href="
加载可后退
window.location.reload();
history对象用于存储客户端最近访问过的网址清单
javascript:
top.mymain.history.forward();
=history.go
(1)
top.mymain.history.back
(1);
=history.go(-1)
history.go()刷新表单不提交
history.forward()指向浏览器历史列表中的下一个URL,
相当于点击浏览器的“前进”按钮
history.back()指向浏览器历史列表中的上一个URL,
相当于点击浏览器的“后退”按钮
window.screen代表浏览器屏幕
设置浏览器屏幕
varh=screen.Height;
//屏幕高度
varw=screen.Width;
//屏幕宽度
window对象属性:
window.status代表浏览器状态栏
设置状态栏标题
window.status="
清华IT"
window.closed窗口是否关闭
window的事件
html>
head>
<
metahttp-equiv="
Content-Type"
content="
text/html;
charset=UTF-8"
title>
window对象的专有事件演示<
/title>
scriptlanguage="
javascript"
type="
alert("
开始加载网页....\n---请注意网页的加载顺序---"
!
--window的专有事件:
onload在浏览器完成对象的装载后触发事件
onunload在对象卸载前立即触发事件
onbeforeunload在页面将要被卸载前触发事件
window对象的事件处理通过body标签的事件属性来设置的
-->
bodyonload="
alert('
html文档加载完毕'
)"
onbeforeunload="
window.event.returnValue='
******你确定关闭本窗口******'
onunload="
拜拜'
注意网页的加载顺序哦!
加载写在最下面的JavaScript脚本"
document对象代表给浏览器窗口中的HTML文档
document的属性:
language="
JavaScript"
functionchange(){
document.bgColor="
green"
document.fgColor="
//文本前景色
document.vlinkColor="
0x00ff00"
//已访问过的链接文本颜色
document.linkColor="
gray"
//链接文本颜色
}
functionshowURL(){
alert(document.URL);
//当前文档Unicode编码的URL地址
}
change();
普通文本<
ahref="
#"
showURL();
链接<
/a>
document的方法
document.write()
document.writeln()
document.close()
开始的内容<
document.write("
这是document对象写入的内容<
br>
varstr="
world"
哈楼"
str,"
javascript"
"
document.writeln(mystr="
Hello"
World"
document.writeln(mystr)
vara="
帅哥"
document.write(newStr=(a=="
美女"
)?
"
东方不败"
:
西门吹雪"
document.write("
functionchangeDoc(){
document.writeln("
以下是更新后的文档内容<
document.writeln('
'
functionchangeDoc()'
{'
document.writeln("
hello"
world"
}'
/scr'
+'
ipt>
//注意这里写法
测试document对象"
changeDoc();
document.close();
//关闭文档输出
}
document集合属性:
document.forms//返回文档中的表单数组
document.anchors//获取所有带有name和/或id属性的a对象的集合数组
document.images//返回文档中的image的数组
document.links//获取文档中所有指定了HREF属性的a对象和所有area对象的集合数组
document.all返回对象所包含的元素集合的引用
window.status="
//设置状态栏文本
document.title="
演示"
alert("
文档标题:
+document.title);
所有指定了href属性的对象集合数组长度:
+document.links.length);
所有带有name或id属性的a对象的集合数组长度:
+document.anchors.length);
alert(document.links[1].href);
alert(document.all["
an1"
].name)
alert(document.forms["
frm1"
].method);
buttonname="
show();
document集合属性演示
/button>
br/>
aname="
a"
TOjs_right.html<
an2"
b"
href="
js_left.html"
链接到js_left.html<
js_right.html"
链接到js_right.html<
formname="
method="
get"
/form>
frm2"
post"
frm3"
frames框架对象不能同时设定body
parent.frames返回父窗口的框架数组:
alert(top.frames.length);
alert(parent.frames[0].name)
alert(parent.frames["
myleft"
body对象及通用属性
body对象方法:
functioncreateA(){
varmyA=document.createElement("
//创建一个html元素
myA.href="
js_跑马灯.html"
myA.innerText="
链接到js_跑马灯.html"
document.body.appendChild(myA);
//body对象添加子节点
createA();
这是一个javascript动态创建的超链接<
通用属性:
body对象属性演示<
style>
body{font-size:
20px;
}
/style>
—通用属性:
innerText起始和结束标签内的文本
innerHTML起始和结束标签内的HTML
outerText起始和结束标签内的文本(包含标签本身)
outerHTML起始和结束标签内的HTML(包含标签本身)
-->
pid="
p1"
onmouseover="
this.innerText='
I>
innerText<
/I>
onmouseout="
this.innerHTML='
innerHTML<
innerText与innerHTML的区别
/p>
divonmouseover="
p2.outerHTML='
pid=p2>
outerHTML<
onmouseout="
p2.outerText='
outerText<
测试outerText与outerHTML区别<
注意当鼠标再次移动到div上时报错原因:
p2不存在原来的p2已经被替换成文本
/div>
p2"
outerText与outerHTML区别
pid=p3>
哈楼!
!
innerText"
alert(p3.innerText)"
innerHTML"
alert(p3.innerHTML)"
outerText"
alert(p3.outerText)"
outerHTML"
alert(p3.outerHTML)"
divid="
float_icon"
position:
absolute;
left=0;
top=0;
imgsrc="
cat.gif"
border=1>
script>
/*
offsetTop表示对象距顶部高度
offsetLeft表示对象距左边宽度
offsetWidth表示对象宽度
offsetHeight表示对象高度
clientWidth表示对象不包含滚动条或边框、边距的宽度
clientHeight表示对象不包含滚动条或边框、边距的高度
clientTop表示对象不包含滚动条或边框、边距的距父容器顶部高度
clientWidth表示对象不包含滚动条或边框、边距的距父容器左边宽度
*/
vardirX=1,dirY=1;
varxPos=0,yPos=0;
window.setInterval(moveIcon,10);
functionmoveIcon(){
xPos+=2*dirX;
yPos+=2*dirY;
float_icon.style.top=yPos;
//topdiv距顶部高度
float_icon.style.left=xPos;
//leftdiv距左边宽度
if(xPos<
=0||xPos+float_icon.offsetWidth>
=document.body.clientWidth){
dirX=-dirX;
if(yPos<
=0||yPos+float_icon.offsetHeight>
=document.body.clientHeight){
dirY=-dirY;
Style对象:
functionshowItem(){
//获取id为sp的span标记下的img标记数组
varimgs=document.getElementById("
sp"
).getElementsByTagName("
img"
varcp=document.getElementById("
cp"
varcanExpand=true;
if(imgs[0].src.indexOf("
minus.gif"
)!
=-1){
canExpand=false;
imgs[0].src="
images/plus.gif"
}else{
images/minus.gif"
if(canExpand){
cp.style.display="
//显示
//隐藏
spanid="
cursor:
hand;
showItem()"
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JavaScriptDOM