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

JavaScript常用方法属性总结
文章《JavaScript常用方法属性总结》二维码
  • 微信打赏
  • 支付宝打赏

已有4条评论

  1. 游客 974

    来过了,欢迎回访哦,博主博客写的不错。

    2012-03-20 22:39 回复
  2. 游客 901

    博主的留言姓名怎么显示游客的?好别致额。。

    2012-03-20 22:36 回复
  3. 游客 844

    学校里没有学到过,正在自学,博主的文章还是有帮助。

    2012-03-16 14:04 回复
  4. 游客 718

    有新意,受益非浅。

    2012-03-16 12:39 回复

(必填)

(必填)

(可选)