JavaScript常用方法属性总结 - 朴人博客移动版

1.form.elements[]属性

功能: 得到表单所有控件元素的列表
例子：将表单中的文本域中的文字设置为空

var Form=window.document.forms[0]; //得到window窗体的第一个表单对象
for(var i=0; i<from .elements.length;i++){
if(Form.elements[i].type =="text"){
Form.elements[i].value="";
}
}

2．getElementById方法

功能:使用getElementById方法根据id得到窗体中所有控件的对象。
文档对象模型（DOM）如下：

对顶层对象的解释：
window对象：在层次的顶部是window对象。此对象代表html文档在浏览器窗口中内容区域。在多框架环境中，每个框架都是一个窗口。由于所有的动作都是在窗口内发生的，所以窗口是对象层次中最外部的元素，它的物理界限包含文档。
Navigator对象：此对象主要用于读取处理当前文档的浏览器商标和版本。它是只读的，以防止恶意脚本对浏览器的非法访问。
Screen对象：此对象用于获取浏览器运行的物理环境。例如：得到监视器的有效象素数，此对象也是只读的。(例如: 得到屏幕的宽度: window.screen.width),
History对象：虽然浏览器内部保存了浏览器最近历史记录详细资料（如“后退”按钮下的有效列表），但脚本不能访问这些对象的详细资料。借助此对象，脚本可以模拟浏览器的“后退”或者“前进”功能。
Location对象：此对象是将不同网页载入到当前窗口或框架的主要方法。在每一个受控的环境中，窗口中的URL信息都是有效的，因此，脚本不能跟踪对其他web站点的访问。
Document对象：每个载入窗口中的html文档都是一个document对象。Document对象包含脚本可能操作的内容，除了每一个html文档中的html，head和body元素对象外，文档元素对象层次的详细组成和结构取决于文档的内容。

对getElementById总结如下：
要得到一个对象，只要是body中的对象，可以跨层调用。比如要得到表单中的一个Button对象。可以这样写：

var obj=document.getElementById("qq");//其中qq为这个button的id。
也可以：
var obj=document.getElementById("form1").qq; //form1为表单的id。
也可以：
（先得到表单对象，然后得到表单中的id为“qq”的对象）                       
var obj =document.getElementById("form1");
var aa=obj.qq;

注意：在得到一个表单对象之后，不能再用obj.getElementById(“qq”) 来得到id为qq对象。

要得到一个对象，在方法调用的时候可以直接传这个对象过来，在javascript语句中，接受的对象就是要得到的这个对象。这种方法会会比较简单。例如：
我单击button按钮，要得到这个button的id，type，和value。可以这样写：

<input id="qq" type="button" value="提交" onClick="getThis(this)"/>
javascript中：
	//通过this穿过来的是button对象。
	function getThis(me){
		var id=me.id;
		var type=me.type;
		var value=me.value;
		alert(id);
		alert(type);
		alert(value);
	}

以下是一个应用getElementById的例子。（通过getElementById得到表单对象，非表单对象）

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
	function goThere(){
		// 得到select对象
		var list = document.getElementById("form1").urlList;
		alert(list.options[list.selectedIndex].value);
	}
	
	function getObj(){
		//先得到按钮对象
		//var obj=document.getElementById("qq");
		//var obj=document.getElementById("form1").qq;
		var obj =document.getElementById("form1");
		var aa=obj.qq;
		alert(aa.type);
	}
	
	//通过this穿过来的是button对象。
	function getThis(me){
		var id=me.id;
		var type=me.type;
		var value=me.value;
		alert(id);
		alert(type);
		alert(value);
	}

	function getPicId(){
		//得到图片对象
		var picId=document.getElementById("mypic");
		alert(picId.id);
	}
</script>

</meta></head>

<body>
	<form id="form1">
	选择需要浏览的页面：<select name="urlList" onChange="goThere()">
	<option value="下拉列表.htm">主页</option>
	<option value="store.htm">购物</option>
	<option value="search.htm">搜索网页</option>
	</select>
	<input type="button" value="下拉列表" onClick="goThere()"/>
	<input id="qq" type="button" value="提交" onClick="getThis(this)"/>
	<input id="aa" type="button" onClick="getObj()" value="getType"/>
 	</form>
 <img id="mypic" src="file:///F|/Picture/Pic/1.jpg" width="200" height="200"/>
 <input type="button" onClick="getPicId()" value="得到图片Id"/>
</body>
</html>

3.显示/隐藏层的制作
代码如下:

<html>
<head>
<title>制作显示隐藏菜单</title>
<style>
   .header {
    	background-Color:#CCEEFF;
    	font-weight:600;
    	color:black;
    	text-align:center;
    	width:120px;
    }
    .content {
    	background-Color:#AACCFF;
    	font-weight:300;
    	color:black;
    	text-align:center;
    	width:120px;
    	
    }
</style>

<script>
function handle(divID){
dd=document.getElementById(divID);
if(dd.style.display=='none'){
dd.style.display='block';
}
else{
dd.style.display='none';
}
}
</script>
</head>

<body>
<div class="header" onclick="handle('d1')">商品管理</div>
<div id="d1" class="content">添加商品<br />
修改商品<br />
查询商品</div>

<div class="header" onclick="handle('d2')">员工管理</div>
<div id="d2" class="content">添加员工<br />
修改员工<br />
查询员工</div>

<div class="header" onclick="handle('d3')">user manager</div>
<div id="d3" class="content">add user<br />
edit user<br />
select user</div>

</body>
</html>

4. 全选(用于批量删除), 鼠标移动变色
代码如下:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</meta></head>
<script language="javascript">
	//列表换色
	var strColor="";
	function trOver(obj){
		strColor=obj.bgColor;
		obj.bgColor="@c8c8c8";
	}
	
	function trOut(obj){
		obj.bgColor=strColor;
	}
	
	//全选按纽
		function change(){
		for( i=1; i<document .all.tt.length; i++){
		document.all.tt[i].checked=document.all.tt[0].checked;
		}
	}
	
	//单击删除按扭
function getValue() {
	var str = "";
	var j = 0 ; 
	for (i = 1 ; i < document.all.tt.length ; i ++) {
		if (document.all.tt[i].checked==true) {
		if (j=0) {
		str = str + "id=" + document.all.tt[i].value;
		j = 1; 
		} else {
		str = str + "&id=" + document.all.tt[i].value;
		}
		}
		}
	alert(str);
	//window.location.href="deleteBulletin.do?" + str ;
	}
</script>
<body>
<form action="" method="post">
<table width="500" border="1" align="center" cellpadding="0" cellspacing="5">
  <tr>
    <td width="72">
		<input type="checkbox" name="tt" onClick="change();"/>全选
	</td>
    <td width="119">编号</td>
    <td width="281">姓名</td>
  </tr>
  <tr onMouseOver="trOver(this); " onMouseOut="trOut(this);">
<!--onMouseOver="this.bgColor='#eeeeee'"也可以实现鼠标移动到行上时，显示效果-->
    <td><input type="checkbox" name="tt" value="1"/></td>
    <td>1</td>
    <td>张三</td>
  </tr>
  <tr onmouseover="trOver(this);" onmouseout="trOut(this);">
    <td><input type="checkbox"  name="tt" value="2"/></td>
    <td>2</td>
    <td>李四</td>
  </tr>
</table>
<a onclick="getValue();"><p align="center">删除</p></a>
</form>
</body>
</document></script></html>

5. 菜单效果.html
代码如下:

< !doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
<script language="javascript">

function move(){
var obj = document.getElementById("div1");
obj.style.left = event.srcElement.offsetLeft;
obj.style.top = event.srcElement.offsetTop + event.srcElement.offsetHeight;
obj.style.display = "";
}

function hidden(){
var obj = document.getElementById("div1");
obj.style.display = "none";
}

</script>
</head>

<body>
鼠标移动在文字上，文字出现浮动下拉菜单！
<br />
<div id="div1" style="position:absolute; z-index:1; width:60px; 
height:80px; background-color:#00ff00;display:none" onmouseout="hidden();">
<a href="#">item1</a><br />
<a href="#">item2</a><br />
<a href="#">item3</a><br />
<a href="#">item4</a><br />
</div>
<span id="div2" style="overflow:hidden;" onmouseover="move();">首页</span>
<span id="div3" style="overflow:hidden;" onmouseover="move();">日志</span>
<span id="div4" style="overflow:hidden;" onmouseover="move();">相册</span>
<span id="div5"  onmouseover="move();">音乐</span>
<br />
-----------------------------
</body>
</html>

6. 经过设置后的弹出窗口
下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

<script LANGUAGE=javascript> 
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0,
 toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no') 
//写成一行 
</script>

参数解释：

<script LANGUAGE=javascript> js脚本开始； 
window.open 弹出新窗口的命令； 
'page.html' 弹出窗口的文件名； 
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； 
height=100 窗口高度； 
width=400 窗口宽度； 
top=0 窗口距离屏幕上方的象素值； 
left=0 窗口距离屏幕左侧的象素值； 
toolbar=no 是否显示工具栏，yes为显示； 
menubar，scrollbars 表示菜单栏和滚动栏。 
resizable=no 是否允许改变窗口大小，yes为允许； 
location=no 是否显示地址栏，yes为允许； 
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； </script>

7.setTimeout() 方法
此方法可以让 JavaScript 每隔一段间隔时间执行一段代码，代码的执行遵循事件句柄中的规则，也就是说，在这个函数中，每隔一段时间就会执行几条 JavaScript 代码 (每条代码使用“;”隔开)

例如: setTimeout(“count++; alert(‘Hello world!’);”, 500);
上边的代码将会每隔半秒钟 (500毫秒) 执行一次 “count++; alert(‘Hello world’)” 代码，此代码包含了两条 JavaScript 语句。也即是说，setTimeout() 方法有两个参数，第一个参数是想要执行的代码或函数 (在此例中是代码：count++; alert(‘Hello world’))，第二个函数是间隔时间，单位是毫秒 (在此例中是500毫秒)。
setTimeout() 方法的返回值是一个唯一的数值，这个数值有什么用呢？如果你想要终止 setTimeout() 方法的执行，那就必须使用 clearTimeout() 方法来终止，而使用这个方法的时候，系统必须知道你到底要终止的是哪一个 setTimeout() 方法 (因为你可能同时调用了好几个 setTimeout() 方法)，这样 clearTimeout() 方法就需要一个参数，这个参数就是 setTimeout() 方法的返回值 (数值)，用这个数值来唯一确定结束哪一个 setTimeout() 方法：
var id = setTimeout(“myFunction(arg1, arg2);”, 3000);
…其它的 JavaScript 语句…
if (error)
clearTimeout(id); // 出现错误时终止 setTimeout() 方法的执行
需要注意的是，setTimeout() 方法并不会让浏览器暂停执行跟在此方法后的程序代码，浏览器会一直顺着每行代码往下执行，只不过是其它代码只执行一次，而 setTimeout() 方法则是隔一段时间执行一次。在 Netscape 4.0 中，你还可以通过使用 setInterval() 方法重复执行一段代码或函数，相对应的使用 clearInterval() 方法终止前一个方法的执行，这两个方法与 setTimeout() 和 clearTimeout() 方法是一样的
8.讲解frame的用法

frame 帧其实是单独的窗口，它对应于单独的窗口对象，有自己的 location、history 和 document 属性。
下面以一个例子讲解frame的用法 (下面是frame框架中左边一个frame的代码)

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script>
	var color="#ffffff";
	var lastName="";
	function setFrameColor(fname, color) { 
	if(lastName != fname){
	window.parent.frames[fname].document.bgColor = color; 	
	}else
	{
	window.parent.frames[fname].document.bgColor="#ffffff";
	}
	lastName=fname;
	return false; 
	} 
</script>
</head>
<body>
left 
<br />
<input type="button" value="top" onClick="setFrameColor('a','#00ff00');"/>
<input type="button" value="center" onClick="setFrameColor('c','#0000ff');"/>
<input type="button" value="right" onClick="setFrameColor('d','#666666');"/>
</body>
</html>

至于帧的结构、帧是如何分布的等等问题这里就不多讲了，我们希望你能查看一下例子中的源代码，你会发现帧 A 中有一个名为 setFrameColor() 的函数，它的作用是用来改变帧 B、帧 C、帧 D 的背景色，参数 fname 为目标帧的名字，参数 color 为目的背景颜色：

function setFrameColor(fname, color) { 
window.parent.frames[fname].document.bgColor = color; 
return false; 
}

正如前边例中所演示的那样，B、C、D 帧的背景颜色确确实实被 document.bgColor 改变了，这里头最重要的是对帧对象的指定，这也是 window.parent.frames[fname] 的作用了，如果参数 fname 的值为 B，则改变帧 B 的颜色。
我们通过当前帧 (帧 A) 的 window.parent 属性指定到顶部的帧 (frameset，此帧包含了A、B、C、D四个帧) ，然后通过顶部帧的 frames 数组加上帧的名字 fname 指定目标帧 (帧 B、C、D)，最后通过目标帧的 document.bgColor 属性改变该帧的背景色。
代码如下: window.parent.frames[fname].document.bgColor = color;
下图很直观地显示了我们上边所讲的帧对象的指定关系：

9.window对象和frame对象

在脚本编程中,window对象有top,self,parent和frame等多个同义词.因此,在有些顶级浏览器对象模型中,将他们放在一起。

Window对象具有独一无二的地位:位于对象层次的最高级,甚至包括全部document对象.
处于框架集某一框架中的脚本访问frame元素对象的frameBorder属性.其语法是:
parent.document.getElementById(“c”).frameBorder

window对象的重要属性:
说明:
opener 用法：window.opener；返回打开本窗口的窗口对象。注意：返回的是一个窗口对象。如果窗口不是由其他窗口打开的，在 Netscape 中这个属性返回 null；在 IE 中返回“未定义”（undefined）。undefined 在一定程度上等于 null。注意：undefined 不是 JavaScript 常数，如果你企图使用“undefined”，那就真的返回“未定义”了。
self 指窗口本身，它返回的对象跟 window 对象是一模一样的。最常用的是“self.close()”，放在a标记中：
“href=”javascript:self.close()”
parent 返回窗口所属的框架页对象。
top 返回占据整个浏览器窗口的最顶端的框架页对象。

(1)opener
由window.open()方法创建的新浏览器窗口与原窗口没有父子关系. 只有一个很小的联系:opener属性. Opener属性的目的在于为新窗口中的脚本提供一个有效引用,使之回到原窗口中.
列: 当脚本在框架内生成新的窗口时,子窗口的opener指向那个框架.因此,如果子窗口要与主窗口的父窗口或者另一个框架通信,则必须非常小心地建立一个到远程对象的引用.例如:如果子窗口需要得到一个复选框的checked属性,而这个复选框由创建子窗口的框架的兄弟框架创建.则引用为:
opener.parent.sisterFrameName.document.formName.checkBoxName.checked
以下是opener属性的例子:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> main </title>
<script>
var myWind;
function doNew(){
if(!myWind || myWind.closed){
myWind=window.open("script14-12.htm","subWindow",
               "height=500,width=500,resizable");
}else{
myWind.close();
}
}
</script>

</head>

<body>
<form id="tt">	
Select a color for a new window:
<input type="radio" name="color" value="red" checked="checked"/> red
<input type="radio" name="color" value="yellow"/> yellow
<input type="radio" name="color" value="blue" /> blue
<input type="button" name="storage" value="make a window" onClick="doNew();"/>
<br />
this field will be form an entry in another window:
<input type="text" id="entry" size="25" value="aaaaaaaaaaa"/>
</form>
</body>
</html>

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
function getColor(){
colorButtons =self.opener.document.forms[0].color;
for(var i=0; i<colorbuttons .length;i++){
if(colorButtons[i].checked){
return colorButtons[i].value;
}
}
return "white";
}
</script>

<script>
	function accp(){
	var form1=self.opener.document.getElementById("entry").value;
	document.getElementById("text1").value=form1;
	alert(form1);
	}
</script>

<script>
	document.write("<body bgcolor='"+ getColor()+"'>");
</body></script>
</colorbuttons></script></head>

<body>
	<h3>This is a new window:</h3>
	<form>
	<input type="button" value="ss" onClick="accp();"/>
			           
	<p> Type text here for the main window:
	<input id="text1" type="text" size="25"/>
	</p></form>
</body>
</html>

(2)parent属性
当文档作为多框架窗口的一部分显示时,parent属性(和top属性)将首先起作用.
Parent和top的区别:
Parent属性指向直接的父窗口. 而top属性指向这个链中的第一个框架集窗口.
通过window.open()方法创建的新窗口与原窗口没有父子关系,新窗口的top和parent指向自己.
(3)框架的引用方法:
从frame对象访问frame的属性语法如下:
parent.document.getElementById(“frameId”).property
从frameset 访问frameset元素对象的属性的语法如下:
parent.document.getElementById(“framesetId”).property
从包含文档访问iframe元素对象的属性的语法如下:
document.getElementById(“iframeId”).property
从iframe元素的文档访问iframe元素的属性和方法的语法如下:
parent.document..getElementById(“iframeId”).property

上一篇: Dom4j解析xml常用api总结下一篇: 神速的谷歌Adsense初步审核和无语的最终审核