少年不在: Ajax

显示具有 Ajax 标签的文章。显示所有文章

2008-05-30

Google AJAX Libraries API 发布

Google 最近发布了 AJAX Libraries API。简单说就是 Google 把一些非常流行的 JavaScript 框架放到 Google 的服务器上。这样大家来说可以充分利用 Google 的服务器资源，节省自己的网络带宽，更重要的是 Google 对这些框架进行了压缩，所以在使用 JavaScript 框架的时候速度方面有很大的提高。
目前 Google 已经包含了以下的 JavaScript 框架:# jQuery# prototype# script.aculo.us# MooTools# dojo 目前可以有两种调用这些 JavaScript 框架的方法：

第一种，传统的 JavaScript 调用方法：
《script src = "http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"》《/script》 
第二种通过 Google AJAX API Loader 的 google.load() 方法。
《script src="http://www.google.com/jsapi"》《/script》 《script》  // Load jQuery   google.load("jquery", "1"); 《/script》

更多详细介绍请看 AJAX Libraries API 网站。

2007-10-05

给Ajax技术初学者的一些建议

Yu Sueng你好：

我推荐你先看一下《Ajax实战》，然后再看看《征服Ajax--Dojo、Prototype、script.aculo.us框架解析与实例》。这两本书的内容我感觉都不错。

Ajax的核心内容是XMLHttpRequest对象，只要掌握了这个对象的使用方法，就可以做一些简单的Ajax开发了。《Ajax实战》的内容非常丰富，不需要一次性全部看完，看到第3章，就可以开始看第二本书了。除了一些比较简单的应用，一般做Ajax开发不会直接使用XMLHttpRequest对象，而是使用某种组件库对这个对象所做的封装，这样开发效率和跨浏览器的兼容性都有保障。第二本书就是介绍目前最常用的几种开源的Ajax组件库的。做了一些开发，对于Ajax开发有了一些经验后，再回过头来仔细看一看《Ajax实战》的第4章和第5章，这两章是《Ajax实战》这本书中最核心的内容，也是最重要的内容。另外《Ajax实战》中的附录B，对于传统的面向对象语言（C++/Java/C#）的开发者充分理解JavaScript语言非常有帮助，建议你也仔细看看。《Ajax实战》后半部分每一章都是一个非常棒的例子，这些例子可以慢慢看，不必很着急。

这两本书读完了，你就可以确信自己已经是一个完全合格的Ajax开发者了。

《Ajax模式与最佳实践》这本书最好留到最后再看，因为这本书的内容是最深的，普通的读者可能一时无法充分理解。这本书其实是一本非常棒的REST风格架构设计的教科书。要理解这本书的内容，你需要先理解什么是REST。REST的设计思想出自HTTP协议的设计者Roy Thomas Fielding先生在2000年所写的博士论文。实际上在这篇论文写作完成之前很多年，Fielding先生已经在使用REST设计思想来指导HTTP、URI等Web架构的核心协议的设计了，说REST设计思想规划了现代Web架构的蓝图是不过分的。这篇论文是对Fielding先生及其在W3C和IETF的同事的多年工作经验的总结。我们正在翻译这篇论文，你应该在一个月后就能看到全文。建议你最好先读一下这篇论文后再去阅读《Ajax模式与最佳实践》。

在5月份，还将会推出一本《Ajax设计模式》。这本书的内容也是非常棒的，它是对于Ajax技术成型之后两年来所取得的成果的一个全景式的展示，充分展示了Ajax技术能够做的各种各样的事情，可以称得上是一本Ajax技术的百科全书。这本书荣获了著名的Linux Journal杂志的编辑选择奖。它可以放在《Ajax模式与最佳实践》之前阅读。

Ajax技术代表着一种新型Web应用的开发方式，Ajax开启了这个大门，其他各种RIA技术（WPF/Siverlight、Apollo/Flex、etc）追随而来，它们形成一股合力，必然会将Web开发和用户的体验推向一个前所未有的高度。

最后，希望你也能够像我一样，从学习Ajax技术的过程中享受到巨大的乐趣！

Have fun!
dlee

From http://www.javaeye.com/topic/78360

JAX与RIA技术之我见

From http://www.javaeye.com/topic/107357

DHH于6月底曾经发表过一篇文章，名为《我就喜欢HTML/CSS/JavaScript，那又怎么样！》，大意是说，目前热炒的RIA技术并不能够取代AJAX技术，而事实上我们还没有发挥出HTML的全部潜力，我本人很享受HTML/CSS/JS给给我的开发体验云云。

我比较赞成DHH的观点，从另外一些角度谈谈我对RIA技术，主要是Flex的看法。

我在2004年曾经指导一个企业应用系统的开发，这个系统提出了比较高的实时反馈和交互式要求。由于同时有两个flash高手加盟，我们决定采取基于flash的RIA技术：

对于交互要求非常高的部分使用flash开发，flash通过AMF协议和服务器端通讯，服务器端使用了OpenAMF这个开源框架，可以解析AMF请求，转化为对Spring bean的调用，这个架构是一个标准的分布式系统调用：

flash <-----AMF-----> OpenAMF网关 <--> Spring Ioc

和现在很多人普遍采用的AJAX DWR框架是一个道理：

IE <-----XHR-----> DWR <--> Spring Ioc

客户端的flash是先用Flash IDE画好界面元素，保存为fla文件，然后程序员使用ActionScript编写代码，和服务器端进行交互。这是一个标准的基于Flash的RIA方案，但是项目最终放弃了Flash RIA。

时至今日，REST+Flex又被作为一个非常热门的方案被提出来了，那么REST+Flex比2004年我们采用的AMF+Flash方案有什么区别呢？

一、服务器端和客户端交换数据的方式不同

1、AMF+Flash采用的是标准的RPC方式，这种方式的被广泛的使用在EJB，XML-RPC，DWR等等，这种方式的缺点这里不赘述了，JavaEye以前有大量的讨论

2、REST+Flex采用的是REST方法，这种方式是现在非常热门的轻量级分布式系统解决方案之一，优点也不赘述了，JavaEye也有大量讨论

二、客户端描述界面的方式不同

1、AMF+Flash采用标准的Flash IDE来画界面，保存为fla后缀的二进制文件，界面文件不可直接用文本编辑器编辑，一般程序员很难使用。

2、REST+Flex采用Flex Builder来画界面，或者用文本编辑器手工编写MXML，这是一种带有namespace的XML的文件，程序员比较容易使用。

通过比较我们可以发现，REST+Flex的方案已经前进了一大步，但是我还没有提到为什么2004年那个Flash RIA方案会失败，为什么呢？失败的最重大的原因在于开发成本！

你会说，我们用AJAX开发成本也很高阿，HTML/CSS/JS跨浏览器兼容性的成本非常高。Flash不用考虑跨浏览器，界面还可以用IDE直接画，AS代码和MXML界面彻底分离，多棒的MVC，开发效率怎么想都比AJAX低很多。不错，Flash没有跨浏览器开发成本，但是Flash有一个巨大的和网页交互的成本。

这又牵扯出来一个更深层次的问题：互联网传播的主要载体是什么？文本？图片？视频？还是其他的什么？

HTML的诞生是适应于互联网大量文本内容的传播的，只要你的web应用还是以文本为主，就必须以HTML为主，这一点无法改变。那么就意味着你的Flash RIA必须要大量的和HTML页面进行交互。(也有一些纯网络游戏或者休闲游戏网站是纯flash的，几乎没有HTML，但这不是我们讨论之列)

所以问题就在于Flash和网页的大量交互，但很遗憾的是Flash操纵网页DOM的能力很弱，与传统的JavaScript无法相提并论！所以你会遇到各种意想不到的问题，而这些问题原本用JavaScript却是很简单的事情，例如驱动网页导航，刷新，打开关闭窗口，DIV隐藏显示等等，开发成本就是这么不知不觉升上来的。最终你会发现Flash的开发成本太高！

其实这不能怪Flash，根源在于：你开发的web应用最终还是一个基于文本形式的，所以你就无法使用纯Flash应用(Flash对于文本支持能力又很弱)，必须大量依赖HTML；而要大量操纵HTML，最趁手的工具就是JavaScript，而Flash就是一个很蹩脚的工具，无论它的多媒体表现能力多么强大。

SilverLight能改变这一点吗？不能！Microsoft发明XMLHTTP绝对是天才的创意，XMLHTTP之所以成功根本原因在于它和HTML的良好交互性，而且使用JS操纵。SilverLight只是Flash的一个模仿品，却完全没有看到Flash的局限性在哪里？所以SilverLight完全继承了Flash的致命缺点。这也只能说明SilverLight是Microsoft商业竞争的一种手段，而不是本着创新精神去做的东西。

现在开发AJAX的确有其痛苦之处，跨浏览器兼容性是最让人头疼的。但是我们应该清楚，只要web应该是基于文本形式这一点不改变，那么HTML/JS的地位就不会改变，那么AJAX无论如果都是web开发之首选技术。

2006-07-29

使用js改变iframe的src地址

2006-07-17

HTML在线编辑器的调用方法

from 51js
HTML在线编辑器不需要懂得使用Dreamweaver，会用Word就会使用此编辑器，在文章系统或者是新闻系统需要文字编辑的web程序中非常实用。
但是如何将html编辑器嵌入到web页中和怎么取得里面的数据呢？！
首先我们假定我们所要调用得HTML在线编辑器放在一个单独得页面中，文件名是gledit.htm上传图片的前台页面：http://www.jfinfo.com/room/admin/img_upload.asp。
HTML在线编辑器有两种基本调用方法
一、使用object调用(http://www.jfinfo.com/room/admin/editor.asp):
1、怎么在web页中嵌入html编辑器：我们在需要嵌入得位置加入以下html代码：<object id=doc_html data="gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
其中object标签里面得data后面接得数据就是我们所要调用得在线编辑器页得路径，id就是我们调用object得id，后面取编辑器中得数据时就要用到这个id。Width和height就是编辑器得高度和宽度了。
2、怎么取得html编辑器中的数据：所有需要提交的内容我们都是放在一个表单里面，同样利用object调用的编辑器也放在这个表单里面，同时我们可以设置一个隐藏的文本区域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content">)用以在提交的时候临时保存html在线编辑器的数据，因为在asp或者jsp，php中不能直接获取表单中的object的内容，所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下：
<script language="javascript">
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method="post" action="add_news_save.asp" onsubmit="CheckForm()" name="form1">
<object id=doc_html name= doc_html style="LEFT: 0px; TOP: 0px" data=" gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
<input type="hidden" name="content" >
</form>
这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中：首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口，我们利用自己写的程序来实现上传本机图片到服务器上，然后我们需要记录图片的路径，然后通过html在线编辑器的值中加入显示图片的html标签。详细说明及代码如下：
在编辑器中我们在插入图片的按钮上加入事件onclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在'img_upload.asp'中我们将提交的图片上传到服务器制定目录然后记录图片路径
<script language=javascript>
var src='<%="upload/"&newname%>';
opener.form1. doc_html.value +="<img border=0 src="+src+">";
window.close();
</script>
这样就实现了简单的将上传的图片插入到编辑器中。
4、怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据：当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容，例如<TEXTAREA style="display:none" NAME="content" ROWS="20" COLS="70"><%= rs("Content")%></TEXTAREA>，要注意这里我们用隐藏的textarea而不能用隐藏的input，因为数据里面可能包含了回车换行，所以如果我们使用<INPUT TYPE="hidden" name=content value="<%=(rs("Content")%>">很可能因为<%=(rs("Content")%>有换行而出现HTML错误（value=后面接的数据必须保证是在一行，否则出错）。然后按照前面介绍的方法使用object调用HTML在线编辑器，方法和代码同上，现在我们要做的其实就是提交时候的逆过程，我们只要将隐藏文本区域的内容复制到HTML在线编辑器就可以了，在这里我们在body里面加上<body onload="document.form1. doc_html.value=document.form1.content.value">，这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了，提交过程和上面介绍的一样，在此就不赘述了。

二、使用iframe调用（http://qxd.5599.net/by/source/article/manage/gledit.htm ）
1、怎么在web页中嵌入：我们在需要嵌入得位置加入以下html代码：<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%"></IFRAME>其中"src="后面接得数据就是我们所要调用得在线编辑器页得路径，id就是我们调用IFRAME得id，Width和height就是编辑器得高度和宽度了。
2、怎么取得html编辑器中的数据：同样所有需要提交的内容我们都是放在一个表单里面，同时我们可以设置一个隐藏的文本区域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content">)用以在提交的时候临时保存html在线编辑器的数据，我们借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下：
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}
</SCRIPT>
<FORM METHOD=POST ACTION="Article_add_save.gl" name="form1" onsubmit=" subchk()">
<input type="hidden" name="content" >
<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%"></IFRAME>
</FORM>
在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
2、怎么取得html编辑器中的数据：所有需要提交的内容我们都是放在一个表单里面，同样利用object调用的编辑器也放在这个表单里面，同时我们可以设置一个隐藏的文本区域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content">)用以在提交的时候临时保存html在线编辑器的数据，因为在asp或者jsp，php中不能直接获取表单中的object的内容，所以我们必须借助隐藏文本区域来获取数据。我们在表单提交的同时将object里面的内容复制到隐藏的文本区域中。详细代码如下：
<script language="javascript">
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method="post" action="add_news_save.asp" onsubmit="CheckForm()" name="form1">
<object id=doc_html name= doc_html style="LEFT: 0px; TOP: 0px" data=" gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
<input type="hidden" name="content" >
</form>
这样在后台处理的页面中我们就可以直接通过取隐藏区域content的数据来获取html在线编辑器的数据。
3、怎么在文本编辑器中加入上传本机图片到html在线编辑器中：首先我们使得在点击插入图片的按钮时弹出一个上传图片的窗口，我们利用自己写的程序来实现上传本机图片到服务器上，然后我们需要记录图片的路径，然后通过在调用html在线编辑器的web页中写一个函数在光标的位置插入显示图片的html标签。详细说明及代码如下：
在编辑器中我们在插入图片的按钮上加入事件onclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在调用编辑器的页面中我们定义好插入html代码到编辑器的函数
<script language=javascript>
function insertHtml(HtmlCode)
{
var win=window.content_html.idEditbox.document;//其中编辑区域是gledit.htm中的一个iframe，id是idEditbox
window.content_html.idEditbox.focus();//是编辑器获得焦点，防止代码插入在编辑器外地方
win.selection.createRange().pasteHTML(HtmlCode)//在光标的位置插入html代码
}
</script>
在处理上传图片的文件中，我们调用父窗口的函数插入html代码
<script language=javascript>
var src='<%=" upload/"&newname%>';
var htmlcodes;
htmlcodes = "<img src='"+src+"' alt='<%=theForm("alt")%>' align='<%=theForm("align")%>' border='<%=theForm("border")%>' hspace='<%=theForm("hspace")%>' vspace='<%=theForm("vspace")%>'>";
opener.insertHtml(htmlcodes)
window.close();
</script>
这样就实现了简单的将上传的图片插入到编辑器中。
4、怎么在编辑修改文章的时候调用HTML在线编辑器来修改数据：当我们把在添加的时候将HTML在线编辑器来修改数据提交到数据库后我们还需要能将数据库的内容用HTML在线编辑器来修改数据。首先我们在表单中加入一个隐藏区域来放置数据库中的内容，例如<TEXTAREA style="display:none" NAME="content" ROWS="20" COLS="70"><%= rs("Content")%></TEXTAREA>，在这里我们在调用编辑器的页面中的body标签里面加上<BODY onload="insertHtml(document.form1.content.value)">其中inserthtml()就是我们定义好插入html代码到编辑器的函数（具体参考插入图片的代码）。这样在页面装载完的时候就可以将数据库中的内容放入HTML在线编辑器中编辑了，提交过程和上面介绍的一样，在此就不赘述了。

这里只是简单的向大家介绍了一下如何来调用html在线编辑器，具体代码并未一一列出，整理过程中，如果大家对文章中的内容有任何问题和建议请和我联系。

第一次写技术性文章，很乱！后来也懒得整理，不过也许对部分人还有点用
介绍了一下html在线编辑器的调用方法
重点是解决了直接上传本地图片到服务器并插入到html编辑器中，以及在编辑文章的时候调用html编辑器进行编辑

当时解决图片上传到服务器的方案不是非常科学--每插入一次本地图片即上传一次到服务器，无形中给服务器产生了很多垃圾图片
后来采用插入图片同时动态产生 <input type=file>的方法，在提交的同时一次性处理所有"需要"上传的图片，且和文章一起生成指定命名的文件和图片目录
如文章是artile321.htm，则对应的图片的文件夹就在artile321.files内，删除文章的时候就可以同时删除对应的图片文件夹。
同时对于粘贴上去的图片，也可以根据*.alll.tags("img")来提取所有来自其他网站的地址，并且可以通过xmlhttp来下载到服务器上，这样就可以避免可能无法访问

对于上面介绍的关于html编辑器调用的一些改进一直没时间整理一下写出来，最近比较忙：（
有问题可以一起探讨探讨
文章中的一个bug ：

function HtmlLoad(HtmlCode)
{
var win=window.content_html.idEditbox.document.body;
win.innerHTML=HtmlCode
}
<BODY onload="HtmlLoad(document.all.CONTENT.value)">

强烈建议大家将内容装载到iframe得时候使用这个函数
否则会出现ie不兼容得问题

由浅到深了解JavaScript类

from 51js
最近在无忧脚本混了一阵子，回复了一些贴子，自己却没有做出什么东东让大家看看，心里有些不安，于是写了下边的一点东西，本来应该发在类封装区的，考虑到那里比较冷，而这篇文章我希望能够帮助到更多的朋友，因此放到这里来了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类是什么？

许多刚接触编程的朋友都可能理解不了类，其实类是对我们这个现实世界的模拟，把它说成"类别"或者"类型"可能会更容易理解一些。比如"人"这种动物就是一个类，而具体某一个人就是"人"这个类的一个实例，"人"可以有许多实例（地球人超过六十亿了），但"人"这个类只有一个。你或许会说那男人和女人不也是人么？怎么只能有一个？其实这里要谈到一个继承的东西，后边才讲，请继续看下去。

如何建立一个类？
在C++中是以class来声明一个类的，JavaScript与C++不同，它使用了与函数一样的function来声明，这就让许多学Jscript的朋友把类与函数混在一起了，在Jscript中函数与类确实有些混，但使用久了自然而然会理解，这篇文章是针对想进攻面向对象编程的朋友而写，就不打算一下子讨论得太深了。
请看下边这个类的定义：

function WuYouUser()
{
this.Name; //名字
}

上边的代码定义了一个WuYouUser（无忧用户）类，它有个属性：Name（名字）。Name就是WuYouUser类的一个属性。
一个类有固定的属性，但类的实例却有不同的属性值，就像我是属于"人"这个类的，性别是男，而我有一个女同学，她也属于"人"类，但她的性别属性值却为女。
那么如何声明某个类的一个实例呢？非常简单：

var Wo = new WuYouUser(); //实例一："我"
var Biyuan = new WuYouUser(); //实例二："碧原"（Biyuan哥，不好意思。。。嘿嘿）

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类的属性

这个Wo（我）就是WuYouUser类的一个实例，它拥有WuYouUser给它的一切：Name属性、Sex属性以及Age属性，我们可以这样子来设置它的属性：

Wo.Name = "泣红亭";

很简单是不是？试着运行

window.document.write(Wo.Name);

看看，是不是输出了我的名字：泣红亭？

同样设置一下碧原兄的属性

Biyuan.Name = "碧原";

运行

window.document.write(Biyuan.Name);

可以看到输出了"碧原"，也就说明了Biyuan与Wo同样是WuYouUser类的实例，但却是不同的实体，具有不同的属性值。

属性是可以设置默认值的，无忧里都有记录大家各自发了多少贴子，我们也同样给WuYouUser类添加一个发贴数量的属性ArticleCount

function WuYouUser()
{
this.Name;
this.ArticleCount = 0;
}

一个无忧新用户刚注册完之后他的发贴数量为0，在上边的代码中可以看到直接给属性ArticleCount设置值为0。

可以运行一下这样的代码：

var Wo = new WuYouUser();
window.document.write(Wo.ArticleCount);

可以看到输出了0，说明ArticleCount属性被我们成功设置默认值为0

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类的方法

方法这个词不大好理解，我觉得说成行为会更容易理解。一个人具有许多共同的行为，比如睡觉、吃饭、走路等等，现在我们给WuYouUser类添加一个发贴的方法。

function WuYouUser()
{
this.Name;
this.ArticleCount = 0;

this.NewArticle = function()
{
/*
*
* 具体如何发贴我们大家都知道，不就是打打字，加加图片再按一下保存之类的按钮么？
* 关于具体如何发贴的代码没有必要在这里写出来，我们要了解的仅仅是方法的定义与使用
* 我们在这里实现一个最简单的功能，也是很重要的功能：给我们的发贴数量加上1！
* 注意：恐龙等级就是这样加出来的，因此呀……大家狂发贴吧。。。
*/

this.ArticleCount++;
}
}

既然定义好了这个方法，我们来试试效果如何：

var Wo = new WuYouUser();
Wo.NewArticle();
document.write(Wo.ArticleCount);

可以看到输出了1，说明我们发贴成功了！真是有历史纪念意义的一刻，离恐龙等级又近一步了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
静态属性

静态属性又称公共属性，它不属于某个类的实例，而是直接属于某个类。

比如说无忧用户有一个属性：注册用户的数量，它是属于整个无忧用户的，而不是属于泣红亭或者谁的
静态属性的声明方法是：

类名.prototype.属性名 = 属性值;

比如给WuYouUser类定义一个注册用户的数量Count：

WuYouUser.prototype.Count = 0;

那么如何读取它呢？有两种方法：

1. 直接用 WuYouUser.prototype.Count
2. 使用Wo.Count

这两者没有区别，都是得到0

虽然读取方法可以有两种，但在改变它的时候却得特别小心了，请看下边代码

var Biyuan = new WuYouUser();
WuYouUser.prototype.Count++;
document.write(Wo.Count);
document.write(Biyuan.Count);

你会发现两者的Count属性都是1，也就是说WuYouUser.prototype.Count改变了会影响到各个实例的相应属性，其实原理就是Wo、Biyuan的Count属性与WuYouUser.prototype.Count根本就是同一个！

现在来看另外一段代码：

var Biyuan = new WuYouUser();

Biyuan.Count++; //特别注意一下这里，这是直接改变Biyuan的Count属性
document.write(Biyuan.Count); // 输出 1
document.write(WuYouUser.prototype.Count); //输出 0
document.write(Wo.Count); //同样输出0，为什么？

可以看到如果直接修改实例的静态属性值，那么会出现其它实例甚至类的静态属性与它不同步了？这是因为直接修改的时候，该实例会生成一个属于该实例的属性Count，这个时候Biyuan.Count不再与WuYouUser.prototype.Count是同一个了，也不与Wo.Count是同一个，这个Count属性是属于Biyuan自己所有的，以后改变了它也只是影响它自己而已。

因此如果不是特别的需要，建议不管在读取还是赋值的时候，都统一使用WuYouUser.prototype.Count这样的方式，以做到万无一失！

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
静态方法

与静态属性相似，它也有个另称：公共方法，同样属于类本身的。

静态方法的定义方式是：

类名.方法名 = function(参数1,参数2...参数n)
{
//方法代码
}

我们现在就来定义一个无忧用户类的注册新用户静态方法：

WuYouUser.prototype.AddOne = function()
{
//*** 同样具体代码不写出来，给静态属性Count增加1，表示注册用户数量又多一个
WuYouUser.prototype.Count++;
}

现在我们来看看如何用它，同样有两种方法：

1.直接使用WuYouUser.prototype.AddOne()
2.使用某实例的AddOne()

这两种方法没有什么不同：

var Wo = new WuYouUser();
var Biyuan = new WuYouUser();
document.write(WuYouUser.prototype.Count); // 0

Wo.AddOne();
document.write(WuYouUser.prototype.Count); // 1
document.write(Wo.Count); // 1
document.write(Biyuan.Count); // 1

WuYouUser.prototype.AddOne();
document.write(WuYouUser.prototype.Count); // 2
document.write(Wo.Count); // 2
document.write(Biyuan.Count); // 2

可以看出不管是使用Wo.AddOne()还是WuYouUser.prototype.AddOne()效果都是一样的，都是给WuYouUser.prototype.Count加上1

现在再看一段代码：
function NewClass() //由于上边的WuYouUser类不合适当这个例子的代码，我声明了一个新类NewClass
{
this.Name = "泣红亭"; //这里默认值为我的名字
}

NewClass.prototype.ChangeName = function(NewName)
{
this.Name = NewName;
}

var Wo = new NewClass();
Wo.ChangeName("郑运涛"); //我的真名

可以看到Wo.Name确实已经变成了"郑运涛"，这个方法似乎是可以用的，但里边是不是内有天机呢？
再看下边的代码，类的定义以及ChangeName的定义我们照样，但改变一下下边的代码：

NewClass.prototype.ChangeName("郑运涛");
document.write(NewClass.Name); //undefined，即未定义
document.write(NewClass.prototype.Name); //郑运涛
var Wo = new NewClass();
document.write(Wo.Name); //泣红亭

可以看到我们并没有定义NewClass.prototype.Name这个静态属性，但编译器给我们自己加了一个。
可是再看下边输出Wo.Name，它并不是为"郑运涛"，而是原来的默认值"泣红亭"，说明了什么？
其实很简单，看一下NewClass的定义里已经有Name这个属性，因此Wo也有自己的Name属性，它跟NewClass.prototype.Name并不是同一个的，因此就还是那样子。

那为什么前一个例子运行了Wo.ChangeName("郑运涛")却能够实现改变Wo.Name属性呢？其实在这里跟改变Wo.Count的值是同一个道理，编译器自动给Wo增加了一个方法ChangeName，这个方法代码与NewClass.prototype.ChangeName一样，但Wo.ChangeName是Wo这个实例所特有的，而非NewClass.prototype.ChangeName！

分析可知道在静态方法里尽量不要使用this这样的关键字来引用实例本身的属性，除非你有特别的目的，而且能够清楚地明白这里边的运行机制！

如果真的需要在静态方法里使用this，可以直接把this当作参数传进去：

NewClass.ChangeName = function(This,NewName) //注意这里是This,不是this
{
This.Name = NewName;
}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
构造函数

一个类在初始化的时候其实也是一个函数的执行过程，这个函数就是构造函数，我们看一下下边的代码：

function WuYouUser()
{
this.Name = "泣红亭"; //默认定义为泣红亭
alert(this.Name);
}
var Wo = new WuYouUser();//可以看到出现一个窗口显示泣红亭三个字

可以看出类的定义不仅仅是定义了它的属性与方法，还同时可以加入一些代码，而这些代码就是该类的构造函数的代码，在实例声明过程中被执行！
其实说起来，类的属性与类的方法都是在构造函数里执行定义的，看下边的代码：

function WuYouUser()
{
this.Name = "泣红亭";
return;
this.Sex = "男";
}
var Wo = new WuYouUser();
document.write(Wo.Name); //泣红亭
document.write(Wo.Sex); //undefined，即未定义

看得出什么？Sex属性是在return;之后的，而WuYouUser类的构造函数遇到return即停止运行，换句话说this.Sex = "男";这一行是没有被执行，即Sex属性根本没有被定义！

构造函数可以有参数，参数值在声明实例的时候被传入：
function WuYouUser(Name)
{
this.Name = Name;
}
var Wo = new WuYouUser("泣红亭");
document.write(Wo.Name); //泣红亭

构造函数不需要返回值，但如果你设置了返回值，可以把它当成一个函数来使用。
function Sum(a, b)
{
this.a = a;
this.b = b;
return this.a + this.b;
}
document.write(Sum(12, 23)); //输出的是12与23的和35
var Obj = new Sum(12,23);
document.write(Obj.a) // 12
document.write(Obj.b) // 23

感觉挺奇妙，对吧？我写这文章写着写着也觉得挺奇妙的，呵呵！

但强烈建议不要把一个类当成一个函数来使用！如果你需要的是一个函数，请直接写成函数而不要写成类，以免搞混了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
继承

继承这个词在面向对象的编程里是非常重要的，虽然JavaScript并不是真正面向对象的语言，而是跟VB一样是基于对象的语言，它同样提供了继承机制。

文章开头时谈到了男人与女人，这也同样是两个不同的类，但却具有相同的一些属性以及方法，而这些相同的特性是来自"人"这个类的，换句话说男人与女人继承了"人"的所有特性！但是男人与女人却有其不同的地方，编程语言里的继承也一样，一个类A继承了另一个类B，那么类B就是类A的父类，类A就是类B的派生类，也称为子类。比如男人就是人的派生类，而人就是男人的父类。最高一级的类称为基类，想象一下就可以明白，男人继承自人，男孩继承自男人，人就是男孩的基类，男人就是男孩的父类。

>>>>>>>>>>>>>>>>>>>>
题外：多重继承

这里再涉及一个多重继承的话题，但如果你仅仅是学JavaScript的话就没有必要看下去，因为JavaScript不提供多重继承，准确一点说没有一种简单而标准的方法来实现多重继承（其实是有办法实现的，只不过麻烦了一点，而且确实没有必要）。

在C++中是有多重继承的概念的，这里是讨论JavaScript，因此不打算讲，只是说说它的一点点思想以供参考。

在上边男孩的继承问题中，男孩其实不仅仅是继承自男人，还继承自孩子（有男孩子，也有女孩子）这个类，因此，它同时继承了两个类：男人与男孩，这就是所谓的多重继承。

好，这个问题打住，我们还是回归主题。
>>>>>>>>>>>>>>>>>>>>

先看第一个类的定义：

function A()
{
this.Name = "泣红亭";
alert(this.Name);
}

这个类定义了一个属性Name，默认值为"泣红亭"

现在看第二个类的定义：

function B()
{
this.Sex = "男";
alert(this.Sex);
}

定义了一个属性Sex,默认值为"男"

继承的方式就是子类.prototype = new 父类();
现在我们来让B类继承A类：

B.prototype = new A();

运行这一段代码：

var Obj = new B(); //首先打开警告窗口显示"泣红亭",再显示"男"

可以从上边的结果看出B类继承了A类，拥有了A类的属性Name，并且执行了A类的构造函数，而且A类的构造函数在B类的构造函数执行之前执行。因此我们利用这个可以实现重写父类的方法以及重设置父类某属性的默认值：

function A()
{
this.Name = "泣红亭";
this.Show = function()
{
alert("这是A类的Show方法");
}
alert(this.Name);
}

function B()
{
this.Name = "郑运涛";
this.Show = function()
{
alert("这是B类的Show方法");
}
alert(this.Name);
}

var Obj = new B();
Obj.Show();

结果出现了三次警告窗口，第一个内容为泣红亭,是执行A类的构造函数里的alert(this.Name)，那时候Name属性值还为"泣红亭",因为B类的构造函数还没执行，第二次内容为"郑运涛",这是B类里的alert(this.Name)，因为B类的构造函数里给Name重赋值为"郑运涛"。最后是调用了Obj.Show()，执行了不是A类的Show方法里的Show（显示"这是A类的Show方法"），而是执行了B类的Show（显示"这是B类的Show方法"），很明显Show方法被重写了。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
类作为一个对象时的属性与方法（不知道如何简洁地表达，因此用了这么长的题目）

不知道在这里谈这个话题是否有点混人耳目，但又觉得不谈这篇文章就不算完整，因为文章目的就是要让人搞清楚类的方方面面。

看了这一小节的题目，或许你会觉得奇怪，类就是类，怎么会"作为一个对象"呢？在JavaScript里，一切都是对象，包括类！对象可以有属性，可以有方法，类也同样可以有，但这个非常容易跟前边说到的静态属性与静态方法搞混了，因此要仔细看清楚两者的分别！

定义一个类：
function WuYouUser()
{
this.Name = "泣红亭";
}

定义类作为一个对象时的属性：

WuYouUser.Url = "http://www.51js.com"; //静态属性的定义是：WuYouUser.prototype.Url = "http://www.51js.com";
var Wo = new WuYouUser();
document.write(WuYouUser.Url); //http://www.51js.com
document.write(Wo.Url); //undefined,即未定义！注意这里的未定义

从这里可以看出Url这个属性是WuYouUser自个所有，改变了它与其它类以及它的子类完全无关！

引用类的属性只有一个办法，就是类名.属性名，改变它也一样。

定义类作为一个对象时的方法：

WuYouUser.ChangeUrl = function()
{
this.Url = "http://51js.com";
}

你或许会觉得奇怪，这里的this是什么？因为ChangeUrl这个方法是属于对象WuYouUser的，因此this指的就是WuYouUser本身！

可以运行下边的代码试试：

document.write(WuYouUser.Url); // http://www.51js.com
WuYouUser.ChangeUrl();
document.write(WuYouUser.Url); // http://51js.com

明显ChangeUrl直接修改了WuYouUser.Url的值，因此后边才能输出http://51js.com

如果你这一节看不明白，也不要着急，编程嘛，许多东东都只能意会不能言传，而且我又没口才，说不清楚，只要以后多写写代码，多用用类自然而然会体会到这一些，还有可以去看看JSVM的代码，里边几乎每个类都有用到类作为一个对象时的属性与方法。

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
后言

首先感谢你能够有耐心看到这里，我也没想到写了这么多才能够写得像样一点，请别介意。

不管是哪种语言，只要是支持类的，类都在这种语言中占了非常重要的地位，但不是谁都能够掌握它，为了让无忧还没学过类以及对类这个东东还搞不清楚的网友能够清楚一点了解类的概念以及用法，也为了对无忧做点贡献，我写了这篇文章，希望大家能够喜欢。

我们最近常谈javascript的OO，但请大家要格外记住，javascript 不是"面向对象"的语言，最多只能说是"基于对象"。
"面向对象"和"基于对象"之间的差别，我一时很难找到简单且又准确的词汇来描述。
谈到 "面向对象"，我们首先可能会想到 c++，其次是 java，后来再就是 dot net ，（其他的偏门语言我们这里不多讨论）
其实 c++ 在贯彻 "面向对象"思想方面是不及 java 的，因为它还存在大量 "过程"型的东西。 java 放弃了多重继承，重载算子等"繁索不实用"的东西，把设计重点放在interface（接口）上，不仅简化的编程者的工作繁琐度，而且让整个框架看上去更加清晰。最重要的是 java 中所有的东西都是以类的形式存在的，没有第二种形式。至于后来dotnet 中的 c# ，看起来就像是 ms 牌子的 java.

扯远了，回到 javascript 上来
说Javascript不是面向对象不仅仅是说它没有真正意义上实现：抽象对象、继承、重载等等面向对象的功能
而是说 javascript中的"类" 并不是真正广义上"类"的概念。类原本是只是一个抽象定义，而javascript中通过"Function" 定义的类，本质上却是一个"对象"！

而且javascript的语法域并不是整个 IE 进程，而是以 Window对象为单位的。
不同Window对象下相同的Function定义，并不是同一个"类"。

比如：
a.htm 中你定义了一个 A 类 function A(){} , b.htm 中你也相同定义了这个 A 类 function A(){}

在 a.htm 中你创建了一个实例： var a = new A();
你在 b.htm 中得到了 a.htm 的句柄 winAhandle
然后你得到 a.htm 中 a 实例的引用
var a = winAhandle.a;
你会发现 a instanceof A 是 false，换成 a instanceof winAhandle.A 便是 true 了
原因很简单，b.htm 中的A 类并不等同于 a.htm 中的A类，这种"类"的语法域只限于一个相同的 Window 对象下（同一个Window对象并不仅是指同一个页面）

这显然是有悖于类是一个广义上的抽象定义这种概念了

会 VB 的人，也应该了解：VB4之后，VB.NET之前的 VB（包括VBS）中的类，也是这种情况，虽然它是通过 Class 的方式定义的。
比如你 new A 放到 session 里，下一次从 session 中取出来，便不是原先那个对象了。
其实就是因为语法域不同，前一次定义的类，并不能保留到这一次，解析器不知道他是什么东西，故不能还原了

顺便提一下 javascript 中继承方式是采用的原型（prototype）继承，详细的介绍，大家可以去找这本书看看

《Design Patterns Elements of Reusable Object Oriented Soffware》
中文版好像叫《可复用面向对象的设计模式》
一本好书！！！

javascript中没有多重继承。多重继承在面向对象中并不是必须的。虽然多重继承的重用性更好，但会导致类之间的关系过于复杂。
一般来说，一样事物，我们通常可以认为它主要是某一类事物的衍生物，单一继承就够用了，至于其他的特性，我们可以借助接口来定义。
javascript中也没有接口概念，javascript不需要接口，因为它是一门解释型的语言，不对实参的类型做预校验。作为一个参数对象，有没有某个方法，加载过程中并不去检查，直到运行时，有则调用，无则异常。不需要强制性声明继承了哪个接口才能做为参数调用。

但实际中，我们还是需要设计一些接口，主要是出于view的考虑，整个框架容易被读懂！

javascript引用对象的方法

from 51js

<a id="link1" name="link1" href="http://www.51js.com/">51js</a>

=============
同一页面内的引用方法：

1、使用id：

link1.href

2、使用name：

document.all.link1.href

3、使用sourseIndex：

document.all(4).href //注意，前面还有HTML、HEAD、TITLE和BODY，所以是4

4、使用链接集合：

document.anchors(0).href //全部的集合有all、anchors、applets、areas、attributes、behaviorUrns、bookmarks、boundElements、cells、childNodes、children、controlRange、elements、embeds、filters、forms、frames、images、imports、links、mimeTypes、options、plugins、rows、rules、scripts、styleSheets、tBodies、TextRectangle，请参考MSDN介绍。其实方法3和方法4是一样使用的集合，只是一个是all，可以包括页面所有标记，而anchors只包括链接。

5、getElementById：

document.getElementById("link1").href

6、getElementsByName：

document.getElementsByName("link1")[0].href //这也是一个集合，是所有name等于该方法所带参数的标记的集合

7、getElementsByTagName：

document.getElementsByTagName("A")[0].href //这也是一个集合，是所有标记名称等于该方法所带参数的标记的集合

8、tags集合：

document.all.tags("A")[0].href //与方法7一样是按标记名称取得一个集合

除此之外，event.scrElement可以获得触发时间的标记的引用；document.elementFromPoint(x,y)可以获得x和y坐标处的元素的引用；document.body.componentFromPoint(event.clientX,event.clientY)可以获得鼠标所在处元素的引用；还可以通过元素的父子节点和兄弟节点关系来引用，如nextSibling(当前节点的后一节点)、previousSibling(当前节点的前一节点)、childNodes、children、firstChild、lastChild、parentElement等都是父子节点和兄弟节点的一些引用；还不仅限于此。

上面是同一页面内的常见引用方法，另外还涉及到不同页面中的

=============
对于分帧的页面，可以使用parent.frames("帧的name")、top.frames("帧的name")来引用不同的帧，后面的引用和同一页面内市相同的，多重的parent也是支持的。
例如：
parent.frames("frame1").document.all.link1
top.frames("frame1").document.all.link1

=============
对于window.open()开的窗口，可以使用var newwin=window.open()，然后使用newwin来引用新窗口，后面的引用和同一页面内是相同的；新窗口可以使用window.opener来引用打开它的窗口，可以简写作opener，例如：
var newwin=window.open()
父窗口（这里是使用window.open()方法的窗口）：
newwin.document.all.link1 //父窗口这句可引用新窗口中的对象
子窗口（window.open()方法打开的窗口）：
opener.document.all.link1 //子窗口这句可引用父窗口的对象

多重opener也是支持的，例如：opener.opener.document.all.link1

方法多种多样，有时候需要根据具体的情况而定，灵活运用才可以游刃有余

window.open的例子和使用方法以及参数说明（完整版）

Js事件触发列表与解说

Js事件触发列表与解说<table border=0 cellpadding=0 cellspacing=0 width=100% bgcolor=#F5F5F5><tr><td align=center height=30>责任编辑：fuxing [<a href='http://www.wrclub.net/'>网人帝国</a>] 添加时间：2004-3-24 15:17:23 人气：37</td></tr></table> <TABLE cellSpacing=1 cellPadding=2 width=600 bgColor=#666666 border=0>
<TBODY>
<TR>
<TD align=left bgColor=#ffffff colSpan=3>一般事件</TD></TR>
<TR>
<TD align=middle bgColor=#ffffff>事件</TD>
<TD align=middle bgColor=#ffffff>浏览器支持</TD>
<TD align=middle bgColor=#ffffff>描述</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onClick</TD>
<TD noWrap bgColor=#ffffff>HTML: 2|3|3.2|4 Browser: IE3|N2|O3</TD>
<TD bgColor=#ffffff>鼠标点击事件，多用在某个对象控制的范围内的鼠标点击</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDblClick</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N4|O</TD>
<TD bgColor=#ffffff>鼠标双击事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onMouseDown</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N4|O</TD>
<TD bgColor=#ffffff>鼠标上的按钮被按下了</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onMouseUp</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N4|O</TD>
<TD bgColor=#ffffff>鼠标按下后，松开时激发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onMouseOver</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE3|N2|O3</TD>
<TD bgColor=#ffffff>当鼠标移动到某对象范围的上方时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onMouseMove</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N4|O</TD>
<TD bgColor=#ffffff>鼠标移动时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onMouseOut</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N3|O3</TD>
<TD bgColor=#ffffff>当鼠标离开某对象范围时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onKeyPress</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N4|O</TD>
<TD bgColor=#ffffff>当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onKeyDown</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N4|O</TD>
<TD bgColor=#ffffff>当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onKeyUp</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N4|O</TD>
<TD bgColor=#ffffff>当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]</TD></TR>
<TR>
<TD align=left bgColor=#ffffff colSpan=3>页面相关事件</TD></TR>
<TR>
<TD align=middle bgColor=#ffffff>事件</TD>
<TD align=middle bgColor=#ffffff>浏览器支持</TD>
<TD align=middle bgColor=#ffffff>描述</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onAbort</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N3|O</TD>
<TD bgColor=#ffffff>图片在下载时被用户中断</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onBeforeUnload</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当前页面的内容将要被改变时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onError</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N3|O</TD>
<TD bgColor=#ffffff>捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onLoad</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE3|N2|O3</TD>
<TD bgColor=#ffffff>页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onMove</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE|N4|O</TD>
<TD bgColor=#ffffff>浏览器的窗口被移动时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onResize</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N4|O</TD>
<TD bgColor=#ffffff>当浏览器的窗口大小被改变时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onScroll</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>浏览器的滚动条位置发生变化时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onStop</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onUnload</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE3|N2|O3</TD>
<TD bgColor=#ffffff>当前页面将被改变时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff colSpan=3>表单相关事件</TD></TR>
<TR>
<TD align=middle bgColor=#ffffff>事件</TD>
<TD align=middle bgColor=#ffffff>浏览器支持</TD>
<TD align=middle bgColor=#ffffff>描述</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onBlur</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE3|N2|O3</TD>
<TD bgColor=#ffffff>当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onChange</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE3|N2|O3</TD>
<TD bgColor=#ffffff>当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onFocus</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE3|N2|O3</TD>
<TD bgColor=#ffffff>当某个元素获得焦点时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onReset</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N3|O3</TD>
<TD bgColor=#ffffff>当表单中RESET的属性被激发时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onSubmit</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE3|N2|O3</TD>
<TD bgColor=#ffffff>一个表单被递交时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff colSpan=3>滚动字幕事件</TD></TR>
<TR>
<TD align=middle bgColor=#ffffff>事件</TD>
<TD align=middle bgColor=#ffffff>浏览器支持</TD>
<TD align=middle bgColor=#ffffff>描述</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onBounce</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>在Marquee内的内容移动至Marquee显示范围之外时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onFinish</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当Marquee元素完成需要显示的内容后触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onStart</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当Marquee元素开始显示内容时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff colSpan=3>编辑事件</TD></TR>
<TR>
<TD align=middle bgColor=#ffffff>事件</TD>
<TD align=middle bgColor=#ffffff>浏览器支持</TD>
<TD align=middle bgColor=#ffffff>描述</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onBeforeCopy</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onBeforeCut</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onBeforeEditFocus</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当前元素将要进入编辑状态</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onBeforePaste</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onBeforeUpdate</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当浏览者粘贴系统剪贴板中的内容时通知目标对象</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onContextMenu</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onCopy</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当页面当前的被选择内容被复制后触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onCut</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当页面当前的被选择内容被剪切时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDrag</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当某个对象被拖动时触发的事件 [活动事件]</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDragDrop</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE|N4|O</TD>
<TD bgColor=#ffffff>一个外部对象被鼠标拖进当前窗口或者帧</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDragEnd</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDragEnter</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当对象被鼠标拖动的对象进入其容器范围内时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDragLeave</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当对象被鼠标拖动的对象离开其容器范围内时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDragOver</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDragStart</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当某对象将被拖动时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDrop</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>在一个拖动过程中，释放鼠标键时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onLoseCapture</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当元素失去鼠标移动所形成的选择焦点时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onPaste</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当内容被粘贴时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onSelect</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当文本内容被选择时的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onSelectStart</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当文本内容选择将开始发生时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff colSpan=3>数据绑定</TD></TR>
<TR>
<TD align=middle bgColor=#ffffff>事件</TD>
<TD align=middle bgColor=#ffffff>浏览器支持</TD>
<TD align=middle bgColor=#ffffff>描述</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onAfterUpdate</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当数据完成由数据源到对象的传送时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onCellChange</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当数据来源发生变化时</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDataAvailable</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当数据接收完成时触发事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDatasetChanged</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>数据在数据源发生变化时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onDatasetComplete</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当来子数据源的全部有效数据读取完毕时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onErrorUpdate</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onRowEnter</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当前数据源的数据发生变化并且有新的有效数据时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onRowExit</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当前数据源的数据将要发生变化时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onRowsDelete</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当前数据记录将被删除时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onRowsInserted</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当前数据源将要插入新数据记录时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff colSpan=3>外部事件</TD></TR>
<TR>
<TD align=middle bgColor=#ffffff>事件</TD>
<TD align=middle bgColor=#ffffff>浏览器支持</TD>
<TD align=middle bgColor=#ffffff>描述</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onAfterPrint</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当文档被打印后触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onBeforePrint</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当文档即将打印时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onFilterChange</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当某个对象的滤镜效果发生变化时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onHelp</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当浏览者按下F1或者浏览器的帮助选择时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onPropertyChange</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE5|N|O</TD>
<TD bgColor=#ffffff>当对象的属性之一发生变化时触发的事件</TD></TR>
<TR>
<TD align=left bgColor=#ffffff>onReadyStateChange</TD>
<TD bgColor=#ffffff>HTML: 2|3|3.2|4 Browser:IE4|N|O</TD>
<TD bgColor=#ffffff>当对象的初始化属性值发生变化时触发的事件</TD></TR></TBODY></TABLE> 来源：<a href=http://www.wren.cn target=_blank>网人帝国</a></td>
</tr>
</table> <script language="javascript">
var keyword="Js事件触发列表与解说";
</script>

2005-12-04

点击多个广告后才显示播放页面的代码（适用于电影、下载）

WEB2.0中AJAX应用的详细探讨

2005-10-18

琥珀无限级联动菜单-JavaScript版

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta content="琥珀[hopesoft],http://www.10090.com" name="author">
<title>琥珀网 - javascript无限级联动菜单</title>
<style type="text/css">
body, td
{
font-family: 宋体;
font-size: 12px;
}
</style>
<script language="javascript">
/*---------------------------------------------------------------------------*\
| Subject: JavaScript三级联动菜单 |
| Version: 1.0 |
| Author: 琥珀【hopesoft】 |
| FileName: HPMenu.js |
| Created: 2005-10-16 |
| LastModified: 2005-10-16 |
| Download: http://www.10090.com/Demo/hpmenu/HPMenu.rar |
| Explain: http://www.10090.com/Demo/ |
| Demo: http://www.10090.com/Demo/ |
| |
| You may use this code on your item |
| this entire copyright notice appears unchanged |
| and you clearly display a link to http://www.10090.com/ |
| |
|-----------------------------------------------------------------------------|
| MSN: hopesoft@msn.com QQ: 11318729 http://www.10090.com |
| Copyright (c) 2004-2005 HopeSoftStudio |
\*---------------------------------------------------------------------------*/

function Menu(theform,menuid) {
/*---------------------------------------------------------------------------*\
* 1.变量定义　　　　　　　　　　　　　　　　　　　　　　 *
/*---------------------------------------------------------------------------*/　　　　　

//定义菜单级别MenuClass,菜单长度数组MenuLenArr,
//菜单名称数组MenuArr,下级菜单数组SubMenuArr，菜单ID数组MenuIdArr
var MenuClass,MenuLenArr,MenuArr,SubMenuArr,MenuIdArr

//定义分隔符：splitchar1,splitchar2
var splitchar1,splitchar2

//定义临时数组,子数组,数组长度,
var arr,subarr,arrlen

/*---------------------------------------------------------------------------*\
* 2.变量赋值　　　　　　　　　　　　　　　　　　　　　　 *
/*---------------------------------------------------------------------------*/
MenuArr=new Array()
MenuLenArr=new Array()
SubMenuArr=new Array()
MenuIdArr=new Array()

MenuArr[1]="欧洲|||亚洲|||非洲|||大洋洲|||北美洲|||南美洲" //洲名|||...
MenuArr[2]="欧洲###德国|||欧洲###法国|||北美洲###美国|||北美洲###加拿大|||亚洲###中国|||非洲###埃及|||大洋洲###澳大利亚|||南美洲###墨西哥" //洲名###国名|||...
MenuArr[3]="中国###北京|||中国###上海|||美国###华盛顿|||美国###纽约|||德国###柏林|||法国###巴黎|||加拿大###多伦多|||埃及###开罗|||澳大利亚###悉尼|||墨西哥###墨西哥城" //国名###城市名|||...
MenuArr[4]="北京###朝阳区|||上海###徐汇区|||广州###天河区|||纽约###曼哈顿区|||华盛顿###华盛顿区|||柏林###新柏林区|||巴黎###大巴黎区|||开罗###大开罗|||悉尼###悉尼市区|||墨西哥城###墨西哥城区" //国名###城市名|||...

MenuIdArr[1]="zhou"
MenuIdArr[2]="guo"
MenuIdArr[3]="shi"
MenuIdArr[4]="qu"
MenuClass=4 //4级菜单

splitchar1="|||";
splitchar2="###";

/*---------------------------------------------------------------------------*\
* 3.生成数组　　　　　　　　　　　　　　　　　　　　　　 *
/*---------------------------------------------------------------------------*/
for(iii=1;iii<=MenuClass;iii++)
{
arr=MenuArr[iii].split(splitchar1);
len=arr.length;
subarr=new Array()
for (i=0;i<len;i++)
{
subarr[i]=arr[i].split(splitchar2);
}
len=subarr.length;
SubMenuArr[iii]=subarr
MenuLenArr[iii]=len
}

//============更改下级菜单======================
var self,submenu,thislen,thisarr
//self本级菜单
//submenu子菜单
//theform:所在表单对象[type:object]
//menuid:本级菜单级别ID，如1级菜单则为1
 self=eval("document."+theform.name+"."+MenuIdArr[menuid])
 submenu=eval("document."+theform.name+"."+MenuIdArr[menuid+1])
 thislen=MenuLenArr[menuid+1]
 thisarr=SubMenuArr[menuid+1]
 submenu.length=0
 submenu.options.add(new Option( "-----请选择-----",""));
 for (i=0;i<thislen;i++)
 {
 if (thisarr[i][0] == self.value)
 {
 submenu.options.add(new Option(thisarr[i][1], thisarr[i][1]));
 }
 }
 submenu.options[0].selected=true

//============更改下级以下菜单==============
var kkk
for(kkk=menuid+2;kkk<=MenuClass;kkk++)
 {
 submenu=eval("document."+theform.name+"."+MenuIdArr[kkk])
 submenu.length=0
 submenu.options.add(new Option( "-----请选择-----",""));
 submenu.options[0].selected=true
 }
}

</script>
<form name="form1" method="post" action="">
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#CCCCCC">
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center">琥珀无限级联动菜单-JavaScript版 [HPMenu V1.0]</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="12%" height="24" align="center">所在洲:</td>
<td><select name="zhou" id="zhou" onChange="Menu(this.form,1);">
<option value="" selected>-----请选择-----</option>
 <option value='欧洲'>欧洲</option>
 <option value='亚洲'>亚洲</option>
 <option value='非洲'>非洲</option>
 <option value='大洋洲'>大洋洲</option>
 <option value='北美洲'>北美洲</option>
 <option value='南美洲'>南美洲</option>
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">国　　家:</td>
<td><select name="guo" id="select" onChange="Menu(this.form,2);">
<option value="" selected>-----请选择-----</option>
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">城　　市:</td>
<td><select name="shi" id="select2" onChange="Menu(this.form,3);">
<option value="" selected>-----请选择-----</option>
</select></td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="24" align="center">地　　区:</td>
<td><select name="qu" id="select3">
<option value="" selected>-----请选择-----</option>
</select></td>
</tr>
<tr bgcolor="F1F1F1">
<td height="24" colspan="2" align="center"> </td>
</tr>
 </table>
 
 <table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="25" align="left">下载地址：<a href="http://www.10090.com/demo/hpmenu/HPMenu.rar" target="_blank">请点击这里</a></td>
</tr>
<tr>
<td height="25" align="left">在线Demo：<a href="http://www.10090.com/demo/" target="_blank">请点击这里</a></td>
</tr>
<tr>
<td height="25" align="left">Bug 反馈：<a href="http://www.10090.com/bbs/index.asp?boardid=60" target="_blank">请点击这里</a></td>
</tr>
<tr>
<td height="25" align="left">联系方式：MSN:hopesoft@msn.com</td>
</tr>
<tr>
<td height="25" align="left"> </td>
</tr>
<tr>
<td height="50" align="center">copyright(c) 2005 <a href="http://www.10090.com">Hopesoft Studio</a> </td>
</tr>
</table>
 <script language="javascript">
 Menu(eval("document.form1"),1)
 </script>
</form>
</body>
</html>

Quote

使用时更改Javascript中以下几行内容：
MenuArr[1]="欧洲|||亚洲"
MenuArr[2]="亚洲###中国
MenuArr[3]="中国###北京
MenuArr[4]="北京###朝阳区

MenuIdArr[1]="zhou"
MenuIdArr[2]="guo"
MenuIdArr[3]="shi"
MenuIdArr[4]="qu"
MenuClass=4 //4级菜单

splitchar1="|||";
splitchar2="###";

如你要实现一个三级联动菜单，表单名为form1,一级菜单ID为sel1,二级菜单ID为sel2，三级菜单ID为sel3，则上述代码应如下：
MenuArr[1]="欧洲|||亚洲"
MenuArr[2]="亚洲###中国|||欧洲###德国
MenuArr[3]="中国###北京|||德国###柏林

MenuIdArr[1]="sel1"
MenuIdArr[2]="sel2"
MenuIdArr[3]="sel3"
MenuClass=3 //3级菜单

splitchar1="|||";
splitchar2="###";

在HTML中调用时，更改相应菜单项ID及onchange代码即可

点击下载