在Ajax中经常用到的弹出窗口和遮蔽窗口。自己写肯定是一个最佳方案，但时间和成本上，还是决定了寻找现成的吧。大概罗列一下。需要我满足我几个条件

• 一定要简洁方便
• 拥有遮蔽功能，Model Dialog ，所谓的模态窗口
• 可以根据HTML弹出窗口
• 可以定义弹出窗口的位置，大小

其实我只需要一个框，我更希望框的内容我自己控制，这样通用性就强了。而且一定要简洁，不能弹个框也要配置复杂。

最后挑选下来最满意的Boxy
http://onehackoranother.com/projects/jquery/boxy/

Boxy生产的HTML代码也是很乱的。但Boxy的设置最简单，所以上手很容易（关注ing，发现CUP有些偏高）。

–=Other Links=–
http://www.ericmmartin.com/projects/simplemodal/
http://dev.iceburg.net/jquery/jqModal/#examples
simplemodal、jqModal 。这两个是最简单的，灵活性很好，但需要自己配制的多，而且官方的DEMO和我要的需求不是很相同。需要配置的多，学习成本高了。
如果你希望定制自己的Dialog，这两个插件，可以作为基础包，在基础包在封装一下。就可以很方便的满足你的要求。

http://www.malsup.com/jquery/block/
BlockUI效果很好。而且官方的帮助也很详细，如果只是简单的使用遮蔽，推荐使用，上手也容易。

http://jquery.com/demo/thickbox/
貌似很复杂，而且偏向于图片，直接就否决了

http://docs.jquery.com/UI/Dialog
官方的要，还要引几个扩展的JS,支持窗口缩放什么的，但生产的代码也太复杂了，不推荐。

网络上整理的一些Dialog列表
http://hi.baidu.com/freezesoul/blog/item/2889b44580e2fd23cffca3fb.html
http://vision-media.ca/resources/jquery/jquery-popup-plugin-review

Custom JavaScript Dialog Boxes
http://hi.baidu.com/freezesoul/blog/item/63a10bfa6e54109259ee90d8.html

现在的问题是这种动态的压缩会导致CPU占用率过高,现在我想到的解决辨法是通过提供静态压缩(就是将js预先通过gzip.exe压缩好)

一.下面描述在tomcat中的应用

1.将prototype.js通过gzip.exe压缩保存成prototype.gzjs
2.设置header,我编写了一个简单的AddHeadersFilter来将所有以gzjs结尾的文件增加设置header Content-Encoding=gzip

测试prototype是否正常的代码

在Apache httpd中可以直接通过在httpd.conf增加AddEncoding x-gzip .gzjs来映射.gzjs文件的header

二.相关压缩率数据
1. prototype.js 1.5.0_rc0原始大小56KB,未经任何处理直接使用gzip压缩为12KB,总压缩率79%
2. 通过js压缩工具压缩过的protytype.js为20KB,使用gzip压缩为10KB,总压缩率为83%
3. 实际项目中的多个js合并成的文件 439KB,直接通过gzip压缩为85KB,总压缩率81%
4. 439KB经过js压缩为165KB,再经过gzip压缩为65KB,总压缩率86%
基本上你都可以忽略js压缩工具的压缩率,直接使用gzip压缩

gzip下载地址 http://www.gzip.org
tomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rar

Java代码

1. <filter>   
2.     <filter-name>CompressingFilter</filter-name>   
3.     <filter-class>   
4.         com.tacitknowledge.filters.gzipfilter.GZIPFilter   
5.     </filter-class>      
6. </filter>   
7.         <!-- 这里按自己许多针对不同文件进行filter-mapping配置，比如*.css -->   
8. <filter-mapping>   
9.     <filter-name>CompressingFilter</filter-name>   
10.     <url-pattern>*.js</url-pattern>                     
11. </filter-mapping>  

	<filter>
<filter-name>CompressingFilter</filter-name>
<filter-class>
com.tacitknowledge.filters.gzipfilter.GZIPFilter
</filter-class>
</filter>
<!-- 这里按自己许多针对不同文件进行filter-mapping配置，比如*.css -->
<filter-mapping>
<filter-name>CompressingFilter</filter-name>
<url-pattern>*.js</url-pattern>
</filter-mapping>

function initialize() {
    var xmlDoc;
    var xslDoc;

    // 判断浏览器的类型
    if(document.implementation && document.implementation.createDocument)
    {        
        // 支持Mozilla浏览器
        try
        {
            xmlDoc = document.implementation.createDocument("", "", null);    
            xmlDoc.async = false;
            xmlDoc.load("guestbook/guestbook.xml");
        }
        catch(e)
        {
            alert("error:001");
        }
        try
        {
            xslDoc = document.implementation.createDocument("", "", null);
            xslDoc.async = false;     
              xslDoc.load("guestbook/guestbook.xsl");
              
          }
          catch(e)
          {
              alert("error:002");
          }
          try
          {
              // 定义XSLTProcessor对象    
            var xsltProcessor = new XSLTProcessor();
            xsltProcessor.importStylesheet(xslDoc);
            var oResultFragment = xsltProcessor.transformToFragment(xmlDoc,document);
            // 将解析过的文本输出到页面
            var oDiv = document.getElementById("guestbookPanel");
            oDiv.appendChild(oResultFragment);
        }
        catch(e)
        {
            alert("error:003");
        }    
    }
    else if(typeof window.ActiveXObject != 'undefined')
    {        
        //var xmlDoc=Server.CreateObject("Msxml2.DOMDocument.4.0");        
        // 支持IE浏览器
        xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
        xslDoc = new ActiveXObject('Microsoft.XMLDOM'); 
        xmlDoc.async = false;
        xslDoc.async = false;     
        xmlDoc.load("guestbook/guestbook.xml");
          xslDoc.load("guestbook/guestbook.xsl");
        guestbookPanel.innerHTML = xmlDoc.documentElement.transformNode(xslDoc);    
    }
    else
    {
        alert("Browser unknown!");
    }
}

javascript dom 处理XSL显示数据的第二种方式。

主要代码如下：

var xmlDoc;
 var xslDoc;

 // 判断浏览器的类型
 if(document.implementation && document.implementation.createDocument)
 {  
  // 支持Mozilla浏览器
  try
  {
   xmlDoc = document.implementation.createDocument("", "", null); 
   xmlDoc.async = false;
   xmlDoc.load("guestbook/guestbook.xml");
 
   xslDoc = document.implementation.createDocument("", "", null);
   xslDoc.async = false;  
     xslDoc.load("guestbook/guestbook.xsl");     
   
     // 定义XSLTProcessor对象 
   var xsltProcessor = new XSLTProcessor();
   xsltProcessor.importStylesheet(xslDoc);
    // transformToDocument方式
    var result = xsltProcessor.transformToDocument(xmlDoc);
    var xmls = new XMLSerializer();
    document.getElementById("guestbookPanel").innerHTML = xmls.serializeToString(result);
   
  }
  catch(e)
  {
   alert("Unable to do xml/xsl processing");
  } 
 }
 else if(typeof window.ActiveXObject != 'undefined')
 {
  try
  {
   // 支持IE浏览器
   xmlDoc = new ActiveXObject('Msxml2.DOMDocument');
   xslDoc = new ActiveXObject('Msxml2.DOMDocument'); 
   xmlDoc.async = false;
   xslDoc.async = false;  
   xmlDoc.load("guestbook/guestbook.xml");
     xslDoc.load("guestbook/guestbook.xsl");
   guestbookPanel.innerHTML = xmlDoc.documentElement.transformNode(xslDoc);
  }
  catch(e)
  {
   alert("Unable to do xml/xsl processing");
  }
 }
 else
 {
  alert("Browser unknown!");
 }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>function this 的使用</title>
</head>

<body>
<script type="text/javascript" language="javascript">
cls=function(data){
 this.showA=function (a){
  alert(a);
 };
 //showA('showA');
 this.showA("ccc")
 function showB(b){
  alert(b);
 };
 showB("ddd")
 function showData(data){
  alert(data);
 };

}
var c=new cls("simone");
c.showA("asmone");
c.showB("tt");
cls.showB("b");
cls.showData("wang");
alert(cls("simone"));
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>function : 的使用</title>
</head>

<body>
<script type="text/javascript" language="javascript">
var FN=function(s){
 alert('fn');
 alert(s);
 return{
  nopar:function(){alert('nopar')},
  onepar:function(p){alert('onepar');alert(p)},
  shows:function(){alert(s)},
  shows2:function(s){alert(s)}
 }
}
fn=new FN('onefn');
fn.nopar();
fn.onepar('ts');
fn.shows();
fn.shows2('tbb');

alert('******************');

var FN2={
 one:function(){alert('one')},
 two:function(p){alert(p),alert(this)},
 three:function(){
  this.one();
  alert('three');
  function in_three(){
   alert('in_three');
  };
  this.this_three=function(){
   alert('this_three');
  };
 }
};
FN2.one();
FN2.two('fn2 two');
FN2.three();
var three2=FN2.three;
alert('########');
var th=new three2();//去掉this.one()这一语句后，可以new成功
th.this_three();
</script>
</body>
</html>

<html>  
 <head>  
   <script src="prototype.js"></script>  
   <script src="jquery.js"></script>  
   <script>  
     jQuery.noConflict();   
        
     // Use jQuery via jQuery(...)   
     jQuery(document).ready(function(){   
       jQuery("div").hide();   
     });   
        
     // Use Prototype with $(...), etc.   
     $('someid').style.display = 'none';   
   </script>  
 </head>  
 <body></body>  
 </html>

方法二：

<html>  
 <head>  
   <script src="prototype.js"></script>  
   <script src="jquery.js"></script>  
   <script>  
     var $j = jQuery.noConflict();   
        
     // Use jQuery via $j(...)   
     $j(document).ready(function(){   
       $j("div").hide();   
     });   
        
     // Use Prototype with $(...), etc.   
     $('someid').style.display = 'none';   
   </script>  
 </head>  
 <body></body>  
 </html>  

方法三：

<html>  
 <head>  
   <script src="prototype.js"></script>  
   <script src="jquery.js"></script>  
   <script>  
     jQuery.noConflict();   
        
     // Put all your code in your document ready area   
     jQuery(document).ready(function($){   
       // Do jQuery stuff using $   
       $("div").hide();   
     });   
        
     // Use Prototype with $(...), etc.   
     $('someid').style.display = 'none';   
   </script>  
 </head>  
 <body></body>  
 </html>  

以下部分为原文翻译:

$(document).ready(function() {
	// do stuff when DOM is ready
});

$(document).ready(function() {
	$("a").click(function() {
		alert("Hello world!");
	});
});

<a href="#" onclick="alert('Hello world')">Link</a>

$(document).ready(function() {
	$("#orderedlist").addClass("red");
});

$(document).ready(function() {
	$("#orderedlist > li").addClass("blue");
});

$(document).ready(function() {
	$("#orderedlist li:last").hover(function() {
		$(this).addClass("green");
	}, function() {
		$(this).removeClass("green");
	});
});

$(document).ready(function() {
	$("#orderedlist").find("li").each(function(i) {
		$(this).html( $(this).html() + " BAM! " + i );
	});
});

$(document).ready(function() {
	// use this to reset a single form
	$("#reset").click(function() {
		$("#form")[0].reset();
	});
});

$(document).ready(function() {
	// use this to reset several forms at once
	$("#reset").click(function() {
		$("form").each(function() {
			this.reset();
		});
	});
});

$(document).ready(function() {
	$("li").not("[ul]").css("border", "1px solid black");
});

$(document).ready(function() {
	$("a[@name]").background("#eee");
});

$(document).ready(function() {
	$("a[@href*=/content/gallery]").click(function() {
		// do something with all links that point somewhere to /content/gallery
	});
});

$(document).ready(function() {
	$('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         if (answer.is(':visible')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
});

$(document).ready(function() {
	$("a").hover(function() {
		$(this).parents("p").addClass("highlight");
	}, function() {
		$(this).parents("p").removeClass("highlight");
	});
});

$(function() {
	// code to execute when the DOM is ready
});

$(function() {
	$("a").click(function() {
		alert("Hello world!");
	});
});

$(document).ready(function() {
	// generate markup
	var ratingMarkup = ["Please rate: "];
	for(var i=1; i <= 5; i++) {
		ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
	}
	// add markup to container and applier click handlers to anchors
	$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
		e.preventDefault();
		// send requests
		$.post("rate.php", {rating: $(this).html()}, function(xml) {
			// format result
			var result = [
				"Thanks for rating, current average: ",
				$("average", xml).text(),
				", number of votes: ",
				$("count", xml).text()
			];
			// output result
			$("#rating").html(result.join(''));
		} );
	});
});

// lets use the shortcut
$(function() {
	var addClickHandlers = function() {
		$("a.clickMeToLoadContent").click(function() {
			$("#target").load(this.href, addClickHandlers);
		});
	};
	addClickHandlers();
});

// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
  ...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );

$(document).ready(function() {
	$("a").toggle(function() {
		$(".stuff").hide('slow');
	}, function() {
		$(".stuff").show('fast');
	});
});

$(document).ready(function() {
	$("a").toggle(function() {
		$(".stuff").animate({
			height: 'hide',
			opacity: 'hide'
		}, 'slow');
	}, function() {
		$(".stuff").animate({
			height: 'show',
			opacity: 'show'
		}, 'slow');
	});
});

<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>

$(document).ready(function() {
	$("#large").tableSorter();
});

$(document).ready(function() {
	$("#large").tableSorter({
		stripingRowClass: ['odd','even'],	// Class names for striping supplyed as a array.
		stripRowsOnStartUp: true		// Strip rows on tableSorter init.
	});
});

$("input[@type='checkbox']").each(function() {
	this.checked = true;
	// or, to uncheck
	this.checked = false;
	// or, to toggle
	this.checked = !this.checked;
});

$.fn.check = function() {
	return this.each(function() {
		this.checked = true;
	});
};

$("input[@type='checkbox']").check();

$.fn.check = function(mode) {
	var mode = mode || 'on'; // if mode is undefined, use 'on' as default
	return this.each(function() {
		switch(mode) {
		case 'on':
			this.checked = true;
			break;
		case 'off':
			this.checked = false;
			break;
		case 'toggle':
			this.checked = !this.checked;
			break;
		}
	});
};

$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');

$.fn.rateMe = function(options) {
	var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery context
	
	var settings = {
		url: "rate.php"
		// put more defaults here
		// remember to put a comma (",") after each pair, but not after the last one!
	};
	
	if(options) { // check if options are present before extending the settings
		$.extend(settings, options);
	}
	
	// ...
	// rest of the code
	// ...
	
	return this; // if possible, return "this" to not break the chain
});

© 2006, Jörn Zaefferer - last update: 2006-09-12

中文版翻译:Keel - 最后更新: 2006-12-13

1、浏览器事件的捕捉

在IE 下有一个全局的window.event，当事件触发后可以直接使用，但是在fireFox下没有这个东西，当调用触发事件调用一个函数时，如果这个函数没有形参，那么firefox会默认的把event（事件）传进去，但是有参数时就不行啦，所以解决的办法是，自己手动传一个event进去，这样就ok 了，具体代码如下：

下面两个函数，都是响应鼠标onclick时触发的动作，第一个在ie下使用正常，但是在firefox下却有问题，改成第二个那样使用，就没有问题了，注意调用方法的区别

view plaincopy to clipboardprint?
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>

view plaincopy to clipboardprint?
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>

其实event对象在ie以及firefox还有很多不同的特性，比如clienx，pagex等，但是由于在现在流行使用的js框架prototype中解决了很多这些问题，所以如果是在基于prototype下的开发，这些问题可以考虑得少一些了，只是上面提到的这个捕获问题，prototype中并没有完善的解决，所以单独列出来，下面提及的关于js的也都只列出prototype中未解决的

2、关于透明度的设置

为了达到给层设置半透明的效果时，在IE和firefox下也有所不同，IE下，style的filter属性有Alpha值可供使用，而firefox下没有Alpha值，所以得指定style的MozOpacity，代码见下：

<STYLE>
filter: Alpha(opacity=10); /*IE*/
-moz-opacity:.1; /*老版本FireFox 1.0 以前*/
opacity:0.1; /*新版本FireFox*/
</STYLE>

view plaincopy to clipboardprint?
<script language="javascript">
//设置一个id为screen的div的透明度为45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';

//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>
<script language="javascript">
//设置一个id为screen的div的透明度为45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';

//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>

3、定位层时的有趣问题

在定位层时，我们的做法是给层的style.left 和 style.top设置位置，但是今天发现了一个很有趣的问题，代码如下：

view plaincopy to clipboardprint?
<script language="javascript">
//给一个id为dialog的层定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;

//问题出现了，在ie下，默认将层的左上角定位在（100px,100px）这个点上
//但是在firefox下却死活都不行，后来发现，原来ie在你没有指定单位的时候
//替你加上了单位“px”，而firefox比较“笨”
//他觉得你没有指定单位，就不给你定位，好了，那么标准的写法应该是这样：

document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;

//这样firefox也认了

</script>
<script language="javascript">
//给一个id为dialog的层定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;

//问题出现了，在ie下，默认将层的左上角定位在（100px,100px）这个点上
//但是在firefox下却死活都不行，后来发现，原来ie在你没有指定单位的时候
//替你加上了单位“px”，而firefox比较“笨”
//他觉得你没有指定单位，就不给你定位，好了，那么标准的写法应该是这样：

document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;

//这样firefox也认了

</script>

4、PNG透明背景的问题
PNG图片在网站设计中是不可或缺的部分，最大的特点应该在于PNG可以无损压缩，而且还可以设置透明，对于增强网站的图片色彩效果有重要的作用。

但为什么PNG图片却没有GIF和JPG图片的使用来得广泛呢，这个祸因应归属于微软的IE浏览器（Firefox和Opera对PNG支持的比较好，而现在浏览器的主流IE6却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的IE7可以很好的支持PNG，可以想象在未来的网络世界，PNG图片的重要性将会更加凸显。

但在大家还在绝大多数的使用IE6的时候，我们又怎样在IE6的世界去完美使用PNG图片呢（PNG图片的时候最重要的地方在于PNG透明背景图片的运用）。我们应该庆幸我们是幸福的！IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。但IE5.0无法支持属性，那只有完全绝望了，不过绝望的只是几个，得到是绝大数，我们应该知足，知足才会常乐。

现在我们将通过Hack和AlphaImageLoader滤镜来实现IE6下的PNG透明背景图片。

先熟悉下滤镜的语法：

view plaincopy to clipboardprint?
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

属性：

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

属性：

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。如下

view plaincopy to clipboardprint?
<script language="javascript>
//给一个id为infoBox的层设置一个透明背景，背景图片是down.png，代码如下
//进行了浏览器判断

if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=down.png')";
}

</script>
<script language="javascript>
//给一个id为infoBox的层设置一个透明背景，背景图片是down.png，代码如下
//进行了浏览器判断

if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=down.png')";
}

</script>

不过需要注意的一个地方：

使用AlphaImageLoader 后该区域的超链接和按钮会失效，解决的方法：

对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面

 16. document.getElementsByName() 和 document.all[name] 的问题
  (1)现有问题：
     在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。 

如果是通过子窗体关闭父窗体时怎么做呢
子窗体（弹出窗体）：
同理可得：
Response.Write("<script>window.opener.top.opener=null;window.opener.top.close()</script>")

prototype.js中用了大量的apply和call函数，不注意会造成理解偏差。
官方解释：应用某一对象的一个方法，用另一个对象替换当前对象。
apply与call的区别是第二个参数不同。apply是  数组或者arguments 对象。而call是逗号隔开的任何类型。

apply,call方法最让人混淆的地方也是apply,call的特色。但最好不要滥用。
能改变调用函数的对象。如下例，函数中用到this关键字，这时候this代表的是apply,call函数的第一个参数。

<script src="prototype1.3.1.js"></script>
<input type="text" id="myText"  value="input text">
<script>
   function Obj(){
       this.value="对象！";
   }
   var value="global 变量";
   function Fun1(){
       alert(this.value);
   }
   window.Fun1();
   Fun1.apply(window);
   Fun1.apply($('myText'));
   Fun1.apply(new Obj());
</script>

2、关于闭包
prototype.js在Class.create,bind等中用到javascript的闭包特色。但整体上prototype.js对于强大的闭包特性用的不多。大家可以参阅我翻译的篇文章了解闭包。
3、让我比较反感的两个方法
（1）
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
很讨厌用别的语言的风格来写javascript。用这个方法构造自定义类  并没有觉得有多方便，减少代码行数，只会让人难理解，多定义一个initialize方法。
其实讨厌这条有些牵强，不过修改Object的原型对象就有点过分了。
（2）Object.prototype.extend
  先不过你取个extend的名字会让熟悉java的人引起的歧义。修改Object的prototype就说不过去了。不知道作者是怎么考虑的。当你for in循环对象是，麻烦就来了。可能有人会问你for in干吗。 我一个项目中既用了DWR,也用了prototype.js，dwr返回的javascript对象都多了个exetend属性，还得特殊处理。
  以前我比较过dojo和prototype.js中继承的实现，现在我明白个道理。对于javascript这种没有静态类型检查，语法宽松的语言来讲，如果你选择了某个js类库，那你也必须适应作者写javascript的风格。prototype.js的作者对extend的使用炉火纯青，如果我们不当它只是个属性拷贝的函数的话，多读读prototype.js的代码是好的。
4、关于函数的绑定
  类库提供了Function.prototype.bind  Function.prototype.bindAsEventListener两个方法。首先我们从概念上解释一个这两个方法。
任何一个函数都可以调用这两个方法；参数的是javascript对象或网页上元素对象；返回类型是个函数对象。
本来我就是个函数，返回还是函数，到这两个函数有什么不同呢。看实现代码，关键还是apply\call函数的代码。其实这里只是转化了一下方法调用的对象。

<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="asf" value=1> Test
<script>
    var CheckboxWatcher = Class.create();
    CheckboxWatcher.prototype = {
       initialize: function(chkBox, message) {
            this.chkBox = $(chkBox);
            this.message = message;
            this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
       },
       showMessage: function(evt) {
          alert(this.message + ' (' + evt.type + ')');
       }
    };
new CheckboxWatcher('myChk','message!!!!');
//$('myChk').onclick=function(){};
</script>
这是 https://compdoc2cn.dev.java.net/ 上举的例子，个人感觉没什么意思，反而让我对bind,bindAsEventListener有些反感。（javascript就是这样，明明大家都知道的语法，但写出来的代码差别确很大）
看下面代码：

<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
function Class(){
    this.name="class";
}
Class.prototype.getName=function(){
    alert(this.name);
}
var obj=new Class();
//$('myChk').onclick=obj.getName;
$('myChk').onclick=obj.getName.bind(obj);
//$('myChk').onclick=obj.getName.bind($('myChk'));
</script>

从上面代码可以看出bind/bindAsEventListener只是包装了一下apply/call方法，改变方法的调用对象。如例子，你可以把obj.getName方法转化成任何对象调用，并且把方法让表单元素触发。（bind和bindAsEventListener之间只是返回函数的参数不同）
这两个方法也可以用在对象之间的方法重用，实现类似继承方法的概念。看以下代码，其实是比较无聊的。

<script src="prototype1.3.1.js"></script>
<script>
function Class1(name){
    this.name=name;
}
Class1.prototype.getName=function(){
    alert(this.name);
}
function Class2(name){
    this.name=name;
　　this.getName=Class1.prototype.getName.bind(this);
}
var obj1=new Class2("yql");
obj1.getName();
var obj2=new Object();
obj2.name="zkj";
obj2.fun=Class1.prototype.getName.bind(obj2);
obj2.fun();
</script>

我从来没读过prototype.js的扩展项目代码，也不知道bind..的最佳实践，一起挖掘吧。但你绝对不要把bind/bindAsEventListener从绑定的词义上来理解，可能会让你更加迷惑。从apply/call理解本质。应用某一对象的一个方法，用另一个对象替换当前对象。

5、关于事件的注册

<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
Event.observe(myChk, 'click', showMessage, false);
//$('myChk').onclick=showMessage;
//$('myChk').onclick=showMessage.bind();
$('myChk').onclick=showMessage.bind($('myChk'));
function showMessage() {
      alert(this.value);
}
</script>

执行上面代码，你就能明白Event.observe与bind/bindAsEventListener之间的区别：
（１） 显然Event.observe有限制，只能处理简单的函数，并函数中不能有this之类的东西。
（２）Event.observe内部用到addEventListener／attachEvent。能把多个函数加到一个触发事件（window.onload）。bind是覆盖。

6、关于事件监听最佳实践
很显然prototype.js提供的事件注册方法不是很完善。那看看dojo的时间注册吧（中文版），更加复杂，估计很多人像我一样，对于dojo暂时持观望态度。
如果你看过的前篇关于闭包的介绍，可能见过以下代码。
看以下代码前我想表述一个观点，任何网页中元素，浏览器都会为你创建一个对象（见）。（我觉得）这些对象与你建立javascript对象区别是它们有事件监听，会响应鼠标键盘的事件。如果你用了以下代码，那么把事件监听代码很好的转化到你的javascript代码中。

function associateObjWithEvent(obj, methodName){
    return (function(e){
        e = e||window.event;
        return obj[methodName](e, this);
    });
}
function DhtmlObject(elementId){
    var el = getElementWithId(elementId);
    if(el){
        el.onclick = associateObjWithEvent(this, "doOnClick");
        el.onmouseover = associateObjWithEvent(this, "doMouseOver");
        el.onmouseout = associateObjWithEvent(this, "doMouseOut");
    }
}
DhtmlObject.prototype.doOnClick = function(event, element){
    ... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... // doMouseOut method body.
}

　　B.1 anchor对象
　　使用<A NAME=>标记创建的HTML描点能被一个链接作为目标如果锚点包括HREF=特性,则它也是一个链接对象。
　　anchor对象是document对象的一个属性,它本身没有属性方法或者事件处理程序。

　　B.2 anchors数组
　　anchors数组是document对象的一个属性,是文档内所有anchor对象的一个列表如果anchor也是一个link(链接),则它会同时出现在anchors和links数组中。
　　属性
　　length 文档内的锚点个数

　　B.3 array对象
　　array对象是Netscape Navlgator 3.0 beta 3中引入的一个新的对象,因而,它不能在Netscape 2.0中使用它是一个内置对象,而不是其它对象的属性。
　　属性
 　length 数组中的值个数

　　B.4 button对象
　　它是form对象的一个属性,使用<INPUT TYPE="BUTTON">标记来创建。
　　属性
　　name HTML标记中的NAME=特性
　　value HTML标记中的VALUE=特性
　　方法
　　click 模拟鼠标单击一按钮
　　事件处理程序
　　Onclick

　　B.5 checkbox 对象
　　它是form对象的一个属性,使用<INPUT TYPE="CHECKBOX">标记来创建。
　　属性
　　checked 复选框的选择状态
　　defaultChecked 标记的CHECKED=特性
　　name 标记的NAME=特性
　　value 标记的VALUE=特性
　　方法
　　click 模拟鼠标单击按钮
　　事件处理程序
　　onclick

　　B.6 Date对象
　　它是一个内置对象——而不是其它对象的属性,允许用户执行各种使用日期和时间的过程。
  　方法
　　getDate() 查看Date对象并返回日期
　　getDay() 返回星期几
　　getHours() 返回小时数
　　getMinutes() 返回分钟数
　　getMonth() 返回月份值
　　getSeconds() 返回秒数
　　getTime() 返回完整的时间
　　getTimezoneoffset() 返回时区偏差值(格林威治平均时间与运行脚本的计算机所处时区设置之间相差的小时数)
　　getYear() 返回年份
　　parse() 返回在Date字符串中自从1970年1月1日00:00:00以来的毫秒数(Date对象按照毫秒数的形式存储从那时起的日期和时间)但是注意,该方法当前不能正确运行
　　setDate() 改变Date对象的日期
　　setHours() 改变小时数
　　setMinutes() 改变分钟数
　　setMonth() 改变月份
　　setSeconds() 改变秒数
　　setTime() 改变完整的时间
　　setYear() 改变年份
　　toGMTString() 把Date对象的日期(一个数值)转变成一个GMT时间字符串,返回类似下面的值:Weds,15 June l997 14:02:02 GMT(精确的格式依赖于计算机上所运行的操作系统而变)
　　toLocaleString() 把Date对象的日期(一个数值)转变成一个字符串,使用所在计算机上配置使用的特定日期格式
　　UTC() 使用Date UTC(年、月、日、时、分、秒),以自从1970年1月1日00:00:00(其中时、分、秒是可选的)以来的毫秒数的形式返回日期

　　B.7 document对象
　　该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档。
　　属性
　　alinkColor 活动链接的颜色(ALINK)
　　anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象)
　　anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象)
　　bgColor 文档的背景颜色(BGCOLOR)
　　cookie 存储于cookie.txt文件内的一段信息,它是该文档对象的一个属性
　　fgColor 文档的文本颜色(<BODY>标记里的TEXT特性)
　　form 文档中的一个窗体(<FORM>)(该属性本身也是一个对象)
　　forms anay 按照其出现在文档中的顺序列出窗体对象的一个数组(该属性本身也是一个对象)
　　lastModified 文档最后的修改日期
　　linkColor 文档的链接的颜色,即<BODY>标记中的LINK特性(链接到用户没有观察到的文档)
　　link 文档中的一个<A HREF=>标记(该属性本身也是一个对象)
　　links array 文档中link对象的一个数组,按照它们出现在文档中的顺序排列(该属性本身也是一个对象)
　　location 当前显示文档的URL。用户不能改变document.location(因为这是当前显示文档的位置)。但是,可以改变window.location (用其它文档取代当前文档)window.location本身也是一个对象,而document.location不是对象
　　referrer 包含链接的文档的URL,用户单击该链接可到达当前文档
　　title 文档的标题((TITLE>)
　　vlinkColor 指向用户已观察过的文档的链接文本颜色,即<BODY>标记的VLINK特性
　　方法
　　clear 清除指定文档的内容
　　close 关闭文档流
　　open 打开文档流
　　write 把文本写入文档
　　writeln 把文本写入文档,并以换行符结尾

　　B.8 elements数组
　　它是form对象的一个属性,列举了窗体内各元素的一个数组。
　　属性
　　1ength 窗体内的元素个数
　　B.9 form对象
　　它是document对象的一个属性,文档内的一个窗体。
　　属性
　　action 包含了为一个窗体提交的目标URL的字符串
　　button 窗体内的一个按钮,使用<INPUT TYPE=”BUTTON”>标记来创建(该属性本身也是一个对象)
　　checkbox 复选框,使用<INPUT TYPE=”CHECKBOX”>标记来创建 (该属性本身也是一个对象)
　　elements array 一个数组,按照其出现于窗体内的顺序列举各窗体元素(该属性本身也是一个对象)
　　encoding 窗体的MIME编码
  　hidden 窗体里的一个隐藏元素(<INPUT TYPE=”HIDDEN”>)。窗体对象的一个属性(该属性本身也是一个对象)
　　length 窗体里的元素的个数
　　method 输入窗体的数据传送到服务器上的方式,即(FORM)标记中的METHOD特性
　　radio 设置在窗体里的单选按钮(<INPUT TYPE=”RADIO”>)(该属性本身也是一个对象)
　　reset 窗体里的复位按钮((1NPUT TYPE=”RESET”>)(该属性自身也是一个对象)
　　select 窗体里的选择框(<SELECT>)(该属性本身也是一个对象)
　　submit 窗体里的提交按钮(<INPUT TYPE=”SUBMIT”>)(该属性本身也是一个对象)
　　target 提交窗体后,显示回应信息的窗口的名字
　　text 窗体里的文本元素(<INPUT TYPE=”TEXT”>)(该属性本身也是一个对象)
　　textarta 窗体里的文本区元素(<TEXTAREA>)(该属性本身也是一个对象)
　　方法
　　submit 提交窗体(与使用Submit按钮的作用相同)事件处理程序
　　onsubmit

　　B.10 forms数组
　　该数组是document对象的一个属性,即列举了文档内的各窗体的一个数组。
　　属性
　　length 文档内窗体的个数

　　B.11 frame对象
　　它是window对象的一个属性,窗口内的一个框架。除了个别例外,frame对象与window对象的作用相同。
　　属性
　　frames array 列举该框架内的各个子框架的一个数组(该属性本身也是—个对象)
　　length 该框架内的框架数
　　name 框架的名字(<FRAME>标记里的NAME特性)
　　parent 包含本框架的父窗口的同义词
　　self 当前框架的同义词
　　window 当前框架的同义词
　　方法
　　clearTimeout() 用来终止setTimeout方法的工作
　　setTimeout() 等待指定的毫秒数,然后运行指令

　　B.12 frames数组
　　它既是window对象,也是frame对象的属性,列举了window或者frame对象内的各框架。
　　属性
　　length 窗口或框架对象内的框架数

　　B.13 hidden对象
　　糊为form对象的一个属性,窗体内的一个隐藏元素(<INPUT TYPE=”HIDDEN”>)。
　　属性
　　name 标记内的名字(NAME特性)
　　value 标记内的VALUE=特性

　　B.14 history对象
　　它为window对象的一个属性,该窗口的历史列表。
　　属性
　　length 历史列表中的项目数
　　方法
　　back 加载历史列表中的上一个文档
　　forward 加载历史列表中的下一个文档
　　go 加载历史列表中的一个指定文档,通过文档在列表中的位置来指定

　　B.15 image对象
　　它是document对象的一个属性,是使用(1MG)标记内嵌入文档里的一幅图像这是Netscape Navigator 3.0 beta 3引入的新对象。
　　属性
　　border <IMG>标记的BORDER特性
　　complete 表示浏览器是否完整地加载了图像的一个布尔值
　　height HEIGHT特性
　　hspace HSPACE特性
　　lowsrc LOWSRC特性
　　src SRC特性
　　vsPace VSPACE特性
　　width WIDTH特性
　　事件处理程序
　　Onload 图象载入
　　Onerror 载入错误
　　Onabort 取消

　　B.16 images数组
　　它是document对象的一个属性,文档中所有图像的列表。
　　属性
　　length 文档内的图像个数

　　B.17 link
　　它是document对象的一个属性,文档内的一个<A HREF=>标记。
　　属性
　　hash 以散列号(#)开始的一个字符串,用于指定URL内的一个锚点
　　host 包括冒号和端口号的URL的主机名部分
　　hostname 与host属性相同,除了不包括冒号和端口号外
　　href 完整的URL
　　pathname URL的目录路径部分
　　port URL的:端口部分
　　protocol URL类型(http:、ftp:、gopher:等等)
　　search 以一个问号开始的URL中的一部分,用于指定搜索信息
　　target 当用户单击一链接(TARGET特性)时,用于显示被引用文档内容的窗口
　　事件处理程序
　　Onclick 点击
　　Onmouseover 鼠标移到对象上

　　B.18 links数组
　　它是document对象的一个属性,文档内所有链接的一个列表。
　　属性
　　length 文档内的链接数

　　B.19 location对象
　　它为document对象的一个属性,该文档的完整URL，请不要把它与window.location属性相混淆,后者可用来加载一个新文档,并且window.location属性本身并不是一个对象，同时,window.location可以用脚本修改,而document.location则不能。
　　属性
　　hash 以散列号(#)开始的一个字符串,用于指定URL内的一个锚点
　　host 包括冒号和端口号的URL的主机名部分
　　hostname 与host属性相同,除了不包括冒号和端口号之外
　　href 完整的URL
　　pathname URL的目录路径部分
　　port URL的:端口部分
　　protocol URL的类型(http:、ftp:、gopher:等等)
　　search 以问号(?)开始的URL中的一部分,用于指定搜索信息
　　target 用户单击链接(TARGET特性)时,用于显示被引用文档的内容的窗口

　　B.20 math对象
　　该对象不是其它对象的一个属性,而是一个内置对象,包含了许多数学常量和函数。
　　属性
　　E 欧拉常量,自然对数的底(约等于2.718)
　　LN2 2的自然对数(约等于0.693)
　　LN10 10的自然对数(约等于2.302)
　　LOG2E 以2为底的e的对数(约等于1.442)
　　LOG10E 以10为底的e的对数(约等于o.434)
　　PI ∏的值(约等于3.14159)
　　SQRT1_2 0.5的平方根(即l除以2的平方根,约等于o.707)
　　SQRT2 2的平方根(约等于1.414)
　　方法
　　abs() 返回某数的绝对值(即该数与o的距离,例如,2与一2的绝对值都是2)
　　acos() 返回某数的反余弦值(以弧度为单位)
　　asin() 返回某数的反正弦值(以弧度为单位)
　　atan() 返回某数的反正切值(以弧度为单位)
　　ceil() 返回与某数相等,或大于该数的最小整数(ceil(-22.22)返回-22;ceil22,22)返回23;ceil(22)返回22)
　　cos() 返回某数(以弧度为单位)的余弦值
　　exp() 返回en
　　floor() 与ceil相反(floor(一22.22)返回一23;floor(22.22)返回22; floor(22)返回22)
　　10g() 返回某数的自然对数(以e为底)
　　max() 返回两数间的较大值
　　min() 返回两数问的较小值
　　pow() 返回m的n次方(其中,m为底,n为指数)
　　random() 返回0和1之间的一个伪随机数(该方法仅在Netscape
　　Navigator的UNIX版本中有效)
　　round() 返回某数四舍五入之后的整数
　　sin() 返回某数(以弧度为单位)的正弦值
　　sqrt() 返回某数的平方根
　　tan() 返回某数的正切值

　　B.2l navigator对象
　　该对象不是其它对象的属性,而是一个内置对象它包含了有关加载文档的浏览器的信息。
　　属性
　　appCodeName 浏览器的代码名(例如,Mozilla)
　　appName 浏览器的名字
　　appVersion 浏览器的版本号
　　userAgent 由客户机送到服务器的用户与代理头标文本
　　方法
　　javaEnabled JavaScript中当前并没有该方法,但是不久之后将会添加上它将查看浏览器是否为兼容JavaScript的浏览器,如果是,继续查看JavaScript是否处于支持状态。

　　B.22 options数组
　　该数组是select对象的一个属性,即选择框中的所有选项(<OPTION>)的一个列表。
　　属性
　　defaultSelected 选项列表中的缺省选项
　　index 选项列表中某选项的索引位置
　　length 选项列表中的选项数(<OPTIONS>)
　　name 选项列表的名字(NAME特性)
　　selected 表示选项列表中某选项<OPTION>是否被选中的一个布尔类型值
　　selectedIndex 选项列表中已选中的<OPTION>的索引(位置)
　　text 选项列表中<OPTION>标记后的文本
　　value 选项列表中的VALUE=特性

　　B.23 Password 对象
　　它是document对象的一个属性,一个<INPUT TYPE=”PASSWORD”>标记。
　　属性
　　defaultValue password对象的缺省值(VAlUE=特性)
　　name 对象的名字(NAME=特性)
　　value 该域具有的当前值最初与VALUE=特性(defauttValue)相同,但是,如果脚本修改了该域中的值,则该值将改变
　　方法
　　focus 把焦点从该域移开
　　blur 把焦点移到该域
　　select 选择输入区域

　　B.24 radio对象
　　它是form对象的一个属性,窗体内的一组单选按钮(选项按钮)(<INPUT TYPE=”RADIO”>)。
　　属性
　　checked 复选框或选项按钮(单选按钮)的状态
　　defaultChecked 复选框或选项按钮(单选按钮)的缺省状态
　　length 一组单选按钮中的按钮数
　　name 对象的名字(NAME=特性)
　　value VALUE=特性
　　方法
　　click 模拟鼠标单击按钮
　　事件处理程序
　　onclick 点击

　　B.25 reset 对象
　　它是form对象的一个属性,复位按钮(<INPUT TYPE=”RESET”>)。
　　属性
　　name 对象的名字(NAME=特性)
　　value VALUE=特性
　　方法
　　click 模拟鼠标单击按钮
　　事件处理程序
　　onclick 点击

　　B.26 select对象
　　它是form对象的一个属性,选择框(<SELECT>)。
　　属性
　　length 选项列表中的选项数(<OPTIONS>)
　　name 选项列表的名字(NAME特性)
　　options 列表中的选项数
　　selectedlndex 选项列表中已选中的<OPTION>的索引(位置)
　　text 选项列表中(OPTION)标记之后的文本
　　value 选项列表中的VALUE=特性
　　方法
　　blur 把焦点从选项列表中移走
　　focus 把焦点移到选项列表中
　　事件处理程序
　　Onblur 失去焦点时事件
　　onchange 更改
　　Onfocus 聚焦事件

　　B.27 string对象
　　它不是另一个对象的属性,而是一个内置对象,即一串字符字符串输入脚本中时必须位于引号内。
　　属性
　　length 字符串中的字符个数
　　方法
　　anchor() 用来把字符串转换到HTML锚点标记内(<A NAME=>)
　　big() 把字符串中的文本变成大字体(<BIG>)
　　blink() 把字符串中的文本变成闪烁字体(<BLINK>)
　　bold() 把字符串中的文本变成黑字体(<B>)
　　charAt() 寻找字符串中指定位置的一个字符
　　fixed() 把字符串中的文本变成固定间距字体(<TT>)
　　fontcolor() 改变字符串中文本的颜色(<FONT COLOR=>)
　　fontsize() 把字符串中的文本变成指定大小(<FONTSIZE=>)
　　indexOf() 用来搜索字符串中的某个特殊字符,并返回该字符的索引位置
　　italics() 把字符串中的文本变成斜字体(<I>)
　　lastlndexOf() 与indexof相似,但是向后搜索最后一个出现的字符
　　link() 用来把字符串转换到HTML链接标记中(<A HREF=>)
　　small() 把字符串中的文本变成小字体(<SMALL>)
　　strike() 把字符串中的文本变成划掉字体(<STRIKE>)
　　sub() 把字符串中的文本变成下标(subscript)字体((SUB>)
　　substring() 返回字符串里指定位置间的一部分字符串
　　sup() 把字符串中的文本变成上标(superscript)字体(<SUP>)
　　toLowerCase() 把字符串中的文本变成小写
　　toUpperCase() 把字符串中的文本变成大写

　　B.28 submit对象
　　它是form对象的一个属性,窗体中的一个提交按钮(<INPUT TYPE=”SUBMIT”>)。
　　属性
　　name 对象的名字(NAME=特性)
　　value VALUE=特性
　　方法
　　click 模拟鼠标单击按钮
　　事件处理程序
　　Onclick 点击

　　B.29 text对象
　　它是form对象的一个属性,宙体中的一个文本域(<INPUT TYPE=”TEXT”>)。
　　属性
　　defaultValue text对象的缺省值(VALUE=特性)
　　name 该对象的名字(NAME=特性)
　　Value 该域具有的当前值,最初与VALUE=特性(defaultValue)相同但是,如果脚本修改了该域中的值,则该值将改变
　　方法
　　blur 把焦点从文本框移开
　　focus 把焦点移到文本框
　　select 选择输入区域
　　事件处理程序
　　Onblur 失去焦点事件
　　Onchange 更改
　　Onfocus 聚焦事件
　　Onselect 选取事件

　　B.30 textarea对象
　　它是form对象的一个属性,宙体中的一个文本区域(<TEXTAREA>)。
　　属性
　　defaultValue textarea对象的缺省值(VALUE=特性)
　　name 该对象的名字(NAME=特性)
　　value 该域具有的当前值,最初与VALUE=特性(defaultValue)相同,但是,如果脚本修改了该域中的值,则该值将改变了。
　　方法
　　blur 把焦点从文本区移开
　　focus 把焦点移到文本区
　　select 选择输入区域事件处理程序
　　事件处理程序
　　Onblur 失去焦点事件
　　Onchange 更改
　　Onfocus 聚焦事件
　　Onselect 选取事件

　　B.31 window对象
　　它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口。
　　属性
　　defaultStatus 缺省的状态条消息
　　document 当前显示的文档(该属性本身也是一个对象)
　　frame 窗口里的一个框架((FRAME>)(该属性本身也是一个对象)
　　frames array 列举窗口的框架对象的数组,按照这些对象在文档中出现的顺序列出(该属性本身也是一个对象)
　　history 窗口的历史列表(该属性本身也是一个对象)
　　length 窗口内的框架数
　　location 窗口所显示文档的完整(绝对)URL(该属性本身也是一个对象)不要把它与如document.location混淆,后者是当前显示文档的URL。用户可以改变window.location(用另一个文档取代当前文档),但却不能改变document.location(因为这是当前显示文档的位置)
　　name 窗口打开时,赋予该窗口的名字
　　opener 代表使用window.open打开当前窗口的脚本所在的窗口(这是Netscape Navigator 3.0beta 3所引入的一个新属性)
　　parent 包含当前框架的窗口的同义词。frame和window对象的一个属性
　　self 当前窗口或框架的同义词
　　status 状态条中的消息
　　top 包含当前框架的最顶层浏览器窗口的同义词
　　window 当前窗口或框架的同义词,与self相同
　　方法
　　alert() 打开一个Alert消息框
　　clearTimeout() 用来终止setTimeout方法的工作
　　close() 关闭窗口
　　confirm() 打开一个Confirm消息框,用户可以选择OK或Cancel,如果用户单击OK,该方法返回true,单击Cancel返回false
　　blur() 把焦点从指定窗口移开(这是Netscape Navigator 3.0 beta 3引入的新方法)
　　focus() 把指定的窗口带到前台(另一个新方法)
　　open() 打开一个新窗口
　　prompt() 打开一个Prompt对话框,用户可向该框键入文本,并把键入的文本返回到脚本
　　setTimeout() 等待一段指定的毫秒数时间,然后运行指令事件处理程序
　　事件处理程序
　　Onload() 页面载入时触发
　　Onunload() 页面关闭时触发