javascriot学习-第五章 DOM编程

最新推荐文章于 2024-07-26 20:46:33 发布

wkjs

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1.8k

点赞数

文章标签： html 文档 javascript function input scroll

本文链接：https://blog.csdn.net/wkjs/article/details/1043709

版权

第五章 DOM编程

5.1 DHTML

5.1.1 如何编写事件处理程序

<html>

<head>

<title>关闭鼠标右键</title>

<!--

function hideContextmenu()

{

window.event.returnValue=false;

}

-->

</script>

</head>

</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 };*)

<head>

<!--

function openhtm()

{

window.open("htmlpage3.htm","_blank","top=0,left=0,with=200,toolbar=no");

}

-->

</script>

</head>

</body>

</html>

5.1.2 window对象属性

Cloase属性，返回true或false，表示window对象对应的窗口是否关闭

Opener属性，返回打开当前窗口的window对象

Defaultstatus属性，设置和返回窗口状态栏中默认显示的文本内容，也就是在没有任何操作的情况下，状态栏上显示的文本内容。

Status属性，设置和返回窗口状态栏中当前显示的文本内容。

ScreenTop属性，返回窗口左上顶点在屏幕上的垂直位置

ScreenLeft属性，返回窗口左上顶点在屏幕上的水平位置

<head>

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>

</html>

<head>

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>

</html>

5.2.3 window对象的事件

Onclick事件，当单击了某个HEML元素时候产生的事件。

Onmousemove事件，当鼠标在某个HTML元素上移动时产生的事件

Onmouseover事件，当鼠标从外面移近一个HTML元素的边界时产生的事件。

Onmouseout事件，但鼠标移出一个HTML元素的边界时产生的事件

Onmousedown事件，鼠标按下事件

Oumouseuo事件，鼠标谈起的事件，

Onkeydown事件，但键盘被按下的事件

Onkeyup事件，当键盘弹起的事件

Onkeypress事件，当用户按了一个键时产生的事件

<head>

</head>

</body>

</html>

5.2.4 window对象的对象属性

1. location对象

<head>

<title>我将载入一个新的网页</title>

</head>

<body>

// window.location.href="http://www.163.com";

window.navigate("http://www.163.com");

</script>

</body>

</html>

2．event对象

<head>

<!--

function window_onkeypress()

{

//alert(window.event.keyCode);

if(window.event.keyCode==27)//27为ESC的键值

{

window.close();

}

-->

</script>

</head>

</body>

</html>

<head>

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>

</html>

3．Frames数组

<head>

</head>

</frameset>

</html>

<head>

</head>

<body>

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文档产生一个样式表或增加一条样式规则。

<head>

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 />

</body>

</html>

5.3.2 document对象的属性

<head>

function changeDoc()

{

document.bgColor="blue";

document.fgColor="red";

document.alinkColor="yellow";

document.vlinkColor="#0x00ff00";

document.linkColor="gary";

}

</script>

</head>

这个是普通的文本<br />

<a href="#">这个是一个超链接</a>

</body>

</html>

5.3.3 document对象的对象属性

<head>

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>

</html>

5.3.4 <script>标签的属性

defer

<head>

</head>

<body>

aaa

document.write("bbb");

</script>

ccc

</body>

</html>

5.3．5 Coolie属性

<head>

</head>

<body>

这个会话的第一个页面<br />

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>

<head>

</head>

<body>

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>

<head>

</head>

<body>

//立即删除名为“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对象方法

方法	描述
addBehavior	给元素附加一个行为。
appendChild	给对象追加一个子元素。
applyElement	使得元素成为其它元素的子元素或父元素。
attachEvent	将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。
blur	使元素失去焦点并触发 onblur 事件。
clearAttributes	从对象中删除全部标签属性和值。
click	触发 onclick 事件来模拟单击。
cloneNode	从文档层次中复制对对象的引用。
componentFromPoint	通过特定事件返回对象在指定坐标下的位置。
contains	检查对象中是否包含给定元素。
createControlRange	创建一个非文本元素的 controlRange 集合。
createTextRange	为元素创建一个 TextRange 对象。
detachEvent	从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。
doScroll	模拟对滚动条组件的单击。
dragDrop	初始化拖曳事件。
fireEvent	触发对象的指定事件。
focus	使得元素得到焦点并执行由 onfocus 事件指定的代码。
getAdjacentText	返回邻接文本字符串。
getAttribute	获取指定标签属性的值。
getAttributeNode	获取由 attribute.name 属性引用的 attribute 对象。
getBoundingClientRect	获取指定 TextRectangle 对象集合绑定的对象。
getClientRects	获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。
getElementsByTagName	获取基于指定元素名称的对象集合。
getExpression	获取给定属性的表达式。
hasChildNodes	返回表明对象是否有子对象的值。
insertAdjacentElement	在指定位置插入元素。
insertAdjacentHTML	在指定位置的元素中插入给定的 HTML 文本。
insertAdjacentText	在指定位置插入给定的文本。
insertBefore	在文档层次中插入元素。
mergeAttributes	复制所有读/写标签属性到指定元素。
normalize	合并邻接 TextNode 对象以便生成一个常规的文档对象模型。
pause	暂停 HTML 文档的时间线。
releaseCapture	释放当前文档中对象的鼠标捕捉。
removeAttribute	删除对象的给定标签属性。
removeAttributeNode	从对象中删除删除 attribute 对象。
removeBehavior	分离元素的行为。
removeChild	从元素上删除子结点。
removeExpression	从指定属性中删除表达式。
removeNode	从文档层次中删除对象。
replaceAdjacentText	替换元素的邻接文本。
replaceChild	用新的子元素替换已有的子元素。
replaceNode	用其它元素替换对象。
resume	继续 HTML 文档已经暂停的时间线。
setActive	设置对象为当前对象而不将对象置为焦点。
setAttribute	设置指定标签属性的值。
setAttributeNode	设置 attribute 对象为对象的一部分。
setCapture	设置属于当前文档的对象的鼠标捕捉。
setExpression	设置指定对象的表达式。
swapNode	交换文档层次中两个对象的位置。

<head>

</head>

function createA()

{

var oa=document.createElement("A");

oa.href="http://blog.csdn.net/wkjs";

oa.innerText="我的地盘";

document.body.appendChild(oa);

}

</script>

下面的超链接是动态产生的<br />

</body>

</html>

5.4.2 body对象的属性

标签属性	属性	描述
ACCESSKEY	accessKey	设置或获取对象的快捷键。
ALINK	aLink	设置或获取元素中所有激活链接的颜色。
ATOMICSELECTION		指定元素及其内容是否可以一不可见单位统一选择。
BACKGROUND	background	设置或获取页面上文本和图像后平铺的背景图片。
BGCOLOR	bgColor	设置或获取对象后面的背景颜色。
BGPROPERTIES	bgProperties	设置或获取背景图片的属性。
	blockDirection	获取表明块元素内容的绕排方向的值，是由左至右，还是由右至左。
BOTTOMMARGIN	bottomMargin	设置或获取页面整个主体的下边距。
	canHaveChildren	获取表明对象是否可以包含子对象的值。
	canHaveHTML	获取表明对象是否可以包含丰富的 HTML 标签的值。
CLASS	className	设置或获取对象的类。
	clientHeight	获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
	clientLeft	获取 offsetLeft 属性和客户区域的实际左边之间的距离。
	clientTop	获取 offsetTop 属性和客户区域的实际顶端之间的距离。
	clientWidth	获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
CONTENTEDITABLE	contentEditable	设置或获取表明用户是否可编辑对象内容的字符串。
DIR	dir	设置或获取对象的阅读顺序。
	disabled	获取表明用户是否可与该对象交互的值。
DISABLED	disabled	设置或获取控件的状态。
	firstChild	获取对象的 childNodes 集合的第一个子对象的引用。
HIDEFOCUS	hideFocus	设置或获取表明对象是否显式标明焦点的值。
ID	id	获取标识对象的字符串。
	innerHTML	设置或获取位于对象起始和结束标签内的 HTML。
	innerText	设置或获取位于对象起始和结束标签内的文本。
	isContentEditable	获取表明用户是否可编辑对象内容的值。
	isDisabled	获取表明用户是否可与该对象交互的值。
	isMultiLine	获取表明对象的内容是包含一行还是多行的值。
	isTextEdit	获取是否可使用该对象创建一个 TextRange 对象。
LANG	lang	设置或获取要使用的语言。
LANGUAGE	language	设置或获取当前脚本编写用的语言。
	lastChild	获取该对象 childNodes 集合中最后一个子对象的引用。
LEFTMARGIN	leftMargin	设置或获取页面的整个主体的左边距，而不是默认的边距。
LINK	link	设置或获取对象文档链接的颜色。
	nextSibling	获取对此对象的下一个兄弟对象的引用。
	nodeName	获取特定结点类型的名称。
	nodeType	获取所需结点的类型。
	nodeValue	设置或获取结点的值。
NOWRAP	noWrap	设置或获取浏览器是否自动执行换行。
	offsetHeight	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
	offsetLeft	获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
	offsetParent	获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
	offsetTop	获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
	offsetWidth	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
	onOffBehavior	获取表明指定的 Microsoft^® DirectAnimation^® 行为是否正在运行的对象。
	ownerDocument	设置或获取结点关联的 document 对象。
	parentElement	获取对象层次中的父对象。
	parentNode	获取文档层次中的父对象。
	parentTextEdit	获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。
	previousSibling	获取对此对象的上一个兄弟对象的引用。
	readyState	获取对象的当前状态。
RIGHTMARGIN	rightMargin	设置或获取页面整个主体的右边距。
	scopeName	获取为该元素定义的命名空间。
SCROLL	scroll	设置或获取滚动是否关闭。
	scrollHeight	获取对象的滚动高度。
	scrollLeft	设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
	scrollTop	设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
	scrollWidth	获取对象的滚动宽度。
	sourceIndex	获取对象在源序中的依次位置，即对象出现在 document 的 all 集合中的顺序。
STYLE		为该设置元素设置内嵌样式。
TABINDEX	tabIndex	设置或获取定义对象的 Tab 顺序的索引。
	tagName	获取对象的标签名称。
	tagUrn	设置或获取在命名空间声明中指定的统一资源名称(URN)。
TEXT	text	设置或获取文档主体的文本(前景)颜色。
t:TIMESTARTRULE	timeStartRule	设置或获取文档时间线开始的点。
TITLE	title	设置或获取对象的咨询信息(工具提示)。
TOPMARGIN	topMargin	设置或获取页面的上边距。
	uniqueID	获取为对象自动生成的唯一标识符。
UNSELECTABLE		指定该元素不可被选中。
VLINK	vLink	设置或获取对象中已访问链接的颜色。
<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对象的事件

事件	描述
onactivate	当对象设置为活动元素时触发。
onafterprint	对象所关联的文档打印或打印预览后立即在对象上触发。
onbeforeactivate	对象要被设置为当前元素前立即触发。
onbeforecut	当选中区从文档中删除之前在源对象触发。
onbeforedeactivate	在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus	在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste	在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onbeforeprint	对象的关联文档打印或打印预览前在对象上触发。
onbeforeunload	在页面将要被卸载前触发。
onclick	在用户用鼠标左键单击对象时触发。
oncontextmenu	在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect	当用户将要对该对象制作一个控件选中区时触发。
oncut	当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick	当用户双击对象时触发。
ondeactivate	当 activeElement 从当前对象变为父文档其它对象时触发。
ondrag	当进行拖曳操作时在源对象上持续触发。
ondragend	当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter	当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave	当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover	当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart	当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop	当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onfilterchange	当可视滤镜更改状态或完成转换时触发。
onfocusin	当元素将要被设置为焦点之前触发。
onfocusout	在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onkeydown	当用户按下键盘按键时触发。
onkeypress	当用户按下字面键时触发。
onkeyup	当用户释放键盘按键时触发。
onload	当浏览器装入对象后立即触发。
onlosecapture	当对象失去鼠标捕捉时触发。
onmousedown	当用户用任何鼠标按钮单击对象时触发。
onmouseenter	当用户将鼠标指针移动到对象内时触发。
onmouseleave	当用户将鼠标指针移出对象边界时触发。
onmousemove	当用户将鼠标划过对象时触发。
onmouseout	当用户将鼠标指针移出对象边界时触发。
onmouseover	当用户将鼠标指针移动到对象内时触发。
onmouseup	当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel	当鼠标滚轮按钮旋转时触发。
onmove	当对象移动时触发。
onmoveend	当对象停止移动时触发。
onmovestart	当对象开始移动时触发。
onpaste	当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange	当在对象上发生对象上发生属性更改时触发。
onreadystatechange	当对象状态变更时触发。
onresizeend	当用户更改完控件选中区中对象的尺寸时触发。
onresizestart	当用户开始更改控件选中区中对象的尺寸时触发。
onscroll	当用户滚动对象的滚动条时触发。
onselect	当当前选中区改变时触发。
onselectstart	对象将要被选中时触发。
onunload	在对象卸载前立即触发。

5.4.4 在网页上实现图片浮动

<head>

</head>

<body>

将这个文本设置大些，以便显示滚动条

</textarea>

</div>

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对象的方法

方法	描述
addBehavior	给元素附加一个行为。
appendChild	给对象追加一个子元素。
applyElement	使得元素成为其它元素的子元素或父元素。
attachEvent	将指定函数绑定到事件，以便每当该事件在对象上触发时都调用该函数。
blur	使元素失去焦点并触发 onblur 事件。
clearAttributes	从对象中删除全部标签属性和值。
click	触发 onclick 事件来模拟单击。
cloneNode	从文档层次中复制对对象的引用。
componentFromPoint	通过特定事件返回对象在指定坐标下的位置。
contains	检查对象中是否包含给定元素。
detachEvent	从事件中取消指定函数的绑定，这样当事件触发时函数就不会收到通知了。
dragDrop	初始化拖曳事件。
fireEvent	触发对象的指定事件。
focus	使得元素得到焦点并执行由 onfocus 事件指定的代码。
getAdjacentText	返回邻接文本字符串。
getAttribute	获取指定标签属性的值。
getAttributeNode	获取由 attribute.name 属性引用的 attribute 对象。
getBoundingClientRect	获取指定 TextRectangle 对象集合绑定的对象。
getClientRects	获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。
getElementsByTagName	获取基于指定元素名称的对象集合。
getExpression	获取给定属性的表达式。
hasChildNodes	返回表明对象是否有子对象的值。
insertAdjacentElement	在指定位置插入元素。
insertAdjacentHTML	在指定位置的元素中插入给定的 HTML 文本。
insertAdjacentText	在指定位置插入给定的文本。
insertBefore	在文档层次中插入元素。
item	从 all 集合或各种其它集合中获取对象。
mergeAttributes	复制所有读/写标签属性到指定元素。
namedItem	从指定集合中获取对象或集合。
normalize	合并邻接 TextNode 对象以便生成一个常规的文档对象模型。
releaseCapture	释放当前文档中对象的鼠标捕捉。
removeAttribute	删除对象的给定标签属性。
removeAttributeNode	从对象中删除删除 attribute 对象。
removeBehavior	分离元素的行为。
removeChild	从元素上删除子结点。
removeExpression	从指定属性中删除表达式。
removeNode	从文档层次中删除对象。
replaceAdjacentText	替换元素的邻接文本。
replaceChild	用新的子元素替换已有的子元素。
replaceNode	用其它元素替换对象。
reset	模拟单击对所调用表单重置按钮的单击。
scrollIntoView	将对象滚动到可见范围内，将其排列到窗口顶部或底部。
setActive	设置对象为当前对象而不将对象置为焦点。
setAttribute	设置指定标签属性的值。
setAttributeNode	设置 attribute 对象为对象的一部分。
setCapture	设置属于当前文档的对象的鼠标捕捉。
setExpression	设置指定对象的表达式。
submit	提交表单。
swapNode	交换文档层次中两个对象的位置。
urns	获取附加了指定行为的全部对象的集合。

5.5.2 form对象的属性

标签属性	属性	描述
ACCEPTCHARSET	acceptCharset	设置或获取处理表单的服务器必须接受的输入数据所用的字符编码方式列表。
ACTION	action	设置或获取表单内容要发送处理的 URL。
ATOMICSELECTION		指定元素及其内容是否可以一不可见单位统一选择。
AUTOCOMPLETE	autocomplete	设置或获取对象的自动完成状态。
BEGIN	begin	设置或获取时间线在该元素上播放前的延迟时间。
	blockDirection	获取表明块元素内容的绕排方向的值，是由左至右，还是由右至左。
	canHaveChildren	获取表明对象是否可以包含子对象的值。
	canHaveHTML	获取表明对象是否可以包含丰富的 HTML 标签的值。
CLASS	className	设置或获取对象的类。
	clientHeight	获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
	clientLeft	获取 offsetLeft 属性和客户区域的实际左边之间的距离。
	clientTop	获取 offsetTop 属性和客户区域的实际顶端之间的距离。
	clientWidth	获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
CONTENTEDITABLE	contentEditable	设置或获取表明用户是否可编辑对象内容的字符串。
DIR	dir	设置或获取对象的阅读顺序。
	disabled	获取表明用户是否可与该对象交互的值。
DISABLED	disabled	设置或获取控件的状态。
ENCTYPE	encoding	设置或获取表单的 MIME 编码。
ENCTYPE	enctype	设置或获取表单的多用途网际邮件扩展(MIME)编码。
END	end	设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。
	firstChild	获取对象的 childNodes 集合的第一个子对象的引用。
	hasMedia	获取一个表明元素是否为 HTML+TIME 媒体元素的 Boolean 值。
HIDEFOCUS	hideFocus	设置或获取表明对象是否显式标明焦点的值。
ID	id	获取标识对象的字符串。
	innerHTML	设置或获取位于对象起始和结束标签内的 HTML。
	innerText	设置或获取位于对象起始和结束标签内的文本。
	isContentEditable	获取表明用户是否可编辑对象内容的值。
	isDisabled	获取表明用户是否可与该对象交互的值。
	isMultiLine	获取表明对象的内容是包含一行还是多行的值。
	isTextEdit	获取是否可使用该对象创建一个 TextRange 对象。
LANG	lang	设置或获取要使用的语言。
LANGUAGE	language	设置或获取当前脚本编写用的语言。
	lastChild	获取该对象 childNodes 集合中最后一个子对象的引用。
	length	设置或获取集合中对象的数目。
METHOD	method	设置或获取如何将表单数据发送到服务器。
NAME	name	设置或获取对象的名称。
	nextSibling	获取对此对象的下一个兄弟对象的引用。
	nodeName	获取特定结点类型的名称。
	nodeType	获取所需结点的类型。
	nodeValue	设置或获取结点的值。
	offsetHeight	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
	offsetLeft	获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
	offsetParent	获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
	offsetTop	获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
	offsetWidth	获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
	onOffBehavior	获取表明指定的 Microsoft^® DirectAnimation^® 行为是否正在运行的对象。
	outerHTML	设置或获取对象及其内容的 HTML 形式。
	outerText	设置或获取对象的文本。
	ownerDocument	设置或获取结点关联的 document 对象。
	parentElement	获取对象层次中的父对象。
	parentNode	获取文档层次中的父对象。
	parentTextEdit	获取文档层次中可用于创建包含原始对象的 TextRange 的容器对象。
	previousSibling	获取对此对象的上一个兄弟对象的引用。
	readyState	获取对象的当前状态。
	scopeName	获取为该元素定义的命名空间。
	scrollHeight	获取对象的滚动高度。
	scrollLeft	设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
	scrollTop	设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
	scrollWidth	获取对象的滚动宽度。
	sourceIndex	获取对象在源序中的依次位置，即对象出现在 document 的 all 集合中的顺序。
STYLE		为该设置元素设置内嵌样式。
SYNCMASTER	syncMaster	设置或获取时间容器是否必须在此元素上同步回放。
SYSTEMBITRATE		获取系统中大约可用带宽的 bps。
SYSTEMCAPTION		表明是否要显示文本来代替演示的的音频部分。
SYSTEMLANGUAGE		表明是否在用户计算机上的选项设置中选中了给定语言。
SYSTEMOVERDUBORSUBTITLE		指定针对那些正在观看演示但对被播放的音频所使用的语言并不熟悉的用户来说是否要渲染配音或字幕。
TABINDEX	tabIndex	设置或获取定义对象的 Tab 顺序的索引。
	tagName	获取对象的标签名称。
	tagUrn	设置或获取在命名空间声明中指定的统一资源名称(URN)。
TARGET	target	设置或获取目标内容要显示于哪个窗口或框架。
TIMECONTAINER	timeContainer	设置或获取与元素关联的时间线类型。
TITLE	title	设置或获取对象的咨询信息(工具提示)。
	uniqueID	获取为对象自动生成的唯一标识符。
UNSELECTABLE		指定该元素不可被选中。

<head>

</head>

<body>

</form>

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="#" oncilck="simu_submit();return false">递交表单</a?

-->

</body>

</html>

5.5.3 form对象的事件

事件	描述
onactivate	当对象设置为活动元素时触发。
onbeforeactivate	对象要被设置为当前元素前立即触发。
onbeforecopy	当选中区复制到系统剪贴板之前在源对象触发。
onbeforecut	当选中区从文档中删除之前在源对象触发。
onbeforedeactivate	在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus	在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste	在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onblur	在对象失去输入焦点时触发。
onclick	在用户用鼠标左键单击对象时触发。
oncontextmenu	在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect	当用户将要对该对象制作一个控件选中区时触发。
oncopy	当用户复制对象或选中区，将其添加到系统剪贴板上时在源元素上触发。
oncut	当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick	当用户双击对象时触发。
ondeactivate	当 activeElement 从当前对象变为父文档其它对象时触发。
ondrag	当进行拖曳操作时在源对象上持续触发。
ondragend	当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter	当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave	当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover	当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart	当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop	当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onfocus	当对象获得焦点时触发。
onfocusin	当元素将要被设置为焦点之前触发。
onfocusout	在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp	当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown	当用户按下键盘按键时触发。
onkeypress	当用户按下字面键时触发。
onkeyup	当用户释放键盘按键时触发。
onlosecapture	当对象失去鼠标捕捉时触发。
onmousedown	当用户用任何鼠标按钮单击对象时触发。
onmouseenter	当用户将鼠标指针移动到对象内时触发。
onmouseleave	当用户将鼠标指针移出对象边界时触发。
onmousemove	当用户将鼠标划过对象时触发。
onmouseout	当用户将鼠标指针移出对象边界时触发。
onmouseover	当用户将鼠标指针移动到对象内时触发。
onmouseup	当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel	当鼠标滚轮按钮旋转时触发。
onmove	当对象移动时触发。
onmoveend	当对象停止移动时触发。
onmovestart	当对象开始移动时触发。
onpaste	当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange	当在对象上发生对象上发生属性更改时触发。
onreadystatechange	当对象状态变更时触发。
onreset	当用户重置表单时触发。
onresize	当对象的大小将要改变时触发。
onresizeend	当用户更改完控件选中区中对象的尺寸时触发。
onresizestart	当用户开始更改控件选中区中对象的尺寸时触发。
onselectstart	对象将要被选中时触发。
onsubmit	当表单将要被提交时触发。
ontimeerror	当特定时间错误发生时无条件触发，通常由将属性设置为无效值导致

<head>

</head>

<body>

会员号码（6位数字）：<input type="text" name="mem_id" />

</form>

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 表单字段元素对象的几个应用例子

<head>

</head>

<body>

<form>

用户名：<input type="text" name="user" /><br />

密码：<input name="pass" type="password" onfocus="checkName(this.form)" /><br />

function checkName(frm)

{

if(frm.user.value=="")

{

alert("你必须先输入用户名");

frm.user.focus();

}

</script>

</form>

</body>

</html>

<head>

</head>

<body>

用户名：<input type="text" name="user" onblur="checkName(this.form)" /><br />

密　码：<input type="password" name="pass" onblur="checkPass(this.form)" /><br />

</form>

function checkName(frm)

{

if(frm.user.value=="")

{

frm.user.focus();

}

function checkPass(frm)

{

if(frm.pass.value=="")

{

frm.pass.focus();

}

</script>

</body>

</html>

<head>

</head>

<body>

用户名：<input type="text" name="user" onkeydown="toNext(this.form)" /><br />

密码：<input type="password" name="pass" /><br />

</form>

function toNext(frm)

{

if(window.event.keyCode==13)

{

frm.pass.focus();

window.event.returnValue=false;

// window.event.keyCode=9;

}

</script>

</body>

</html>

<head>

</head>

<body>

数字：<input type="text" name="num" onkeypress="checkNum(this.form)" /><br />

</form>

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>

<head>

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>

总价格是：<span id="totalprice">0元</span>

</form>

</body>

</html>

<head>

</head>

<body>

<option value="" selected>--清选择一个--</option>

</select>

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>

wkjs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascriot学习-第五章 DOM编程

第五章 DOM编程5.1 DHTML 5.1.1 如何编写事件处理程序 html>head> title>关闭鼠标右键title> script language="javascript" type="text/javascript"> function hid
复制链接

扫一扫