第五章 DOM编程
5.1 DHTML
5.1.1 如何编写事件处理程序
<html>
<head>
<title>关闭鼠标右键</title>
<script language="javascript" type="text/javascript">
<!--
function hideContextmenu()
{
window.event.returnValue=false;
}
-->
</script>
</head>
<body oncontextmenu="return hideContextmenu()">
</body>
</html>
5.2window对象
5.2.1 window对象的方法
alert(sMsg) //弹出一个确认消息框
attachEvent(sEvent,pFunction) //绑定一个函数到某个事件,事件触发时随机执行其中一个被绑定的函数
blur() //令窗口丧失焦点
clearInterval(iIntervalID) //清除指定定时器的关联函数
clearTimeout(iTimeoutID) //清除指定延时器的关联函数
close() //关闭窗口,如果窗口不是用脚本打开的,会弹出确认对话框。
confirm([sMessage]) //弹出“确定/取消”对话框
createPopup([vArgs]) //创建一个隐藏的弹出式窗口,vArgs是未来考虑提供的参数,返回窗口句柄
detachEvent(sEvent,pFunction) //取消一个事件的某个绑定函数
execScript(sExpression, sLanguage) //用指定的语言执行代码
focus() //激活窗口
moveBy(iX,iY) //用相对方式移动窗口
moveTo(iLeft,iTop) //用绝对方式移动窗口
navigate(sURL) //转到指定的连接
open( [sURL] [, sName] [, sFeatures] [, bReplace])
//打开新窗口,并返回窗口句柄
//sName=(*_blank:打开一个新的未命名窗口;
_parent:在父窗口中打开;
_search:同时打开搜索窗口;
_self:替换本窗口;
_top:在顶级窗口里打开;*)
//sFeatures=(*channelmode = { yes | no | 1 | 0 };
directories = { yes | no | 1 | 0 };
fullscreen = { yes | no | 1 | 0 };
height = number;
left = number;
location = { yes | no | 1 | 0 };
menubar = { yes | no | 1 | 0 };
resizable = { yes | no | 1 | 0 };
scrollbars = { yes | no | 1 | 0 };
status = { yes | no | 1 | 0 };
titlebar = { yes | no | 1 | 0 };
toolbar = { yes | no | 1 | 0 };
top = number;
width = number;*)
print() //打印当前窗口文档内容
prompt( [sMessage] [, sDefaultValue]) //弹出输入对话框
resizeBy(iX, iY) //以相对方式改变窗口大小
resizeTo(iWidth, iHeight) //以绝对方式改变窗口大小
scroll(iX,iY) //滚动窗口,与scrollTo一样的效果,出于兼容性的考虑保留下来的方法
scrollBy(iX, iY) //用相对方式滚动窗口
scrollTo(iX, iY) //用绝对方式滚动窗口
setActive() //激活目标而不将视线转向目标
setInterval(vCode, iMilliSeconds [, sLanguage]) //定时执行一段代码
setTimeout(vCode, iMilliSeconds, sLanguage) //延时执行一段代码
showHelp(sURL [, vContextID]) //打开一个帮助文件,sURL为帮助文档地址,vContextID为帮助索引号
showModalDialog(sURL [, vArguments] [, sFeatures])
//打开一个模式对话框
//vArguments=需要向新开模式对话框传递的参数
//sFeatures=(*dialogHeight:sHeight;
dialogLeft:sXPos;
dialogTop:sYPos;
dialogWidth:sWidth;
center:{ yes | no | 1 | 0 | on | off };
dialogHide:{ yes | no | 1 | 0 | on | off };
edge:{ sunken | raised };
help:{ yes | no | 1 | 0 | on | off };
resizable:{ yes | no | 1 | 0 | on | off };
scroll:{ yes | no | 1 | 0 | on | off };
status:{ yes | no | 1 | 0 | on | off };
unadorned:{ yes | no | 1 | 0 | on | off };*)
showModelessDialog(sURL [, vArguments] [, sFeatures])
//打开一个非模式对话框
//vArgument=需要向新开模式对话框传递的参数
//sFeatures=(*dialogHeight:sHeight;
dialogLeft:sXPos;
dialogTop:sYPos;
dialogWidth:sWidth;
center:{ yes | no | 1 | 0 | on | off };
dialogHide:{ yes | no | 1 | 0 | on | off };
edge:{ sunken | raised };
help:{ yes | no | 1 | 0 | on | off };
resizable:{ yes | no | 1 | 0 | on | off };
scroll:{ yes | no | 1 | 0 | on | off };
status:{ yes | no | 1 | 0 | on | off };
unadorned:{ yes | no | 1 | 0 | on | off };*)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
<!--
function openhtm()
{
window.open("htmlpage3.htm","_blank","top=0,left=0,with=200,toolbar=no");
}
-->
</script>
</head>
<body onload="openhtm()">
</body>
</html>
5.1.2 window对象属性
Cloase属性,返回true或false,表示window对象对应的窗口是否关闭
Opener属性,返回打开当前窗口的window对象
Defaultstatus属性,设置和返回窗口状态栏中默认显示的文本内容,也就是在没有任何操作的情况下,状态栏上显示的文本内容。
Status属性,设置和返回窗口状态栏中当前显示的文本内容。
ScreenTop属性,返回窗口左上顶点在屏幕上的垂直位置
ScreenLeft属性,返回窗口左上顶点在屏幕上的水平位置
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
var child=window.open("htmlpage4.htm","_blank","top=0,left=0,with=200,toolbar=no");
function closeChild()//检测子窗口是否关闭
{
if(!child.closed)
{
child.close();
}
}
</script>
</head>
<body onunload="closeChild()">
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
var strStaus="blog.csdn.net/wkjs";
var space_num=0;//记录显示空格个数
var dir=1;//记录是增加还是减少空格,1为增加,-1为减少
function scroll()
{
var str_space="";/*开始时的空格字符串,每次调用scroll函数是,增加或减少空格个数,当dir为1时,下面的语句就会增加空格数*/
space_num=space_num+1*dir;
if(space_num>40||space_num<0)
{
dir=-1*dir;
}
//根据空格个数生成这些空格和文字
for(var i=0;i<space_num;i++)
{
str_space+=" ";
}
//重新在状态栏上显示这些空格和文字
window.status=str_space+strStatus;
}
function start()
{
//设置每隔100毫秒自动调用scroll憾事
window.setInterval("scroll",100);
}
var child=window.open("htmlpage.htm","_blank","top=0,left=0,with=200,toolbar=no");
function closeChild()//检测子窗口是否关闭
{
if(!child.closed)
{
child.close();
}
}
</script>
</head>
<body onunload="closeChild()">
</body>
</html>
5.2.3 window对象的事件
Onclick事件,当单击了某个HEML元素时候产生的事件。
Onmousemove事件,当鼠标在某个HTML元素上移动时产生的事件
Onmouseover事件,当鼠标从外面移近一个HTML元素的边界时产生的事件。
Onmouseout事件,但鼠标移出一个HTML元素的边界时产生的事件
Onmousedown事件,鼠标按下事件
Oumouseuo事件,鼠标谈起的事件,
Onkeydown事件,但键盘被按下的事件
Onkeyup事件,当键盘弹起的事件
Onkeypress事件,当用户按了一个键时产生的事件
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body onunload="alert('再见')" onload="alert('欢迎')" onbeforeunload="window.event.returnValue='请小心行事!'">
</body>
</html>
5.2.4 window对象的对象属性
1. location对象
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>我将载入一个新的网页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
// window.location.href="http://www.163.com";
window.navigate("http://www.163.com");
</script>
</body>
</html>
2.event对象
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
<!--
function window_onkeypress()
{
//alert(window.event.keyCode);
if(window.event.keyCode==27)//27为ESC的键值
{
window.close();
}
}
-->
</script>
</head>
<body onkeypress="window_onkeypress()">
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function checkCancel()
{
if(window.event.shiftKey)
{
window.event.cancelBubble=true;
}
}
function showSrc()
{
if(window.event.srcElement.tagName=="IMG")
{
alert(window.event.srcElement.src);
}
}
</script>
</head>
<body onclick="showSrc()">
<img onclick="checkCancel()" src="img/waiting.gif" />
</body>
</html>
3.Frames数组
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<frameset rows="20%,80%">
<frame name="top" src="htmlpage9.htm"></frame>
<frame name="bottom" src="htmlpage9.htm"></frame>
</frameset>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script language="javascript" type="text/javascript">
alert(window.screen.height+"\n"+window.screen.width+"\n"+window.screen.availHeight+"\n"+window.screen.colorDepth);
</script>
</body>
</html>
5.3 document对象
5.3.1 document对象的方法
Write方法,用于向HEML文档中写入内容
Writeln方法,类似于write,每次写完再末尾加一个换行符
Open方法,用于打开一个新的文档
Close方法
Clear方法
getElementById方法,返回id属性值等于指定参数的HTML元素所对应的对象,可以为每个HEML元素指定一个id属性值,在同一个HTML文档中,不能有2个id属性值相同的元素
getElementByName方法,返回name属性值等于指定参数的所有HTML元素对应的对象数组,由于多个HEML元都可以相同的name属性值,所以,这里返回的是数组。
getElementByTagName方法,返回标签名等于指定参数的所有HTML元素对应的数组。
createElement方法,产生一个代表某个HTML元素的对象,随后,可以使用其它一些方法将这个对象所表示的HTML元素插入到HTML文档中。
createStyleSheet方法,为当前HTML文档产生一个样式表或增加一条样式规则。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
document.write("这是write方法动态写入的内容<BR>");
function updatedoc()
{
document.writeln("abc<br>");
document.writeln("def<br>");
document.close();
var owin=window.open("","_blank");
owin.document.writeln("xyz<BR>");
owin.document.close();
owin.decument.write("abc<BR>");
owin.document.write("def<BR>");
owin.document.close();
}
</script>
</head>
<body>
这个是原始的内容<br />
<input type="button" name="update" value="gengxin" onclick="updatedoc()" />
</body>
</html>
5.3.2 document对象的属性
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript">
function changeDoc()
{
document.bgColor="blue";
document.fgColor="red";
document.alinkColor="yellow";
document.vlinkColor="#0x00ff00";
document.linkColor="gary";
}
</script>
</head>
<body onload="changeDoc()">
这个是普通的文本<br />
<a href="#">这个是一个超链接</a>
</body>
</html>
5.3.3 document对象的对象属性
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script language="javascript" type="text/javascript" name="script1">
function checkall()
{
var owin=window.open("","_blank");
owin.document.write(document.images["img1"].src+"<br>");
owin.document.write(document.images.item("img2").src+"<br>");
var objImg=document.images.item("sample");
if(objImg!=null)
{
if(objImg.length!=null)
{
for(var i=0;i<objImg.length;i++)
{
owin.document.write(objImg[i].src+"<br>");
}
}
}
}
</script>
</head>
<body onload="checkall()">
<img src="img/waiting.gif" name="sample" id="img1" />
<img src="img/waiting.gif" name="sample" id="img2" />
</body>
</html>
5.3.4 <script>标签的属性
defer
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
aaa
<script language="javascript" type="text/javascript" defer>
document.write("bbb");
</script>
ccc
</body>
</html>
5.3.5 Coolie属性
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
这个会话的第一个页面<br />
<script type="text/javascript">
var never=new Date();
//设置Cookie的有效期为10年
never.setTime(never.getDate()+10*365*24*60*60*1000);
var expString="expires="never.toGMTString()+";";
document.cookie="area="+escape("十堰")+";"+expString;
//下面的语句不是覆盖上面的语句的结果,而是在上面的基础上增加一个ieCoolie
document.cookie="zipcode=442002";
</script>
<a href="cookie2.htm">进入第二个页面</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script type="text/javascript">
function getCookie(name)
{
var result=null;
var myCookie=" "+document.cookie+";";
var searchName=" "+name+"=";
var startOfCookie=myCookie.indexof(searchName);
var endOfCookie;
if(endOfCookie!=-1)
{
//跳过找到的Cookie的名称部分和后面的“=”,取出Cookie的值部分
startOfCookie+=searchName.length;
endOfCookie=myCookie.indexof(";",startOfCookie);
result=unescape(myCookie.substring(startOfCookie,endOfCookie));
}
return result;
}
document.write(document.cookie+"<br>");
document.write("area is"+getCookie("area")+",and zipCode is "+getCookie("zipcode"));
document.write("<br>");
</script>
<a href="cookie3.htm">进入第三个页面</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<script type="text/javascript">
//立即删除名为“area”的Coolie
document.cookie="area="+escape("十堰")+";expries=Fir,31,Dec 2006 5:40;10 GMT;";
</script>
</body>
</html>
5.4 Body对象
5.4.1 body对象方法
方法 |
描述 |
给元素附加一个行为。 |
|
给对象追加一个子元素。 |
|
使得元素成为其它元素的子元素或父元素。 |
|
将指定函数绑定到事件,以便每当该事件在对象上触发时都调用该函数。 |
|
使元素失去焦点并触发 onblur 事件。 |
|
从对象中删除全部标签属性和值。 |
|
触发 onclick 事件来模拟单击。 |
|
从文档层次中复制对对象的引用。 |
|
通过特定事件返回对象在指定坐标下的位置。 |
|
检查对象中是否包含给定元素。 |
|
创建一个非文本元素的 controlRange 集合。 |
|
为元素创建一个 TextRange 对象。 |
|
从事件中取消指定函数的绑定,这样当事件触发时函数就不会收到通知了。 |
|
模拟对滚动条组件的单击。 |
|
初始化拖曳事件。 |
|
触发对象的指定事件。 |
|
使得元素得到焦点并执行由 onfocus 事件指定的代码。 |
|
返回邻接文本字符串。 |
|
获取指定标签属性的值。 |
|
获取指定 TextRectangle 对象集合绑定的对象。 |
|
获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。 |
|
获取基于指定元素名称的对象集合。 |
|
获取给定属性的表达式。 |
|
返回表明对象是否有子对象的值。 |
|
在指定位置插入元素。 |
|
在指定位置的元素中插入给定的 HTML 文本。 |
|
在指定位置插入给定的文本。 |
|
在文档层次中插入元素。 |
|
复制所有读/写标签属性到指定元素。 |
|
合并邻接 TextNode 对象以便生成一个常规的文档对象模型。 |
|
暂停 HTML 文档的时间线。 |
|
释放当前文档中对象的鼠标捕捉。 |
|
删除对象的给定标签属性。 |
|
从对象中删除删除 attribute 对象。 |
|
分离元素的行为。 |
|
从元素上删除子结点。 |
|
从指定属性中删除表达式。 |
|
从文档层次中删除对象。 |
|
替换元素的邻接文本。 |
|
用新的子元素替换已有的子元素。 |
|
用其它元素替换对象。 |
|
继续 HTML 文档已经暂停的时间线。 |
|
设置对象为当前对象而不将对象置为焦点。 |
|
设置指定标签属性的值。 |
|
设置 attribute 对象为对象的一部分。 |
|
设置属于当前文档的对象的鼠标捕捉。 |
|
设置指定对象的表达式。 |
|
交换文档层次中两个对象的位置。 |
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<script language="javascript" type="text/javascript">
function createA()
{
var oa=document.createElement("A");
oa.href="http://blog.csdn.net/wkjs";
oa.innerText="我的地盘";
document.body.appendChild(oa);
}
</script>
<body onload="createA()">
下面的超链接是动态产生的<br />
</body>
</html>
5.4.2 body对象的属性
标签属性 |
属性 |
描述 |
设置或获取对象的快捷键。 |
||
设置或获取元素中所有激活链接的颜色。 |
||
指定元素及其内容是否可以一不可见单位统一选择。 |
||
设置或获取页面上文本和图像后平铺的背景图片。 |
||
设置或获取对象后面的背景颜色。 |
||
设置或获取背景图片的属性。 |
||
获取表明块元素内容的绕排方向的值,是由左至右,还是由右至左。 |
||
设置或获取页面整个主体的下边距。 |
||
获取表明对象是否可以包含子对象的值。 |
||
获取表明对象是否可以包含丰富的 HTML 标签的值。 |
||
设置或获取对象的类。 |
||
获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。 |
||
获取 offsetLeft 属性和客户区域的实际左边之间的距离。 |
||
获取 offsetTop 属性和客户区域的实际顶端之间的距离。 |
||
获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。 |
||
设置或获取表明用户是否可编辑对象内容的字符串。 |
||
设置或获取对象的阅读顺序。 |
||
获取表明用户是否可与该对象交互的值。 |
||
设置或获取控件的状态。 |
||
获取对象的 childNodes 集合的第一个子对象的引用。 |
||
设置或获取表明对象是否显式标明焦点的值。 |
||
获取标识对象的字符串。 |
||
设置或获取位于对象起始和结束标签内的 HTML。 |
||
设置或获取位于对象起始和结束标签内的文本。 |
||
获取表明用户是否可编辑对象内容的值。 |
||
获取表明用户是否可与该对象交互的值。 |
||
获取表明对象的内容是包含一行还是多行的值。 |
||
获取是否可使用该对象创建一个 TextRange 对象。 |
||
设置或获取要使用的语言。 |
||
设置或获取当前脚本编写用的语言。 |
||
获取该对象 childNodes 集合中最后一个子对象的引用。 |
||
设置或获取页面的整个主体的左边距,而不是默认的边距。 |
||
设置或获取对象文档链接的颜色。 |
||
获取对此对象的下一个兄弟对象的引用。 |
||
获取特定结点类型的名称。 |
||
获取所需结点的类型。 |
||
设置或获取结点的值。 |
||
设置或获取浏览器是否自动执行换行。 |
||
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。 |
||
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。 |
||
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 |
||
获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。 |
||
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。 |
||
获取表明指定的 Microsoft® DirectAnimation® 行为是否正在运行的对象。 |
||
设置或获取结点关联的 document 对象。 |
||
获取对象层次中的父对象。 |
||
获取文档层次中的父对象。 |
||
获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。 |
||
获取对此对象的上一个兄弟对象的引用。 |
||
获取对象的当前状态。 |
||
设置或获取页面整个主体的右边距。 |
||
获取为该元素定义的命名空间。 |
||
设置或获取滚动是否关闭。 |
||
获取对象的滚动高度。 |
||
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 |
||
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 |
||
获取对象的滚动宽度。 |
||
获取对象在源序中的依次位置,即对象出现在 document 的 all 集合中的顺序。 |
||
为该设置元素设置内嵌样式。 |
||
设置或获取定义对象的 Tab 顺序的索引。 |
||
获取对象的标签名称。 |
||
设置或获取在命名空间声明中指定的统一资源名称(URN)。 |
||
设置或获取文档主体的文本(前景)颜色。 |
||
设置或获取文档时间线开始的点。 |
||
设置或获取对象的咨询信息(工具提示)。 |
||
设置或获取页面的上边距。 |
||
获取为对象自动生成的唯一标识符。 |
||
指定该元素不可被选中。 |
||
设置或获取对象中已访问链接的颜色。 |
||
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> <script language="javascript" type="text/javascript"> function dealclick() { if(b1.innerText=="+") { list1.style.display="block"; b1.innerText="-"; } else { list1.style.display="none"; b1.innerText="+"; } } </script> </head> <body> <span id="b1" style=" border:'thin ridge';cursor:hand" onclick="dealclick()"> - </span>list1<br /> <ul id="list1"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> list2 </body> </html> |
5.4.3 body对象的事件
事件 |
描述 |
当对象设置为活动元素时触发。 |
|
对象所关联的文档打印或打印预览后立即在对象上触发。 |
|
对象要被设置为当前元素前立即触发。 |
|
当选中区从文档中删除之前在源对象触发。 |
|
在 activeElement 从当前对象变为父文档其它对象之前立即触发。 |
|
在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。 |
|
在选中区从系统剪贴板粘贴到文档前在目标对象上触发。 |
|
对象的关联文档打印或打印预览前在对象上触发。 |
|
在页面将要被卸载前触发。 |
|
在用户用鼠标左键单击对象时触发。 |
|
在用户使用鼠标右键单击客户区打开上下文菜单时触发。 |
|
当用户将要对该对象制作一个控件选中区时触发。 |
|
当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。 |
|
当用户双击对象时触发。 |
|
当 activeElement 从当前对象变为父文档其它对象时触发。 |
|
当进行拖曳操作时在源对象上持续触发。 |
|
当用户在拖曳操作结束后释放鼠标时在源对象上触发。 |
|
当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。 |
|
当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。 |
|
当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。 |
|
当用户开始拖曳文本选中区或选中对象时在源对象上触发。 |
|
当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。 |
|
当可视滤镜更改状态或完成转换时触发。 |
|
当元素将要被设置为焦点之前触发。 |
|
在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。 |
|
当用户按下键盘按键时触发。 |
|
当用户按下字面键时触发。 |
|
当用户释放键盘按键时触发。 |
|
当浏览器装入对象后立即触发。 |
|
当对象失去鼠标捕捉时触发。 |
|
当用户用任何鼠标按钮单击对象时触发。 |
|
当用户将鼠标指针移动到对象内时触发。 |
|
当用户将鼠标指针移出对象边界时触发。 |
|
当用户将鼠标划过对象时触发。 |
|
当用户将鼠标指针移出对象边界时触发。 |
|
当用户将鼠标指针移动到对象内时触发。 |
|
当用户在鼠标位于对象之上时释放鼠标按钮时触发。 |
|
当鼠标滚轮按钮旋转时触发。 |
|
当对象移动时触发。 |
|
当对象停止移动时触发。 |
|
当对象开始移动时触发。 |
|
当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。 |
|
当在对象上发生对象上发生属性更改时触发。 |
|
当对象状态变更时触发。 |
|
当用户更改完控件选中区中对象的尺寸时触发。 |
|
当用户开始更改控件选中区中对象的尺寸时触发。 |
|
当用户滚动对象的滚动条时触发。 |
|
当当前选中区改变时触发。 |
|
对象将要被选中时触发。 |
|
在对象卸载前立即触发。 |
5.4.4 在网页上实现图片浮动
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<textarea rows="500" cols="500" id="TExtarea1" name="Textarea1">
将这个文本设置大些,以便显示滚动条
</textarea>
<div id="float_icon" style="visibility:hidden; position:absolute; left:0; top:0">
<a href ="http://blog.scdn.net/wkjs" target="_blank"><img src="img/waiting.gif" /></a>
</div>
<script type="text/javascript">
var dirX=1,dirY=1;
var xPos=0,yPos=0;
float_icon.style.top=0;
document.body.all.float_icon.style.left=0;
document.body.all("float_icon").style.visibility="visible";
window.setInterval("moveIcon()",100);
function moveIcon()
{
xPos+=2*dirX;
yPos+=2*dirY;
float_icon.style.top=yPos;
float_icon.style.left=xPos;
if(xPos<=0||xPos+float_icon.offsetWidth>=document.body.clientWidth)
{
dirX=-dirX;
}
if(yPos<=0||yPos+float_icon.offsetHeight>=document.body.clientHeight)
{
dirX=-dirX;
}
}
</script>
</body>
</html>
5.5 form对象
5.5.1 form对象的方法
方法 |
描述 |
给元素附加一个行为。 |
|
给对象追加一个子元素。 |
|
使得元素成为其它元素的子元素或父元素。 |
|
将指定函数绑定到事件,以便每当该事件在对象上触发时都调用该函数。 |
|
使元素失去焦点并触发 onblur 事件。 |
|
从对象中删除全部标签属性和值。 |
|
触发 onclick 事件来模拟单击。 |
|
从文档层次中复制对对象的引用。 |
|
通过特定事件返回对象在指定坐标下的位置。 |
|
检查对象中是否包含给定元素。 |
|
从事件中取消指定函数的绑定,这样当事件触发时函数就不会收到通知了。 |
|
初始化拖曳事件。 |
|
触发对象的指定事件。 |
|
使得元素得到焦点并执行由 onfocus 事件指定的代码。 |
|
返回邻接文本字符串。 |
|
获取指定标签属性的值。 |
|
获取指定 TextRectangle 对象集合绑定的对象。 |
|
获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。 |
|
获取基于指定元素名称的对象集合。 |
|
获取给定属性的表达式。 |
|
返回表明对象是否有子对象的值。 |
|
在指定位置插入元素。 |
|
在指定位置的元素中插入给定的 HTML 文本。 |
|
在指定位置插入给定的文本。 |
|
在文档层次中插入元素。 |
|
从 all 集合或各种其它集合中获取对象。 |
|
复制所有读/写标签属性到指定元素。 |
|
从指定集合中获取对象或集合。 |
|
合并邻接 TextNode 对象以便生成一个常规的文档对象模型。 |
|
释放当前文档中对象的鼠标捕捉。 |
|
删除对象的给定标签属性。 |
|
从对象中删除删除 attribute 对象。 |
|
分离元素的行为。 |
|
从元素上删除子结点。 |
|
从指定属性中删除表达式。 |
|
从文档层次中删除对象。 |
|
替换元素的邻接文本。 |
|
用新的子元素替换已有的子元素。 |
|
用其它元素替换对象。 |
|
模拟单击对所调用表单重置按钮的单击。 |
|
将对象滚动到可见范围内,将其排列到窗口顶部或底部。 |
|
设置对象为当前对象而不将对象置为焦点。 |
|
设置指定标签属性的值。 |
|
设置 attribute 对象为对象的一部分。 |
|
设置属于当前文档的对象的鼠标捕捉。 |
|
设置指定对象的表达式。 |
|
提交表单。 |
|
交换文档层次中两个对象的位置。 |
|
获取附加了指定行为的全部对象的集合。 |
5.5.2 form对象的属性
标签属性 |
属性 |
描述 |
设置或获取处理表单的服务器必须接受的输入数据所用的字符编码方式列表。 |
||
设置或获取表单内容要发送处理的 URL。 |
||
指定元素及其内容是否可以一不可见单位统一选择。 |
||
设置或获取对象的自动完成状态。 |
||
设置或获取时间线在该元素上播放前的延迟时间。 |
||
获取表明块元素内容的绕排方向的值,是由左至右,还是由右至左。 |
||
获取表明对象是否可以包含子对象的值。 |
||
获取表明对象是否可以包含丰富的 HTML 标签的值。 |
||
设置或获取对象的类。 |
||
获取对象的高度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。 |
||
获取 offsetLeft 属性和客户区域的实际左边之间的距离。 |
||
获取 offsetTop 属性和客户区域的实际顶端之间的距离。 |
||
获取对象的宽度,不计算任何边距、边框、滚动条或可能应用到该对象的补白。 |
||
设置或获取表明用户是否可编辑对象内容的字符串。 |
||
设置或获取对象的阅读顺序。 |
||
获取表明用户是否可与该对象交互的值。 |
||
设置或获取控件的状态。 |
||
设置或获取表单的 MIME 编码。 |
||
设置或获取表单的多用途网际邮件扩展(MIME)编码。 |
||
设置或获取表明元素结束时间的值,或者元素设置为重复的简单持续终止时间。 |
||
获取对象的 childNodes 集合的第一个子对象的引用。 |
||
获取一个表明元素是否为 HTML+TIME 媒体元素的 Boolean 值。 |
||
设置或获取表明对象是否显式标明焦点的值。 |
||
获取标识对象的字符串。 |
||
设置或获取位于对象起始和结束标签内的 HTML。 |
||
设置或获取位于对象起始和结束标签内的文本。 |
||
获取表明用户是否可编辑对象内容的值。 |
||
获取表明用户是否可与该对象交互的值。 |
||
获取表明对象的内容是包含一行还是多行的值。 |
||
获取是否可使用该对象创建一个 TextRange 对象。 |
||
设置或获取要使用的语言。 |
||
设置或获取当前脚本编写用的语言。 |
||
获取该对象 childNodes 集合中最后一个子对象的引用。 |
||
设置或获取集合中对象的数目。 |
||
设置或获取如何将表单数据发送到服务器。 |
||
设置或获取对象的名称。 |
||
获取对此对象的下一个兄弟对象的引用。 |
||
获取特定结点类型的名称。 |
||
获取所需结点的类型。 |
||
设置或获取结点的值。 |
||
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。 |
||
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。 |
||
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。 |
||
获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。 |
||
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。 |
||
获取表明指定的 Microsoft® DirectAnimation® 行为是否正在运行的对象。 |
||
设置或获取对象及其内容的 HTML 形式。 |
||
设置或获取对象的文本。 |
||
设置或获取结点关联的 document 对象。 |
||
获取对象层次中的父对象。 |
||
获取文档层次中的父对象。 |
||
获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。 |
||
获取对此对象的上一个兄弟对象的引用。 |
||
获取对象的当前状态。 |
||
获取为该元素定义的命名空间。 |
||
获取对象的滚动高度。 |
||
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 |
||
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 |
||
获取对象的滚动宽度。 |
||
获取对象在源序中的依次位置,即对象出现在 document 的 all 集合中的顺序。 |
||
为该设置元素设置内嵌样式。 |
||
设置或获取时间容器是否必须在此元素上同步回放。 |
||
获取系统中大约可用带宽的 bps。 |
||
表明是否要显示文本来代替演示的的音频部分。 |
||
表明是否在用户计算机上的选项设置中选中了给定语言。 |
||
指定针对那些正在观看演示但对被播放的音频所使用的语言并不熟悉的用户来说是否要渲染配音或字幕。 |
||
设置或获取定义对象的 Tab 顺序的索引。 |
||
获取对象的标签名称。 |
||
设置或获取在命名空间声明中指定的统一资源名称(URN)。 |
||
设置或获取目标内容要显示于哪个窗口或框架。 |
||
设置或获取与元素关联的时间线类型。 |
||
设置或获取对象的咨询信息(工具提示)。 |
||
获取为对象自动生成的唯一标识符。 |
||
指定该元素不可被选中。 |
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<form name="form1" action="" method="post">
<input type="text" name="user" value="王康" />
<input type="submit" name="submit1" value="提交" />
</form>
<script type="text/javascript">
function simu_submit()
{
form1.method="get";
document.form1.user.value="王健";
document.forms["form1"].action="http://blog.csdn.net/wkjs/";
document.forms[0].submit();
}
</script>
<a href="javascript:simu_submit()">递交表单</a>
<!--
<a href="#" oncilck="simu_submit();return false">递交表单</a?
-->
</body>
</html>
5.5.3 form对象的事件
事件 |
描述 |
当对象设置为活动元素时触发。 |
|
对象要被设置为当前元素前立即触发。 |
|
当选中区复制到系统剪贴板之前在源对象触发。 |
|
当选中区从文档中删除之前在源对象触发。 |
|
在 activeElement 从当前对象变为父文档其它对象之前立即触发。 |
|
在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。 |
|
在选中区从系统剪贴板粘贴到文档前在目标对象上触发。 |
|
在对象失去输入焦点时触发。 |
|
在用户用鼠标左键单击对象时触发。 |
|
在用户使用鼠标右键单击客户区打开上下文菜单时触发。 |
|
当用户将要对该对象制作一个控件选中区时触发。 |
|
当用户复制对象或选中区,将其添加到系统剪贴板上时在源元素上触发。 |
|
当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。 |
|
当用户双击对象时触发。 |
|
当 activeElement 从当前对象变为父文档其它对象时触发。 |
|
当进行拖曳操作时在源对象上持续触发。 |
|
当用户在拖曳操作结束后释放鼠标时在源对象上触发。 |
|
当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。 |
|
当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。 |
|
当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。 |
|
当用户开始拖曳文本选中区或选中对象时在源对象上触发。 |
|
当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。 |
|
当对象获得焦点时触发。 |
|
当元素将要被设置为焦点之前触发。 |
|
在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。 |
|
当用户在浏览器为当前窗口时按 F1 键时触发。 |
|
当用户按下键盘按键时触发。 |
|
当用户按下字面键时触发。 |
|
当用户释放键盘按键时触发。 |
|
当对象失去鼠标捕捉时触发。 |
|
当用户用任何鼠标按钮单击对象时触发。 |
|
当用户将鼠标指针移动到对象内时触发。 |
|
当用户将鼠标指针移出对象边界时触发。 |
|
当用户将鼠标划过对象时触发。 |
|
当用户将鼠标指针移出对象边界时触发。 |
|
当用户将鼠标指针移动到对象内时触发。 |
|
当用户在鼠标位于对象之上时释放鼠标按钮时触发。 |
|
当鼠标滚轮按钮旋转时触发。 |
|
当对象移动时触发。 |
|
当对象停止移动时触发。 |
|
当对象开始移动时触发。 |
|
当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。 |
|
当在对象上发生对象上发生属性更改时触发。 |
|
当对象状态变更时触发。 |
|
当用户重置表单时触发。 |
|
当对象的大小将要改变时触发。 |
|
当用户更改完控件选中区中对象的尺寸时触发。 |
|
当用户开始更改控件选中区中对象的尺寸时触发。 |
|
对象将要被选中时触发。 |
|
当表单将要被提交时触发。 |
|
当特定时间错误发生时无条件触发,通常由将属性设置为无效值导致 |
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<form name="form1" target="_blank" method="post" onsubmit="return dosubmit(this)">
会员号码(6位数字):<input type="text" name="mem_id" />
<input type="submit" name="submit1" value="提交" />
</form>
<script type="text/javascript">
function dosubmit(frm)
{
if(frm.mem_id.value.length!=6)
{
alert("会员号必须为6位");
return false;
}
else
{
var mem_value=frm.mem_id.value;
for(var i=0;i<mem_value.length;i++)
{
if(mem_value.charAt(i)<'0'||mem_value.charAt(i)>'9')
{
alert("会员号必须为数字");
return false;
}
}
}
return true;
}
</script>
</body>
</html>
5.6 form表单字段元素对象
5.6.1 form表单字段元素对象的方法
blur 方法,让表单字段元素失去焦点,当前焦点移动后台。
fccus 方法,让表单字段元素获得焦点
click方法,模仿用户鼠标点击该元素过程。
setCapture方法,在某个表单字段元素对象上捕获当前网页文档上的鼠标事件,调用这个方法后,及时鼠标不在该对象对应的HTML元素上,而是在另外的HTML元素上移动时,该对象照样发生鼠标事件,就仿佛鼠标还在该HTML预算上一样,如果程序在一个HTML元素上按下鼠标时开始某个事情的处理,释放鼠标时结束该事情的处理,就需要使用setCapture方法。否则,在鼠标移动到该元素外面才释放的情况,他便不可能捕获到鼠标释放这个事件。
releaseCapture方法,取消某个表单字段元素对象对当前网页文档鼠标事件的捕获设置,调用该方法前必须已经调用过setCapture方法。
add方法,为列表框(select)增加一个选项(option)
5.6.2 form表单字段元素对象的事件
onChange事件,当焦点离开文本输入框且文本输入框的值改变时候,或者改变列表框的选择结果后,产生该事件。
onSelect事件,当单行多多行文本输入框中的文字被选择加亮后,产生该事件。
onFocus事件,当表单字段元素获得焦点时,产生该事件
onBlur事件,当表单断元素失去焦点时,产生该事件。
5.6.3 表单字段元素对象的几个应用例子
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<form>
用户名:<input type="text" name="user" /><br />
密 码:<input name="pass" type="password" onfocus="checkName(this.form)" /><br />
<input id="Submit1" type="submit" value="提交" />
<script type="text/javascript">
function checkName(frm)
{
if(frm.user.value=="")
{
alert("你必须先输入用户名");
frm.user.focus();
}
}
</script>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<form method="post">
用户名:<input type="text" name="user" onblur="checkName(this.form)" /><br />
密 码:<input type="password" name="pass" onblur="checkPass(this.form)" /><br />
<input type="submit" name="submit1" value="提交" />
</form>
<script type="text/javascript">
function checkName(frm)
{
if(frm.user.value=="")
{
frm.user.focus();
}
}
function checkPass(frm)
{
if(frm.pass.value=="")
{
frm.pass.focus();
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<form method="post" target="_blank">
用户名:<input type="text" name="user" onkeydown="toNext(this.form)" /><br />
密 码:<input type="password" name="pass" /><br />
<input type="submit" name="submit1" value="提交" />
</form>
<script type="text/javascript">
function toNext(frm)
{
if(window.event.keyCode==13)
{
frm.pass.focus();
window.event.returnValue=false;
// window.event.keyCode=9;
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<form method="post">
数字:<input type="text" name="num" onkeypress="checkNum(this.form)" /><br />
</form>
<script type="text/javascript">
function checkNum(frm)
{
if(window.event.keyCode>'9'.charCodeAt(0)||window.event.keyCode<'0'.charCodeAt(0))
{
window.event.keyCode=0;
window.event.returnValue=false;
}
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
function checkSum()
{
var sum=0;
for(var i=0;i<document.form1.elements["writer"].length;i++)
{
if(document.form1.elements["writer"][i].checked)
{
sum=sum+parseInt(document.form1.elements["writer"][i].value);
}
}
totalprice.innerText=sum+"元";
}
</script>
</head>
<body>
<form action="" method="post" name="form1">
<input type="checkbox" name="writer" value="10" onclick="checkSum()" />橡皮(10元)<br />
<input type="checkbox" name="writer" value="20" onclick="checkSum()" />橡皮(20元)<br />
<input type="checkbox" name="writer" value="30" onclick="checkSum()" />橡皮(30元)<br />
<input type="checkbox" name="writer" value="50" onclick="checkSum()" />橡皮(40元)<br />
<input type="checkbox" name="writer" value="60" onclick="checkSum()" />橡皮(50元)<br />
<input type="checkbox" name="writer" value="70" onclick="checkSum()" />橡皮(60元)<br />
<input type="submit" value="submit" id="submint1" name="submit1" /><br />
总价格是:<span id="totalprice">0元</span>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<select id="oCourses" size="1" onchange="fnChange()">
<option value="" selected>--清选择一个--</option>
</select>
<textarea id="oData"></textarea>
<script type="text/javascript">
var last_select="3";
var oOption=document.createElement("option");
oOption.text="vc";
oOption.value="1";
oCourses.add(oOption);
var oOption=document.createElement("option");
oOption.text="C#";
oOption.value="2";
oCourses.add(oOption);
var oOption=document.createElement("option");
oOption.text="Java";
oOption.value="3";
oCourses.add(oOption);
oCourses.value=last_select;
function fnChange()
{
oData.value+=oCourses.options[oCourses.selectedIndex].value;
}
</script>
</body>
</html>